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 6ac45e5bf..b225f0a60 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 c4316f8c1..383c04fbe 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 91f7a42d4..f9c457d85 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 c576688f0..fc023fabd 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 63e8621a8..1054c6c49 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');
- });
});