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 (
+ <>
+