diff --git a/ui/components/component-library/form-text-field/form-text-field.js b/ui/components/component-library/form-text-field/form-text-field.js index 6ac45e5bf332..b225f0a60c50 100644 --- a/ui/components/component-library/form-text-field/form-text-field.js +++ b/ui/components/component-library/form-text-field/form-text-field.js @@ -62,8 +62,11 @@ export const FormTextField = ({ @@ -105,13 +108,13 @@ export const FormTextField = ({ /> {helpText && ( {helpText} diff --git a/ui/components/component-library/form-text-field/form-text-field.scss b/ui/components/component-library/form-text-field/form-text-field.scss index c4316f8c16e3..383c04fbe9eb 100644 --- a/ui/components/component-library/form-text-field/form-text-field.scss +++ b/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; } } } diff --git a/ui/components/component-library/form-text-field/form-text-field.test.js b/ui/components/component-library/form-text-field/form-text-field.test.js index 91f7a42d4062..f9c457d85540 100644 --- a/ui/components/component-library/form-text-field/form-text-field.test.js +++ b/ui/components/component-library/form-text-field/form-text-field.test.js @@ -96,11 +96,14 @@ describe('FormTextField', () => { const { getByText, getByTestId } = render( , ); 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( , ); 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', () => { diff --git a/ui/components/component-library/label/README.mdx b/ui/components/component-library/label/README.mdx index c576688f0039..fc023fabd4a2 100644 --- a/ui/components/component-library/label/README.mdx +++ b/ui/components/component-library/label/README.mdx @@ -82,14 +82,6 @@ import { Label } from '../../component-library'; ; ``` -### Disabled - -Use the `disabled` prop to set the `Label` in disabled state - - - - - ```jsx import { Label } from '../../component-library'; diff --git a/ui/components/component-library/label/label.js b/ui/components/component-library/label/label.js index 63e8621a89f0..1054c6c49e25 100644 --- a/ui/components/component-library/label/label.js +++ b/ui/components/component-library/label/label.js @@ -10,23 +10,14 @@ import { AlignItems, } from '../../../helpers/constants/design-system'; -export const Label = ({ - htmlFor, - required, - disabled, - className, - children, - ...props -}) => ( +export const Label = ({ htmlFor, required, className, children, ...props }) => ( { expect(getByText('label')).toBeDefined(); expect(getByText('*')).toBeDefined(); }); - it('should render with disabled state and have disabled class', () => { - const { getByText } = render(); - expect(getByText('label')).toHaveClass('mm-label--disabled'); - }); });