diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 6baee82c07d6..836867e06dc5 100644 --- 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 index 18303dd52cc3..a77382043274 100644 --- 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}> - {text} + {text !== undefined ? text : children} ); @@ -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 index ea843a80f957..8cd5ad592dbd 100644 --- 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 = () => { ); }; + +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 ( + <> + {rtlText} + +
+ {item.text}} + /> +
+ {}}> + + {rtlText} + + + + + + ); +};