From b5c1f82f01d2b254499898b50ecd834e328d1988 Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Mon, 20 Sep 2021 11:08:13 -0500
Subject: [PATCH] feat(Text): add text to Accordion, Button, Checkbox,
 Combobox, Contentswitcher (#9493)

* feat(Text): add Text to Accordion, Button, Checkbox, Combobox, Switcher

* test(Text): update snapshots

* fix(Accordion, Button): revert changes as per pr review

* test(Accordion): update snappies

* fix(ContentSwitcher): revert changes to text prop

* fix(accordion-item): wrap title in text instead of children

* test: update snapshots

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 .../react/src/components/Accordion/AccordionItem.js  |  5 ++++-
 .../__tests__/__snapshots__/Accordion-test.js.snap   |  3 +++
 .../__snapshots__/AccordionItem-test.js.snap         | 12 +++++++++---
 packages/react/src/components/Button/Button.js       |  1 +
 packages/react/src/components/Checkbox/Checkbox.js   |  3 ++-
 packages/react/src/components/ComboBox/ComboBox.js   |  9 +++++----
 6 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
index dd63a1626cf3..79aa438a913d 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,7 +85,9 @@ 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>
       <div id={id} className={`${prefix}--accordion__content`}>
         {children}
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..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,6 +31,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading A
         </div>
@@ -68,6 +69,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading B
         </div>
@@ -105,6 +107,7 @@ 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 9de4cf8a9a9c..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,11 +54,17 @@ 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>
     <div
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index ec81c3704cda..a181e06a1d1a 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -212,6 +212,7 @@ const Button = React.forwardRef(function Button(
     component = 'a';
     otherProps = anchorProps;
   }
+
   return React.createElement(
     component,
     {
diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js
index 7bdca235a0b8..42a3c2e0751e 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';
 import deprecate from '../../prop-types/deprecate';
@@ -69,7 +70,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 87e68a018940..e19b9ce805d0 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,
@@ -293,9 +294,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}
@@ -391,9 +392,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>
         );