[Field] Refactor data-field style hook to data-valid/data-invalid

mui · Oct 16, 2024 · d928757 · d928757
1 parent 18256f6
commit d928757
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 43 deletions.
diff --git a/docs/data/components/field/UnstyledFieldAsync.js b/docs/data/components/field/UnstyledFieldAsync.js
@@ -102,12 +102,12 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='invalid']:not([data-pending]) {
+  &[data-invalid]:not([data-pending]) {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
 
-  &[data-field='valid']:not([data-pending]) {
+  &[data-valid]:not([data-pending]) {
     border-color: green;
     background-color: rgb(0 255 0 / 0.1);
   }
@@ -117,12 +117,12 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='invalid']:not([data-pending]) {
+    &[data-invalid]:not([data-pending]) {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }
 
-    &[data-field='valid']:not([data-pending]) {
+    &[data-valid]:not([data-pending]) {
       box-shadow: 0 0 0 3px rgba(100 200 100 / 0.3);
     }
   }

diff --git a/docs/data/components/field/UnstyledFieldAsync.tsx b/docs/data/components/field/UnstyledFieldAsync.tsx
@@ -102,12 +102,12 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='invalid']:not([data-pending]) {
+  &[data-invalid]:not([data-pending]) {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
 
-  &[data-field='valid']:not([data-pending]) {
+  &[data-valid]:not([data-pending]) {
     border-color: green;
     background-color: rgb(0 255 0 / 0.1);
   }
@@ -117,12 +117,12 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='invalid']:not([data-pending]) {
+    &[data-invalid]:not([data-pending]) {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }
 
-    &[data-field='valid']:not([data-pending]) {
+    &[data-valid]:not([data-pending]) {
       box-shadow: 0 0 0 3px rgba(100 200 100 / 0.3);
     }
   }

diff --git a/docs/data/components/field/UnstyledFieldIntroduction/system/index.js b/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
@@ -47,7 +47,7 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='invalid'] {
+  &[data-invalid] {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
@@ -57,7 +57,7 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='invalid'] {
+    &[data-invalid] {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }

diff --git a/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx b/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
@@ -47,7 +47,7 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='invalid'] {
+  &[data-invalid] {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
@@ -57,7 +57,7 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='invalid'] {
+    &[data-invalid] {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }

diff --git a/docs/data/components/field/UnstyledFieldPassword.js b/docs/data/components/field/UnstyledFieldPassword.js
@@ -58,12 +58,12 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='valid'][data-dirty] {
+  &[data-valid][data-dirty] {
     border-color: green;
     background-color: rgb(0 255 0 / 0.1);
   }
 
-  &[data-field='invalid'][data-touched][data-dirty] {
+  &[data-invalid][data-touched][data-dirty] {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
@@ -73,12 +73,12 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='valid'][data-dirty] {
+    &[data-valid][data-dirty] {
       border-color: green;
       box-shadow: 0 0 0 3px rgba(100 200 100 / 0.3);
     }
 
-    &[data-field='invalid'][data-touched][data-dirty] {
+    &[data-invalid][data-touched][data-dirty] {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }

diff --git a/docs/data/components/field/UnstyledFieldPassword.tsx b/docs/data/components/field/UnstyledFieldPassword.tsx
@@ -58,12 +58,12 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='valid'][data-dirty] {
+  &[data-valid][data-dirty] {
     border-color: green;
     background-color: rgb(0 255 0 / 0.1);
   }
 
-  &[data-field='invalid'][data-touched][data-dirty] {
+  &[data-invalid][data-touched][data-dirty] {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
@@ -73,12 +73,12 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='valid'][data-dirty] {
+    &[data-valid][data-dirty] {
       border-color: green;
       box-shadow: 0 0 0 3px rgba(100 200 100 / 0.3);
     }
 
-    &[data-field='invalid'][data-touched][data-dirty] {
+    &[data-invalid][data-touched][data-dirty] {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }

diff --git a/docs/data/components/field/UnstyledFieldServerError.js b/docs/data/components/field/UnstyledFieldServerError.js
@@ -96,7 +96,7 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='invalid'] {
+  &[data-invalid] {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
@@ -106,7 +106,7 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='invalid'] {
+    &[data-invalid] {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }

diff --git a/docs/data/components/field/UnstyledFieldServerError.tsx b/docs/data/components/field/UnstyledFieldServerError.tsx
@@ -98,7 +98,7 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='invalid'] {
+  &[data-invalid] {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
@@ -108,7 +108,7 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='invalid'] {
+    &[data-invalid] {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }

diff --git a/docs/data/components/field/field.mdx b/docs/data/components/field/field.mdx
@@ -220,7 +220,7 @@ The `onChange` validation is debounced by 500ms to avoid firing a network reques
 
 ## Styling
 
-The `[data-field="valid"]` and `[data-field="invalid"]` style hooks determine if the field is invalid or not:
+The `[data-valid]` and `[data-invalid]` style hooks determine if the field is invalid or not:
 
 ```jsx
 <Field.Root>
@@ -229,7 +229,7 @@ The `[data-field="valid"]` and `[data-field="invalid"]` style hooks determine if
 ```
 
 ```css
-.FieldControl[data-field='invalid'] {
+.FieldControl[data-invalid] {
   color: red;
 }
 ```

diff --git a/docs/data/components/form/FormIntroduction/system/index.js b/docs/data/components/form/FormIntroduction/system/index.js
@@ -85,7 +85,7 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='invalid'] {
+  &[data-invalid] {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
@@ -95,7 +95,7 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='invalid'] {
+    &[data-invalid] {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }

diff --git a/docs/data/components/form/FormIntroduction/system/index.tsx b/docs/data/components/form/FormIntroduction/system/index.tsx
@@ -87,7 +87,7 @@ const FieldControl = styled(Field.Control)`
   padding: 6px;
   font-size: 100%;
 
-  &[data-field='invalid'] {
+  &[data-invalid] {
     border-color: red;
     background-color: rgb(255 0 0 / 0.1);
   }
@@ -97,7 +97,7 @@ const FieldControl = styled(Field.Control)`
     border-color: #0078d4;
     box-shadow: 0 0 0 3px rgba(0 100 255 / 0.3);
 
-    &[data-field='invalid'] {
+    &[data-invalid] {
       border-color: red;
       box-shadow: 0 0 0 3px rgba(255 0 0 / 0.3);
     }

diff --git a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
@@ -91,7 +91,7 @@ describe('<Field.Root />', () => {
       });
     });
 
-    it('should apply [data-field] style hooks to field components', () => {
+    it('should apply [data-valid] and [data-invalid] style hooks to field components', () => {
       render(
         <Field.Root>
           <Field.Label data-testid="label">Label</Field.Label>
@@ -106,9 +106,9 @@ describe('<Field.Root />', () => {
       const description = screen.getByTestId('description');
       let error = screen.queryByTestId('error');
 
-      expect(control).not.to.have.attribute('data-field');
-      expect(label).not.to.have.attribute('data-field');
-      expect(description).not.to.have.attribute('data-field');
+      expect(control).not.to.have.attribute('data-valid');
+      expect(label).not.to.have.attribute('data-valid');
+      expect(description).not.to.have.attribute('data-valid');
       expect(error).to.equal(null);
 
       fireEvent.focus(control);
@@ -118,10 +118,10 @@ describe('<Field.Root />', () => {
 
       error = screen.getByTestId('error');
 
-      expect(control).to.have.attribute('data-field', 'invalid');
-      expect(label).to.have.attribute('data-field', 'invalid');
-      expect(description).to.have.attribute('data-field', 'invalid');
-      expect(error).to.have.attribute('data-field', 'invalid');
+      expect(control).to.have.attribute('data-invalid', '');
+      expect(label).to.have.attribute('data-invalid', '');
+      expect(description).to.have.attribute('data-invalid', '');
+      expect(error).to.have.attribute('data-invalid', '');
 
       act(() => {
         control.value = 'value';
@@ -131,9 +131,9 @@ describe('<Field.Root />', () => {
 
       error = screen.queryByTestId('error');
 
-      expect(control).to.have.attribute('data-field', 'valid');
-      expect(label).to.have.attribute('data-field', 'valid');
-      expect(description).to.have.attribute('data-field', 'valid');
+      expect(control).to.have.attribute('data-valid', '');
+      expect(label).to.have.attribute('data-valid', '');
+      expect(description).to.have.attribute('data-valid', '');
       expect(error).to.equal(null);
     });
 
@@ -281,7 +281,7 @@ describe('<Field.Root />', () => {
 
       fireEvent.change(control, { target: { value: 't' } });
 
-      expect(control).to.have.attribute('data-field', 'invalid');
+      expect(control).to.have.attribute('data-invalid', '');
       expect(control).to.have.attribute('aria-invalid', 'true');
     });
   });

diff --git a/packages/mui-base/src/Field/utils/constants.ts b/packages/mui-base/src/Field/utils/constants.ts
@@ -17,8 +17,13 @@ export const STYLE_HOOK_MAPPING = {
     if (value === null) {
       return null;
     }
+    if (value) {
+      return {
+        'data-valid': '',
+      };
+    }
     return {
-      'data-field': value ? 'valid' : 'invalid',
+      'data-invalid': '',
     };
   },
 };