Updating label according to insight report (#18151)

ui/components/component-library/form-text-field/README.mdx

@@ -290,7 +290,7 @@ import {
       * or require adding some form of customization
       * import the Label component separately
       */}
-    <Label htmlFor="custom-spending-cap" required>
+    <Label htmlFor="custom-spending-cap">
       Custom spending cap
     </Label>
     <Icon
@@ -326,7 +326,7 @@ import {
     * import the HelpText component separately and handle the error
     * logic yourself
     */}
-  <HelpText htmlFor="chainId" required marginRight={2}>
+  <HelpText htmlFor="chainId" marginRight={2}>
     Only enter a number that you're comfortable with the contract accessing
     now or in the future. You can always increase the token limit later.
   </HelpText>

ui/components/component-library/form-text-field/form-text-field.js

@@ -59,7 +59,6 @@ export const FormTextField = ({
     {label && (
       <Label
         htmlFor={id}
-        required={required}
         {...labelProps}
         className={classnames(
           'mm-form-text-field__label',

ui/components/component-library/form-text-field/form-text-field.stories.js

@@ -405,9 +405,7 @@ export const CustomLabelOrHelpText = () => (
         {/* If you need a custom label
         or require adding some form of customization
         import the Label component separately */}
-        <Label htmlFor="custom-spending-cap" required>
-          Custom spending cap
-        </Label>
+        <Label htmlFor="custom-spending-cap">Custom spending cap</Label>
         <Icon
           name={ICON_NAMES.INFO}
           size={Size.SM}

ui/components/component-library/form-text-field/form-text-field.test.js

@@ -234,17 +234,6 @@ describe('FormTextField', () => {
     expect(getByRole('textbox')).toHaveValue('test value');
     expect(getByRole('textbox')).toHaveAttribute('readonly', '');
   });
-  // required
-  it('should render with required asterisk after Label', () => {
-    const { getByTestId } = render(
-      <FormTextField
-        required
-        label="test label"
-        labelProps={{ 'data-testid': 'label-test-id' }}
-      />,
-    );
-    expect(getByTestId('label-test-id')).toHaveTextContent('test label*');
-  });
   // size = SIZES.MD
   it('should render with different size classes', () => {
     const { getByTestId } = render(

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

@@ -6,7 +6,7 @@ import { Label } from './label';
 
 # Label
 
-The `Label` is a component used to label form inputs
+`Label` is used to describe the purpose of a form field
 
 <Canvas>
   <Story id="components-componentlibrary-label--default-story" />
@@ -68,22 +68,7 @@ import { Label, TextField } from '../../component-library';
 <TextField id="add-network" placeholder="Enter network name" />
 ```
 
-### Required
+### Internal Resources
 
-Use the `required` prop to add a required red asterisk next to the `children` of the `Label`. Note the required asterisk will always render after the `children`.
-
-<Canvas>
-  <Story id="components-componentlibrary-label--required" />
-</Canvas>
-
-```jsx
-import { Label } from '../../component-library';
-
-<Label required>Label</Label>;
-```
-
-```jsx
-import { Label } from '../../component-library';
-
-<Label disabled>Label</Label>;
-```
+- [Figma component](https://www.figma.com/file/HKpPKij9V3TpsyMV1TpV7C/branch/7uyrueQIFQBLqo9uzkxclr/DS-Components?node-id=13879%3A38076&t=dBHjnJTMSVE8N2UP-1)
+- [Insight report](https://www.figma.com/file/aGW8sk6X6Jf9ac0MRMD4kX/TextField-Audit?node-id=282%3A22&t=ZgCGFwGOBmOwQR5c-1)

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

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Text } from '../text';
 import {
-  Color,
   FONT_WEIGHT,
   TextVariant,
   DISPLAY,
   AlignItems,
 } from '../../../helpers/constants/design-system';
 
-export const Label = ({ htmlFor, required, className, children, ...props }) => (
+export const Label = ({ htmlFor, className, children, ...props }) => (
   <Text
     className={classnames(
       'mm-label',
@@ -26,16 +25,6 @@ export const Label = ({ htmlFor, required, className, children, ...props }) => (
     {...props}
   >
     {children}
-    {required && (
-      <Text
-        as="span"
-        className="mm-label__required-asterisk"
-        aria-hidden="true"
-        color={Color.errorDefault}
-      >
-        *
-      </Text>
-    )}
   </Text>
 );
 
@@ -48,10 +37,6 @@ Label.propTypes = {
    * The id of the input associated with the label
    */
   htmlFor: PropTypes.string,
-  /**
-   * If true the label will display as required
-   */
-  required: PropTypes.bool,
   /**
    * Additional classNames to be added to the label component
    */

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

@@ -28,9 +28,6 @@ export default {
     htmlFor: {
       control: 'text',
     },
-    required: {
-      control: 'boolean',
-    },
     children: {
       control: 'text',
     },
@@ -96,8 +93,3 @@ HtmlFor.args = {
   children: 'Network name',
   htmlFor: 'add-network',
 };
-
-export const Required = Template.bind({});
-Required.args = {
-  required: true,
-};

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

@@ -57,9 +57,4 @@ describe('label', () => {
     fireEvent.click(label);
     expect(input).toHaveFocus();
   });
-  it('should render with required asterisk', () => {
-    const { getByText } = render(<Label required>label</Label>);
-    expect(getByText('label')).toBeDefined();
-    expect(getByText('*')).toBeDefined();
-  });
 });