Label house keeping updates (#16680)

ui/components/component-library/label/README.mdx

@@ -1,10 +1,12 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
+import { Text } from '..';
+
 import { Label } from './label';
 
 # Label
 
-The `Label` is a component used to label form inputs.
+The `Label` is a component used to label form inputs
 
 <Canvas>
   <Story id="ui-components-component-library-label-label-stories-js--default-story" />
@@ -12,13 +14,17 @@ The `Label` is a component used to label form inputs.
 
 ## Props
 
-The `Label` accepts all props below as well as all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
+The `Label` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
 
 <ArgsTable of={Label} />
 
+`Label` accepts all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) component props
+
+<ArgsTable of={Text} />
+
 ### Children
 
-The `children` of the label can be text or a react node.
+The `children` of the label can be text or a react node
 
 <Canvas>
   <Story id="ui-components-component-library-label-label-stories-js--children" />
@@ -26,9 +32,7 @@ The `children` of the label can be text or a react node.
 
 ```jsx
 import { DISPLAY, ALIGN_ITEMS, FLEX_DIRECTION, SIZES, COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { Label, TextField, Icon, ICON_NAMES } from '../../component-library';
-import { Label } from '../../ui/components/component-library';
-import { TextFieldBase } from '../../ui/components/component-library';
 
 <Label>Plain text</Label>
 <Label display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START}>
@@ -45,25 +49,23 @@ import { TextFieldBase } from '../../ui/components/component-library';
   alignItems={ALIGN_ITEMS.FLEX_START}
 >
   Label that wraps an input
-  {/* TODO: replace with TextField component */}
+  <TextField placeholder="Click label to focus" />
-  <TextFieldBase placeholder="Click label to focus" />
 </Label>
 ```
 
 ### Html For
 
-Use the `htmlFor` prop to allow the `Label` to focus on an input with the same id when clicked. The cursor will also change to a `pointer` when the `htmlFor` has a value
+Use the `htmlFor` prop to allow the `Label` to focus on an input with the same id when clicked. The cursor will also change to a `pointer` when the `htmlFor` has a value.
 
 <Canvas>
   <Story id="ui-components-component-library-label-label-stories-js--html-for" />
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/components/component-library';
+import { Label, TextFieldBase } from '../../component-library';
-import { Label } from '../../ui/components/component-library';
 
 <Label htmlFor="add-network">Add network</Label>
-<TextFieldBase  id="add-network" placeholder="Enter network name" />
+<TextField id="add-network" placeholder="Enter network name" />
 ```
 
 ### Required
@@ -75,7 +77,7 @@ Use the `required` prop to add a required red asterisk next to the `children` of
 </Canvas>
 
 ```jsx
-import { Label } from '../../ui/components/component-library';
+import { Label } from '../../component-library';
 
 <Label required>Label</Label>;
 ```
@@ -89,7 +91,7 @@ Use the `disabled` prop to set the `Label` in disabled state
 </Canvas>
 
 ```jsx
-import { Label } from '../../ui/components/component-library';
+import { Label } from '../../component-library';
 
 <Label disabled>Label</Label>;
 ```

ui/components/component-library/label/__snapshots__/label.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`label should render text inside the label 1`] = `
+<div>
+  <label
+    class="box text mm-label text--body-md text--font-weight-bold text--color-text-default box--display-inline-flex box--flex-direction-row box--align-items-center"
+  >
+    label
+  </label>
+</div>
+`;

ui/components/component-library/label/label.js

@@ -20,15 +20,15 @@ export const Label = ({
   ...props
 }) => (
   <Text
-    as="label"
-    disabled={disabled}
-    htmlFor={htmlFor}
     className={classnames(
       'mm-label',
       { 'mm-label--disabled': disabled },
       { 'mm-label--html-for': htmlFor && !disabled },
       className,
     )}
+    as="label"
+    disabled={disabled}
+    htmlFor={htmlFor}
     variant={TEXT.BODY_MD}
     fontWeight={FONT_WEIGHT.BOLD}
     display={DISPLAY.INLINE_FLEX}

ui/components/component-library/label/label.stories.js

@@ -8,8 +8,8 @@ import {
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box';
-import { Icon, ICON_NAMES } from '../icon';
+
-import { TextFieldBase } from '../text-field-base';
+import { Icon, ICON_NAMES, TextField } from '..';
 
 import { Label } from './label';
 
@@ -73,8 +73,7 @@ export const Children = (args) => (
       alignItems={ALIGN_ITEMS.FLEX_START}
     >
       Label that wraps an input
-      {/* TODO: replace with TextField component */}
+      <TextField placeholder="Click label to focus" />
-      <TextFieldBase placeholder="Click label to focus" />
     </Label>
   </Box>
 );
@@ -87,7 +86,7 @@ export const HtmlFor = (args) => {
   return (
     <Box display={DISPLAY.INLINE_FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
       <Label {...args} />
-      <TextFieldBase
+      <TextField
         id="add-network"
         value={value}
         onChange={handleOnChange}

ui/components/component-library/label/label.test.js

@@ -8,8 +8,14 @@ import { Label } from './label';
 
 describe('label', () => {
   it('should render text inside the label', () => {
-    const { getByText } = render(<Label>label</Label>);
+    const { getByText, container } = render(<Label>label</Label>);
+    expect(getByText('label')).toHaveClass('mm-label');
     expect(getByText('label')).toBeDefined();
+    expect(container).toMatchSnapshot();
+  });
+  it('should render with additional className', () => {
+    const { getByText } = render(<Label className="test-class">label</Label>);
+    expect(getByText('label')).toHaveClass('mm-label test-class');
   });
   it('should render text and react nodes as children', () => {
     const { getByText, getByTestId } = render(
@@ -60,8 +66,4 @@ describe('label', () => {
     const { getByText } = render(<Label disabled>label</Label>);
     expect(getByText('label')).toHaveClass('mm-label--disabled');
   });
-  it('should render with additional className', () => {
-    const { getByText } = render(<Label className="test-class">label</Label>);
-    expect(getByText('label')).toHaveClass('test-class');
-  });
 });