feat(bidi): add Text to BreadcrumbItem, DataTable, Dropdown, `F…

…ormLabel`, `Link`, and `MultiSelect` (#10062) * feat(bidi): add Text to components * test: fix tests from Text component work * test: fix more tests from Text component usage * fix(bidi): remove unecessary usage of Text * chore: revert changes to formlabel test * docs(text): revert changes, add docs clarifying internal Text usage Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Dec 3, 2021 · 54f5bb4 · 54f5bb4
1 parent 1716f04
commit 54f5bb4
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 32 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2587,17 +2587,7 @@ Map {
         "type": "object",
       },
       "helperText": Object {
-        "args": Array [
-          Array [
-            Object {
-              "type": "string",
-            },
-            Object {
-              "type": "node",
-            },
-          ],
-        ],
-        "type": "oneOfType",
+        "type": "node",
       },
       "hideLabel": Object {
         "type": "bool",

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js
@@ -63,7 +63,6 @@ export const skeleton = () => <BreadcrumbSkeleton />;
 const props = () => ({
   className: 'some-class',
   noTrailingSlash: boolean('No trailing slash (noTrailingSlash)', false),
-  isCurrentPage: boolean('Is current page (isCurrentPage)', false),
   onClick: action('onClick'),
 });
 
@@ -73,7 +72,10 @@ export const playground = () => (
       <a href="/#">Breadcrumb 1</a>
     </BreadcrumbItem>
     <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
-    <BreadcrumbItem href="#" {...props()}>
+    <BreadcrumbItem
+      href="#"
+      {...props()}
+      isCurrentPage={boolean('Is current page (isCurrentPage)', false)}>
       Breadcrumb 3
     </BreadcrumbItem>
     <BreadcrumbItem>Breadcrumb 4</BreadcrumbItem>

diff --git a/packages/react/src/components/DataTable/TableBatchActions.js b/packages/react/src/components/DataTable/TableBatchActions.js
@@ -11,6 +11,7 @@ import React from 'react';
 import { settings } from 'carbon-components';
 import Button from '../Button';
 import TableActionList from './TableActionList';
+import { Text } from '../Text';
 
 const { prefix } = settings;
 
@@ -59,11 +60,11 @@ const TableBatchActions = ({
       {...rest}>
       <div className={batchSummaryClasses}>
         <p className={`${prefix}--batch-summary__para`}>
-          <span>
+          <Text as="span">
             {totalSelected > 1 || totalSelected === 0
               ? t('carbon.table.batch.items.selected', { totalSelected })
               : t('carbon.table.batch.item.selected', { totalSelected })}
-          </span>
+          </Text>
         </p>
       </div>
       <TableActionList>

diff --git a/packages/react/src/components/DataTable/__tests__/TableBatchActions-test.js b/packages/react/src/components/DataTable/__tests__/TableBatchActions-test.js
@@ -37,14 +37,14 @@ describe('DataTable.TableBatchActions', () => {
     const singleWrapper = mount(
       <TableBatchActions {...mockProps} totalSelected={1} />
     );
-    expect(singleWrapper.find(`.${prefix}--batch-summary__para`).text()).toBe(
+    expect(singleWrapper.find(`p.${prefix}--batch-summary__para`).text()).toBe(
       '1 item selected'
     );
 
     const multiWrapper = mount(
       <TableBatchActions {...mockProps} totalSelected={2} />
     );
-    expect(multiWrapper.find(`.${prefix}--batch-summary__para`).text()).toBe(
+    expect(multiWrapper.find(`p.${prefix}--batch-summary__para`).text()).toBe(
       '2 items selected'
     );
   });

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2044,9 +2044,15 @@ exports[`DataTable should render 1`] = `
                 <p
                   className="bx--batch-summary__para"
                 >
-                  <span>
-                    0 items selected
-                  </span>
+                  <Text
+                    as="span"
+                  >
+                    <span
+                      dir="auto"
+                    >
+                      0 items selected
+                    </span>
+                  </Text>
                 </p>
               </div>
               <TableActionList>
@@ -3103,9 +3109,15 @@ exports[`DataTable sticky header should render 1`] = `
                 <p
                   className="bx--batch-summary__para"
                 >
-                  <span>
-                    0 items selected
-                  </span>
+                  <Text
+                    as="span"
+                  >
+                    <span
+                      dir="auto"
+                    >
+                      0 items selected
+                    </span>
+                  </Text>
                 </p>
               </div>
               <TableActionList>

diff --git a/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap b/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
@@ -19,9 +19,15 @@ exports[`DataTable.TableBatchActions should render 1`] = `
       <p
         className="bx--batch-summary__para"
       >
-        <span>
-          10 items selected
-        </span>
+        <Text
+          as="span"
+        >
+          <span
+            dir="auto"
+          >
+            10 items selected
+          </span>
+        </Text>
       </p>
     </div>
     <TableActionList>
@@ -82,9 +88,15 @@ exports[`DataTable.TableBatchActions should render 2`] = `
       <p
         className="bx--batch-summary__para"
       >
-        <span>
-          10 items selected
-        </span>
+        <Text
+          as="span"
+        >
+          <span
+            dir="auto"
+          >
+            10 items selected
+          </span>
+        </Text>
       </p>
     </div>
     <TableActionList>

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -252,7 +252,7 @@ Dropdown.propTypes = {
    * Provide helper text that is used alongside the control label for
    * additional help
    */
-  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  helperText: PropTypes.node,
 
   /**
    * Specify whether the title text should be hidden or not

diff --git a/packages/react/src/components/Text/Text-story.js b/packages/react/src/components/Text/Text-story.js
@@ -15,11 +15,15 @@ import Dropdown from '../Dropdown';
 import ContentSwitcher from '../ContentSwitcher';
 import Switch from '../Switch';
 import { Heading } from '../Heading';
+import mdx from './Text.mdx';
 
 export default {
   title: 'Experimental/unstable_Text',
   parameters: {
     component: Text,
+    docs: {
+      page: mdx,
+    },
   },
 };
 
@@ -94,7 +98,7 @@ export const SetTextDirection = () => {
   );
 };
 
-export const ComponentExamples = () => {
+export const UsageExamples = () => {
   const rtlText = 'שלום!!';
   const dropdownItems = [
     {
@@ -108,7 +112,9 @@ export const ComponentExamples = () => {
   ];
   return (
     <>
-      <Heading>{rtlText}</Heading>
+      <Heading>
+        <Text>{rtlText}</Text>
+      </Heading>
       <Button kind="ghost">
         <Text>{rtlText}</Text>
       </Button>

diff --git a/packages/react/src/components/Text/Text.mdx b/packages/react/src/components/Text/Text.mdx
@@ -0,0 +1,85 @@
+import { Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+# Text
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Text)
+
+<!-- &nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/select/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/select/accessibility) -->
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Layout and Text](#layout-and-text)
+- [Set Text Direction](#set-text-direction)
+- [Usage Examples](#useage-examples)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+## Overview
+
+You may be familiar with the `dir` or `direction` property in HTML and CSS. This
+direction is commonly seen as the way to enable LTR (left to right) or RTL
+(right to left) experiences on the web. However, one common misconception is
+that you will want a page to always be LTR or RTL. In certain situations, you
+may want the layout direction to be different than the text direction. This
+series of primitive components is provided to enable the changing of directions
+for individual text nodes, entire sections of your app, or to change layout
+direction independently of text direction.
+
+## Text
+
+`Text` can be used for applying the correct `dir` attribute on a particular text
+node based on the `TextDirection`, defaulting to `auto`.
+
+<Preview>
+  <Story id="experimental-unstable-text--default" />
+</Preview>
+
+## Layout Direction
+
+`LayoutDirection` can be used for setting the layout direction in a part of an
+application.
+
+<Preview>
+  <Story id="experimental-unstable-text--layout-and-text" />
+</Preview>
+
+## Text Direction
+
+`TextDirection` can be used for setting the text direction in a part of an
+application. It allows you to force the text direction of any particular text in
+the sub-tree.
+
+<Preview>
+  <Story id="experimental-unstable-text--set-text-direction" />
+</Preview>
+
+## Usage Examples
+
+It is important to note that not all Carbon components will use `Text`
+internally. Carbon components that accept a property of type `string` should use
+`Text` internally around any usage of the property.
+
+For components that accept properties of type `node`, such as the common
+`children`, `Text` will not be used internally. You can compose `Text` within
+these properties directly. This also applies to components that utilize string
+transformation functions that return nodes, like `itemToElement` on `Dropdown`.
+The Usage Examples story below provides some examples of how to do this with
+various components.
+
+<Preview>
+  <Story id="experimental-unstable-text--usage-examples" />
+</Preview>
+
+## Component API
+
+<Props />
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Text/Text.mdx).