From 546c4194ead99df1ca4b6d02ff81f52b03b1e3fa Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Tue, 17 Aug 2021 14:06:22 -0500
Subject: [PATCH 1/7] feat(Text): add Text to Accordion, Button, Checkbox,
 Combobox, Switcher

---
 packages/react/src/components/Accordion/AccordionItem.js | 9 ++++++---
 packages/react/src/components/Button/Button.js           | 6 +++++-
 packages/react/src/components/Checkbox/Checkbox.js       | 3 ++-
 packages/react/src/components/ComboBox/ComboBox.js       | 9 +++++----
 .../src/components/ContentSwitcher/ContentSwitcher.js    | 3 ++-
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
index e846611cf569..a9c10259f75b 100644
--- a/packages/react/src/components/Accordion/AccordionItem.js
+++ b/packages/react/src/components/Accordion/AccordionItem.js
@@ -10,6 +10,7 @@ import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import { Text } from '../Text';
 import { match, keys } from '../../internal/keyboard';
 import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate.js';
@@ -84,11 +85,13 @@ function AccordionItem({
         onKeyDown={onKeyDown}
         type="button">
         <ChevronRight16 className={`${prefix}--accordion__arrow`} />
-        <div className={`${prefix}--accordion__title`}>{title}</div>
+        <Text as="div" className={`${prefix}--accordion__title`}>
+          {title}
+        </Text>
       </Expand>
-      <div id={id} className={`${prefix}--accordion__content`}>
+      <Text as="div" id={id} className={`${prefix}--accordion__content`}>
         {children}
-      </div>
+      </Text>
     </li>
   );
 }
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index 6d28d9439ce7..635cc43ee13b 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -14,6 +14,7 @@ import deprecate from '../../prop-types/deprecate';
 import { composeEventHandlers } from '../../tools/events';
 import { keys, matches } from '../../internal/keyboard';
 import { useId } from '../../internal/useId';
+import { Text } from '../Text';
 import toggleClass from '../../tools/toggleClass';
 import { useFeatureFlag } from '../FeatureFlags';
 
@@ -214,6 +215,9 @@ const Button = React.forwardRef(function Button(
     component = 'a';
     otherProps = anchorProps;
   }
+
+  const childrenWithText = <Text as="span">{children}</Text>;
+
   return React.createElement(
     component,
     {
@@ -227,7 +231,7 @@ const Button = React.forwardRef(function Button(
       ...otherProps,
     },
     assistiveText,
-    children,
+    childrenWithText,
     buttonImage
   );
 });
diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js
index ce74353a18d2..25244006e906 100644
--- a/packages/react/src/components/Checkbox/Checkbox.js
+++ b/packages/react/src/components/Checkbox/Checkbox.js
@@ -8,6 +8,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
+import { Text } from '../Text';
 import { useFeatureFlag } from '../FeatureFlags';
 import { settings } from 'carbon-components';
 
@@ -65,7 +66,7 @@ const Checkbox = React.forwardRef(function Checkbox(
         }}
       />
       <label htmlFor={id} className={labelClasses} title={title || null}>
-        <span className={innerLabelClasses}>{labelText}</span>
+        <Text className={innerLabelClasses}>{labelText}</Text>
       </label>
     </div>
   );
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 27ad2e56658e..f0790590dd56 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -9,6 +9,7 @@ import cx from 'classnames';
 import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState, useRef } from 'react';
+import { Text } from '../Text';
 import { settings } from 'carbon-components';
 import {
   Checkmark16,
@@ -281,9 +282,9 @@ const ComboBox = React.forwardRef((props, ref) => {
         return (
           <div className={wrapperClasses}>
             {titleText && (
-              <label className={titleClasses} {...labelProps}>
+              <Text as="label" className={titleClasses} {...labelProps}>
                 {titleText}
-              </label>
+              </Text>
             )}
             <ListBox
               className={className}
@@ -378,9 +379,9 @@ const ComboBox = React.forwardRef((props, ref) => {
               </ListBox.Menu>
             </ListBox>
             {helperText && !invalid && !warn && (
-              <div id={comboBoxHelperId} className={helperClasses}>
+              <Text as="div" id={comboBoxHelperId} className={helperClasses}>
                 {helperText}
-              </div>
+              </Text>
             )}
           </div>
         );
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
index 4e667238da34..8bf41e6e4723 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
+import { Text } from '../Text';
 import { composeEventHandlers } from '../../tools/events';
 import { getNextIndex, matches, keys } from '../../internal/keyboard';
 import deprecate from '../../prop-types/deprecate';
@@ -115,7 +116,7 @@ export default class ContentSwitcher extends React.Component {
               ...data,
               index: this.state.selectedIndex,
               name: child.props.name,
-              text: child.props.text,
+              text: <Text>child.props.text</Text>,
             });
           }
         );

From 95fa98e546b3b52753ee7d534622f733f9e2b2ed Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Tue, 17 Aug 2021 14:09:42 -0500
Subject: [PATCH 2/7] test(Text): update snapshots

---
 .../__snapshots__/Accordion-test.js.snap      |  6 +++++
 .../__snapshots__/AccordionItem-test.js.snap  | 25 ++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
index d41f77795f19..f7bbd729178c 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -31,12 +31,14 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading A
         </div>
       </button>
       <div
         class="bx--accordion__content"
+        dir="auto"
         id="accordion-item-1"
       >
         Panel A
@@ -68,12 +70,14 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading B
         </div>
       </button>
       <div
         class="bx--accordion__content"
+        dir="auto"
         id="accordion-item-2"
       >
         Panel B
@@ -105,12 +109,14 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading C
         </div>
       </button>
       <div
         class="bx--accordion__content"
+        dir="auto"
         id="accordion-item-3"
       >
         Panel C
diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
index 6be426d5285d..51c8da710b08 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -54,19 +54,32 @@ exports[`AccordionItem should render 1`] = `
             </svg>
           </Icon>
         </ForwardRef(ChevronRight16)>
-        <div
+        <Text
+          as="div"
           className="bx--accordion__title"
         >
-          A heading
-        </div>
+          <div
+            className="bx--accordion__title"
+            dir="auto"
+          >
+            A heading
+          </div>
+        </Text>
       </button>
     </defaultRenderExpand>
-    <div
+    <Text
+      as="div"
       className="bx--accordion__content"
       id="accordion-item-1"
     >
-      Lorem ipsum.
-    </div>
+      <div
+        className="bx--accordion__content"
+        dir="auto"
+        id="accordion-item-1"
+      >
+        Lorem ipsum.
+      </div>
+    </Text>
   </li>
 </AccordionItem>
 `;

From aaf918cab4cb04813e0730eaa085e6722e36c033 Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Thu, 19 Aug 2021 17:50:40 -0500
Subject: [PATCH 3/7] fix(Accordion, Button): revert changes as per pr review

---
 packages/react/src/components/Accordion/AccordionItem.js | 4 +---
 packages/react/src/components/Button/Button.js           | 5 +----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
index a9c10259f75b..a6d83fe0b6fd 100644
--- a/packages/react/src/components/Accordion/AccordionItem.js
+++ b/packages/react/src/components/Accordion/AccordionItem.js
@@ -85,9 +85,7 @@ function AccordionItem({
         onKeyDown={onKeyDown}
         type="button">
         <ChevronRight16 className={`${prefix}--accordion__arrow`} />
-        <Text as="div" className={`${prefix}--accordion__title`}>
-          {title}
-        </Text>
+        <div className={`${prefix}--accordion__title`}>{title}</div>
       </Expand>
       <Text as="div" id={id} className={`${prefix}--accordion__content`}>
         {children}
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index 635cc43ee13b..a634c4e6ac4f 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -14,7 +14,6 @@ import deprecate from '../../prop-types/deprecate';
 import { composeEventHandlers } from '../../tools/events';
 import { keys, matches } from '../../internal/keyboard';
 import { useId } from '../../internal/useId';
-import { Text } from '../Text';
 import toggleClass from '../../tools/toggleClass';
 import { useFeatureFlag } from '../FeatureFlags';
 
@@ -216,8 +215,6 @@ const Button = React.forwardRef(function Button(
     otherProps = anchorProps;
   }
 
-  const childrenWithText = <Text as="span">{children}</Text>;
-
   return React.createElement(
     component,
     {
@@ -231,7 +228,7 @@ const Button = React.forwardRef(function Button(
       ...otherProps,
     },
     assistiveText,
-    childrenWithText,
+    children,
     buttonImage
   );
 });

From 564b3f4e13cecf12cac39aa46d609ba1891b3b74 Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Thu, 19 Aug 2021 19:25:13 -0500
Subject: [PATCH 4/7] test(Accordion): update snappies

---
 .../__tests__/__snapshots__/Accordion-test.js.snap   |  3 ---
 .../__snapshots__/AccordionItem-test.js.snap         | 12 +++---------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
index f7bbd729178c..9ba0d37aa6f5 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -31,7 +31,6 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
-          dir="auto"
         >
           Heading A
         </div>
@@ -70,7 +69,6 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
-          dir="auto"
         >
           Heading B
         </div>
@@ -109,7 +107,6 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
-          dir="auto"
         >
           Heading C
         </div>
diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
index 51c8da710b08..7c3cd3cdc585 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -54,17 +54,11 @@ exports[`AccordionItem should render 1`] = `
             </svg>
           </Icon>
         </ForwardRef(ChevronRight16)>
-        <Text
-          as="div"
+        <div
           className="bx--accordion__title"
         >
-          <div
-            className="bx--accordion__title"
-            dir="auto"
-          >
-            A heading
-          </div>
-        </Text>
+          A heading
+        </div>
       </button>
     </defaultRenderExpand>
     <Text

From b4014ed33305834381a47110e80478c9582f30b9 Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Tue, 31 Aug 2021 21:04:37 -0500
Subject: [PATCH 5/7] fix(ContentSwitcher): revert changes to text prop

---
 .../react/src/components/ContentSwitcher/ContentSwitcher.js    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
index 8bf41e6e4723..4e667238da34 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
-import { Text } from '../Text';
 import { composeEventHandlers } from '../../tools/events';
 import { getNextIndex, matches, keys } from '../../internal/keyboard';
 import deprecate from '../../prop-types/deprecate';
@@ -116,7 +115,7 @@ export default class ContentSwitcher extends React.Component {
               ...data,
               index: this.state.selectedIndex,
               name: child.props.name,
-              text: <Text>child.props.text</Text>,
+              text: child.props.text,
             });
           }
         );

From 59a87355d12b0c331e23bd612871d2c54e27ba16 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Mon, 13 Sep 2021 14:37:09 -0500
Subject: [PATCH 6/7] fix(accordion-item): wrap title in text instead of
 children

---
 packages/react/src/components/Accordion/AccordionItem.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
index dc3dd8dbe114..79aa438a913d 100644
--- a/packages/react/src/components/Accordion/AccordionItem.js
+++ b/packages/react/src/components/Accordion/AccordionItem.js
@@ -85,11 +85,13 @@ function AccordionItem({
         onKeyDown={onKeyDown}
         type="button">
         <ChevronRight16 className={`${prefix}--accordion__arrow`} />
-        <div className={`${prefix}--accordion__title`}>{title}</div>
+        <Text as="div" className={`${prefix}--accordion__title`}>
+          {title}
+        </Text>
       </Expando>
-      <Text as="div" id={id} className={`${prefix}--accordion__content`}>
+      <div id={id} className={`${prefix}--accordion__content`}>
         {children}
-      </Text>
+      </div>
     </li>
   );
 }

From acc7ec5553d972d366feaff34aa711cd571635e6 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Mon, 20 Sep 2021 10:41:07 -0500
Subject: [PATCH 7/7] test: update snapshots

---
 .../__snapshots__/Accordion-test.js.snap      |  6 ++---
 .../__snapshots__/AccordionItem-test.js.snap  | 25 +++++++++----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
index 9ba0d37aa6f5..36df88277a96 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -31,13 +31,13 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading A
         </div>
       </button>
       <div
         class="bx--accordion__content"
-        dir="auto"
         id="accordion-item-1"
       >
         Panel A
@@ -69,13 +69,13 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading B
         </div>
       </button>
       <div
         class="bx--accordion__content"
-        dir="auto"
         id="accordion-item-2"
       >
         Panel B
@@ -107,13 +107,13 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading C
         </div>
       </button>
       <div
         class="bx--accordion__content"
-        dir="auto"
         id="accordion-item-3"
       >
         Panel C
diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
index aa8eef0673f8..cacb17ff9f74 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -54,26 +54,25 @@ exports[`AccordionItem should render 1`] = `
             </svg>
           </Icon>
         </ForwardRef(ChevronRight16)>
-        <div
+        <Text
+          as="div"
           className="bx--accordion__title"
         >
-          A heading
-        </div>
+          <div
+            className="bx--accordion__title"
+            dir="auto"
+          >
+            A heading
+          </div>
+        </Text>
       </button>
     </defaultRenderExpando>
-    <Text
-      as="div"
+    <div
       className="bx--accordion__content"
       id="accordion-item-1"
     >
-      <div
-        className="bx--accordion__content"
-        dir="auto"
-        id="accordion-item-1"
-      >
-        Lorem ipsum.
-      </div>
-    </Text>
+      Lorem ipsum.
+    </div>
   </li>
 </AccordionItem>
 `;