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');
- });
});