add test case

mui · May 8, 2024 · a74419e · a74419e
1 parent 306d703
commit a74419e
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 0 deletions.
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.input.js
@@ -7,3 +7,38 @@ const NotchedOutlineRoot = styled('fieldset', {
 })({
   borderColor: 'red',
 });
+
+const OutlinedInputInput = styled('input', {
+  name: 'MuiOutlinedInput',
+  slot: 'Input',
+})({
+  padding: '16.5px 14px',
+  variants: [
+    {
+      props: {
+        size: 'small',
+      },
+      style: {
+        padding: '8.5px 14px',
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.multiline,
+      style: {
+        padding: 0,
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.startAdornment,
+      style: {
+        paddingLeft: 0,
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.endAdornment,
+      style: {
+        paddingRight: 0,
+      },
+    },
+  ],
+});
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.css
@@ -4,3 +4,23 @@
 .njazm0b-1 {
   border: none;
 }
+.o8d5r3t {
+  padding: 16.5px 14px;
+}
+
+/* this style should be last */
+.o8d5r3t-1 {
+  padding-left: 10px;
+}
+.o8d5r3t-2 {
+  padding: 8.5px 14px;
+}
+.o8d5r3t-3 {
+  padding: 0;
+}
+.o8d5r3t-4 {
+  padding-left: 0;
+}
+.o8d5r3t-5 {
+  padding-right: 0;
+}
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.js
@@ -1,3 +1,5 @@
+import { styled as _styled2 } from '@pigment-css/react';
+import _theme2 from '@pigment-css/react/theme';
 import { styled as _styled } from '@pigment-css/react';
 import _theme from '@pigment-css/react/theme';
 const NotchedOutlineRoot = /*#__PURE__*/ _styled('fieldset', {
@@ -7,3 +9,29 @@ const NotchedOutlineRoot = /*#__PURE__*/ _styled('fieldset', {
 })({
   classes: ['njazm0b', 'njazm0b-1'],
 });
+const OutlinedInputInput = /*#__PURE__*/ _styled2('input', {
+  name: 'MuiOutlinedInput',
+  slot: 'Input',
+})({
+  classes: ['o8d5r3t', 'o8d5r3t-1'],
+  variants: [
+    {
+      props: {
+        size: 'small',
+      },
+      className: 'o8d5r3t-2',
+    },
+    {
+      props: ({ ownerState }) => ownerState.multiline,
+      className: 'o8d5r3t-3',
+    },
+    {
+      props: ({ ownerState }) => ownerState.startAdornment,
+      className: 'o8d5r3t-4',
+    },
+    {
+      props: ({ ownerState }) => ownerState.endAdornment,
+      className: 'o8d5r3t-5',
+    },
+  ],
+});
diff --git a/packages/pigment-css-react/tests/styled/styled.test.tsx b/packages/pigment-css-react/tests/styled/styled.test.tsx
@@ -94,6 +94,9 @@ describe('Pigment CSS - styled', () => {
                   notchedOutline: {
                     border: 'none',
                   },
+                  input: {
+                    paddingLeft: 10,
+                  },
                 },
               },
             },