docs(text): add component examples to storybook, update switch text p…

…rop (#9817) * docs(text): add component examples to storybook, update switch text prop * feat(switch): provide optional text and children props * chore: reconfigure stories and switch usage/children prop * fix(switch): render text or children, not both * chore: update snaps Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 22, 2021 · 877e478 · 877e478
1 parent 7a1e883
commit 877e478
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 3 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5692,6 +5692,9 @@ Map {
  },
  "displayName": "Switch",
  "propTypes": Object {
+ "children": Object {
+ "type": "node",
+ },
  "className": Object {
  "type": "string",
  },
@@ -5724,7 +5727,6 @@ Map {
  "type": "bool",
  },
  "text": Object {
- "isRequired": true,
  "type": "string",
  },
  },

diff --git a/packages/react/src/components/Switch/Switch.js b/packages/react/src/components/Switch/Switch.js
@@ -14,6 +14,7 @@ const { prefix } = settings;
 
 const Switch = React.forwardRef(function Switch(props, tabRef) {
  const {
+ children,
  className,
  disabled,
  index,
@@ -57,7 +58,7 @@ const Switch = React.forwardRef(function Switch(props, tabRef) {
  {...other}
  {...commonProps}>
  <span className={`${prefix}--content-switcher__label`} title={text}>
- {text}
+ {text !== undefined ? text : children}
  </span>
  </button>
  );
@@ -66,6 +67,11 @@ const Switch = React.forwardRef(function Switch(props, tabRef) {
 Switch.displayName = 'Switch';
 
 Switch.propTypes = {
+ /**
+ * Provide child elements to be rendered inside of the Switch
+ */
+ children: PropTypes.node,
+
  /**
  * Specify an optional className to be added to your Switch
  */
@@ -107,7 +113,7 @@ Switch.propTypes = {
  /**
  * Provide the contents of your Switch
  */
- text: PropTypes.string.isRequired,
+ text: PropTypes.string,
 };
 
 Switch.defaultProps = {

diff --git a/packages/react/src/components/Text/Text-story.js b/packages/react/src/components/Text/Text-story.js
@@ -10,6 +10,11 @@ import { LayoutDirection } from '../Layout';
 import { TextDirection, Text } from '../Text';
 import RadioButtonGroup from '../RadioButtonGroup';
 import RadioButton from '../RadioButton';
+import Button from '../Button';
+import Dropdown from '../Dropdown';
+import ContentSwitcher from '../ContentSwitcher';
+import Switch from '../Switch';
+import { Heading } from '../Heading';
 
 export default {
  title: 'Experimental/unstable_Text',
@@ -88,3 +93,44 @@ export const SetTextDirection = () => {
  </TextDirection>
  );
 };
+
+export const ComponentExamples = () => {
+ const rtlText = 'שלום!!';
+ const dropdownItems = [
+ {
+ id: 'option-0',
+ text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+ },
+ {
+ id: 'option-1',
+ text: rtlText,
+ },
+ ];
+ return (
+ <>
+ <Heading>{rtlText}</Heading>
+ <Button kind="ghost">
+ <Text>{rtlText}</Text>
+ </Button>
+ <div style={{ width: 400 }}>
+ <Dropdown
+ id="default"
+ titleText="Using <Text> with `itemToElement`"
+ helperText="This is some helper text"
+ label="Dropdown menu options"
+ items={dropdownItems}
+ itemToElement={(item) => <Text>{item.text}</Text>}
+ />
+ </div>
+ <ContentSwitcher
+ helperText="Using <Text> within <Switch>"
+ onChange={() => {}}>
+ <Switch name="one">
+ <Text>{rtlText}</Text>
+ </Switch>
+ <Switch name="two" text="Second section" />
+ <Switch name="three" text="Third section" />
+ </ContentSwitcher>
+ </>
+ );
+};