Merge pull request #460 from mashmatrix/support-slds-2-text

Update `Text` for SLDS2

Author: stomita

src/scripts/Text.tsx

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 export type TextProps = {
   tag?: keyof ReactHTML;
   category?: 'body' | 'heading' | 'title';
-  type?: 'small' | 'regular' | 'medium' | 'large' | 'caps' | 'label';
+  type?: 'small' | 'regular' | 'medium' | 'large' | 'caps';
   align?: 'left' | 'center' | 'right';
   truncate?: boolean;
   section?: boolean;
@@ -29,7 +29,7 @@ export const Text: FC<TextProps> = ({
 }) => {
   const textClassNames = classnames(
     type && category ? `slds-text-${category}_${type}` : undefined,
-    category && !type ? `slds-text-${category}` : undefined,
+    category === 'title' && !type ? `slds-text-${category}` : undefined,
     align ? `slds-text-align_${align}` : undefined,
     {
       'slds-truncate': truncate,

stories/PageHeader.stories.tsx

@@ -97,14 +97,12 @@ export const RecordHome: ComponentStoryObj<typeof PageHeader> = {
         </PageHeaderDetailItem>
         <PageHeaderDetailItem>
           <PageHeaderDetailLabel>
-            <Text tag='div' category='heading' type='label'>
-              FIELD 2 (3)
-              <DropdownButton type='icon-bare' iconSize='small' icon='down'>
-                <MenuItem>Menu Item #1</MenuItem>
-                <MenuItem>Menu Item #2</MenuItem>
-                <MenuItem>Menu Item #3</MenuItem>
-              </DropdownButton>
-            </Text>
+            FIELD 2 (3)
+            <DropdownButton type='icon-bare' iconSize='small' icon='down'>
+              <MenuItem>Menu Item #1</MenuItem>
+              <MenuItem>Menu Item #2</MenuItem>
+              <MenuItem>Menu Item #3</MenuItem>
+            </DropdownButton>
           </PageHeaderDetailLabel>
           <PageHeaderDetailBody>
             <Text category='body' type='regular' title='Multiple Values'>