Updating Label component (#17731)

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

@@ -62,8 +62,11 @@ export const FormTextField = ({
       <Label
         htmlFor={id}
         required={required}
-        disabled={disabled}
         {...labelProps}
+        className={classnames(
+          'mm-form-text-field__label',
+          labelProps?.className,
+        )}
       >
         {label}
       </Label>
@@ -105,13 +108,13 @@ export const FormTextField = ({
     />
     {helpText && (
       <HelpText
+        error={error}
+        marginTop={1}
+        {...helpTextProps}
         className={classnames(
           'mm-form-text-field__help-text',
           helpTextProps?.className,
         )}
-        error={error}
-        marginTop={1}
-        {...helpTextProps}
       >
         {helpText}
       </HelpText>

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

@@ -1,9 +1,11 @@
 .mm-form-text-field {
-  --help-text-opacity-disabled: 0.5;
+  --text-opacity-disabled: 0.5;
 
   &--disabled {
+    .mm-form-text-field__label,
     .mm-form-text-field__help-text {
-      opacity: var(--help-text-opacity-disabled);
+      opacity: var(--text-opacity-disabled);
+      cursor: default;
     }
   }
 }

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

@@ -96,11 +96,14 @@ describe('FormTextField', () => {
     const { getByText, getByTestId } = render(
       <FormTextField
         helpText="test help text"
-        helpTextProps={{ 'data-testid': 'help-text-test' }}
+        helpTextProps={{ 'data-testid': 'help-text-test', className: 'test' }}
       />,
     );
     expect(getByText('test help text')).toBeDefined();
     expect(getByTestId('help-text-test')).toBeDefined();
+    expect(getByTestId('help-text-test')).toHaveClass(
+      'mm-form-text-field__help-text test',
+    );
   });
   // id
   it('should render the FormTextField with an id and pass it to input and Label as htmlFor. When clicking on Label the input should have focus', async () => {
@@ -141,12 +144,15 @@ describe('FormTextField', () => {
     const { getByTestId, getByLabelText } = render(
       <FormTextField
         label="test label"
-        labelProps={{ 'data-testid': 'label-test-id' }}
+        labelProps={{ 'data-testid': 'label-test-id', className: 'test' }}
         id="test-id"
       />,
     );
     expect(getByLabelText('test label')).toBeDefined();
     expect(getByTestId('label-test-id')).toBeDefined();
+    expect(getByTestId('label-test-id')).toHaveClass(
+      'mm-form-text-field__label test',
+    );
   });
   // leftAccessory, // rightAccessory
   it('should render with right and left accessories', () => {

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

@@ -82,14 +82,6 @@ import { Label } from '../../component-library';
 <Label required>Label</Label>;
 ```
 
-### Disabled
-
-Use the `disabled` prop to set the `Label` in disabled state
-
-<Canvas>
-  <Story id="components-componentlibrary-label--disabled" />
-</Canvas>
-
 ```jsx
 import { Label } from '../../component-library';
 

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

@@ -10,23 +10,14 @@ import {
   AlignItems,
 } from '../../../helpers/constants/design-system';
 
-export const Label = ({
+export const Label = ({ htmlFor, required, className, children, ...props }) => (
-  htmlFor,
-  required,
-  disabled,
-  className,
-  children,
-  ...props
-}) => (
   <Text
     className={classnames(
       'mm-label',
-      { 'mm-label--disabled': disabled },
+      { 'mm-label--html-for': htmlFor },
-      { 'mm-label--html-for': htmlFor && !disabled },
       className,
     )}
     as="label"
-    disabled={disabled}
     htmlFor={htmlFor}
     variant={TextVariant.bodyMd}
     fontWeight={FONT_WEIGHT.BOLD}
@@ -61,10 +52,6 @@ Label.propTypes = {
    * If true the label will display as required
    */
   required: PropTypes.bool,
-  /**
-   * Whether the label is disabled or not
-   */
-  disabled: PropTypes.bool,
   /**
    * Additional classNames to be added to the label component
    */

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

@@ -1,11 +1,5 @@
 .mm-label {
-  --label-opacity-disabled: 0.5; // TODO: replace with design token
-
   &--html-for {
     cursor: pointer;
   }
-
-  &--disabled {
-    opacity: var(--label-opacity-disabled);
-  }
 }

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

@@ -31,9 +31,6 @@ export default {
     required: {
       control: 'boolean',
     },
-    disabled: {
-      control: 'boolean',
-    },
     children: {
       control: 'text',
     },
@@ -104,8 +101,3 @@ export const Required = Template.bind({});
 Required.args = {
   required: true,
 };
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};

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

@@ -62,8 +62,4 @@ describe('label', () => {
     expect(getByText('label')).toBeDefined();
     expect(getByText('*')).toBeDefined();
   });
-  it('should render with disabled state and have disabled class', () => {
-    const { getByText } = render(<Label disabled>label</Label>);
-    expect(getByText('label')).toHaveClass('mm-label--disabled');
-  });
 });