From 5d7db89791bc9bad209cac3758c5636163563697 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 12 Dec 2024 14:43:00 +0700
Subject: [PATCH 1/3] add demo

---
 .../text-fields/InputSuffixShrink.js          | 104 ++++++++++++++++++
 .../text-fields/InputSuffixShrink.tsx         | 104 ++++++++++++++++++
 .../components/text-fields/text-fields.md     |   6 +
 3 files changed, 214 insertions(+)
 create mode 100644 docs/data/material/components/text-fields/InputSuffixShrink.js
 create mode 100644 docs/data/material/components/text-fields/InputSuffixShrink.tsx

diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.js b/docs/data/material/components/text-fields/InputSuffixShrink.js
new file mode 100644
index 00000000000000..55deadd48cb9fd
--- /dev/null
+++ b/docs/data/material/components/text-fields/InputSuffixShrink.js
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { filledInputClasses } from '@mui/material/FilledInput';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+
+export default function InputSuffixShrink() {
+  return (
+    <Box
+      component="form"
+      sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
+      noValidate
+      autoComplete="off"
+    >
+      <TextField
+        id="outlined-basic"
+        label="Outlined"
+        variant="outlined"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  opacity: 0,
+                  marginBottom: '5px',
+                  pointerEvents: 'none',
+                  [`.${outlinedInputClasses.root} &`]: {
+                    marginBottom: '16px',
+                  },
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                lbs
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <TextField
+        id="filled-basic"
+        label="Filled"
+        variant="filled"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  opacity: 0,
+                  marginBottom: '5px',
+                  pointerEvents: 'none',
+                  [`.${filledInputClasses.root} &`]: {
+                    marginBottom: '8px',
+                  },
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                days
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <TextField
+        id="standard-basic"
+        label="Standard"
+        variant="standard"
+        slotProps={{
+          htmlInput: {
+            sx: { textAlign: 'right' },
+          },
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  margin: 0,
+                  marginBottom: '5px',
+                  opacity: 0,
+                  pointerEvents: 'none',
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                @gmail.com
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.tsx b/docs/data/material/components/text-fields/InputSuffixShrink.tsx
new file mode 100644
index 00000000000000..55deadd48cb9fd
--- /dev/null
+++ b/docs/data/material/components/text-fields/InputSuffixShrink.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { filledInputClasses } from '@mui/material/FilledInput';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+
+export default function InputSuffixShrink() {
+  return (
+    <Box
+      component="form"
+      sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
+      noValidate
+      autoComplete="off"
+    >
+      <TextField
+        id="outlined-basic"
+        label="Outlined"
+        variant="outlined"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  opacity: 0,
+                  marginBottom: '5px',
+                  pointerEvents: 'none',
+                  [`.${outlinedInputClasses.root} &`]: {
+                    marginBottom: '16px',
+                  },
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                lbs
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <TextField
+        id="filled-basic"
+        label="Filled"
+        variant="filled"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  opacity: 0,
+                  marginBottom: '5px',
+                  pointerEvents: 'none',
+                  [`.${filledInputClasses.root} &`]: {
+                    marginBottom: '8px',
+                  },
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                days
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <TextField
+        id="standard-basic"
+        label="Standard"
+        variant="standard"
+        slotProps={{
+          htmlInput: {
+            sx: { textAlign: 'right' },
+          },
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  margin: 0,
+                  marginBottom: '5px',
+                  opacity: 0,
+                  pointerEvents: 'none',
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                @gmail.com
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md
index 8142a867b4b700..9e4ff9c18ddebf 100644
--- a/docs/data/material/components/text-fields/text-fields.md
+++ b/docs/data/material/components/text-fields/text-fields.md
@@ -70,6 +70,12 @@ For instance, you can use an icon button to hide or reveal the password.
 
 {{"demo": "InputAdornments.js"}}
 
+### Visible on shrink
+
+Use the `sx` prop to control the suffix's opacity based on the shrink attribute. The suffix will be visible when the label is shrunk.
+
+{{"demo": "InputSuffixShrink.js"}}
+
 ## Sizes
 
 Fancy smaller inputs? Use the `size` prop.

From f75bdba1ac4f1745e2f3a81995e8ce204d63aa29 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 13 Dec 2024 16:16:26 +0700
Subject: [PATCH 2/3] apply suggestion

---
 .../material/components/text-fields/InputSuffixShrink.js    | 6 +++---
 .../material/components/text-fields/InputSuffixShrink.tsx   | 6 +++---
 docs/data/material/components/text-fields/text-fields.md    | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.js b/docs/data/material/components/text-fields/InputSuffixShrink.js
index 55deadd48cb9fd..27900a62206426 100644
--- a/docs/data/material/components/text-fields/InputSuffixShrink.js
+++ b/docs/data/material/components/text-fields/InputSuffixShrink.js
@@ -15,7 +15,7 @@ export default function InputSuffixShrink() {
       autoComplete="off"
     >
       <TextField
-        id="outlined-basic"
+        id="outlined-suffix-shrink"
         label="Outlined"
         variant="outlined"
         slotProps={{
@@ -43,7 +43,7 @@ export default function InputSuffixShrink() {
         }}
       />
       <TextField
-        id="filled-basic"
+        id="filled-suffix-shrink"
         label="Filled"
         variant="filled"
         slotProps={{
@@ -71,7 +71,7 @@ export default function InputSuffixShrink() {
         }}
       />
       <TextField
-        id="standard-basic"
+        id="standard-suffix-shrink"
         label="Standard"
         variant="standard"
         slotProps={{
diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.tsx b/docs/data/material/components/text-fields/InputSuffixShrink.tsx
index 55deadd48cb9fd..27900a62206426 100644
--- a/docs/data/material/components/text-fields/InputSuffixShrink.tsx
+++ b/docs/data/material/components/text-fields/InputSuffixShrink.tsx
@@ -15,7 +15,7 @@ export default function InputSuffixShrink() {
       autoComplete="off"
     >
       <TextField
-        id="outlined-basic"
+        id="outlined-suffix-shrink"
         label="Outlined"
         variant="outlined"
         slotProps={{
@@ -43,7 +43,7 @@ export default function InputSuffixShrink() {
         }}
       />
       <TextField
-        id="filled-basic"
+        id="filled-suffix-shrink"
         label="Filled"
         variant="filled"
         slotProps={{
@@ -71,7 +71,7 @@ export default function InputSuffixShrink() {
         }}
       />
       <TextField
-        id="standard-basic"
+        id="standard-suffix-shrink"
         label="Standard"
         variant="standard"
         slotProps={{
diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md
index 9e4ff9c18ddebf..fe7e1df897b849 100644
--- a/docs/data/material/components/text-fields/text-fields.md
+++ b/docs/data/material/components/text-fields/text-fields.md
@@ -72,7 +72,7 @@ For instance, you can use an icon button to hide or reveal the password.
 
 ### Visible on shrink
 
-Use the `sx` prop to control the suffix's opacity based on the shrink attribute. The suffix will be visible when the label is shrunk.
+By customizing the suffix's opacity based on the shrink attribute, the suffix is visible when the label is shrunk.
 
 {{"demo": "InputSuffixShrink.js"}}
 

From 805bd6a12dc93073ed4f883629deb135f4930918 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 16 Dec 2024 17:10:11 +0700
Subject: [PATCH 3/3] fix as suggested

---
 .../material/components/text-fields/InputSuffixShrink.js | 9 +--------
 .../components/text-fields/InputSuffixShrink.tsx         | 9 +--------
 docs/data/material/components/text-fields/text-fields.md | 5 +++--
 3 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.js b/docs/data/material/components/text-fields/InputSuffixShrink.js
index 27900a62206426..6cdb5887c0aae2 100644
--- a/docs/data/material/components/text-fields/InputSuffixShrink.js
+++ b/docs/data/material/components/text-fields/InputSuffixShrink.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { filledInputClasses } from '@mui/material/FilledInput';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import TextField from '@mui/material/TextField';
@@ -24,13 +23,8 @@ export default function InputSuffixShrink() {
               <InputAdornment
                 position="end"
                 sx={{
-                  alignSelf: 'flex-end',
                   opacity: 0,
-                  marginBottom: '5px',
                   pointerEvents: 'none',
-                  [`.${outlinedInputClasses.root} &`]: {
-                    marginBottom: '16px',
-                  },
                   [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
                     opacity: 1,
                   },
@@ -54,10 +48,9 @@ export default function InputSuffixShrink() {
                 sx={{
                   alignSelf: 'flex-end',
                   opacity: 0,
-                  marginBottom: '5px',
                   pointerEvents: 'none',
                   [`.${filledInputClasses.root} &`]: {
-                    marginBottom: '8px',
+                    marginBottom: '7.5px',
                   },
                   [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
                     opacity: 1,
diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.tsx b/docs/data/material/components/text-fields/InputSuffixShrink.tsx
index 27900a62206426..6cdb5887c0aae2 100644
--- a/docs/data/material/components/text-fields/InputSuffixShrink.tsx
+++ b/docs/data/material/components/text-fields/InputSuffixShrink.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { filledInputClasses } from '@mui/material/FilledInput';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import TextField from '@mui/material/TextField';
@@ -24,13 +23,8 @@ export default function InputSuffixShrink() {
               <InputAdornment
                 position="end"
                 sx={{
-                  alignSelf: 'flex-end',
                   opacity: 0,
-                  marginBottom: '5px',
                   pointerEvents: 'none',
-                  [`.${outlinedInputClasses.root} &`]: {
-                    marginBottom: '16px',
-                  },
                   [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
                     opacity: 1,
                   },
@@ -54,10 +48,9 @@ export default function InputSuffixShrink() {
                 sx={{
                   alignSelf: 'flex-end',
                   opacity: 0,
-                  marginBottom: '5px',
                   pointerEvents: 'none',
                   [`.${filledInputClasses.root} &`]: {
-                    marginBottom: '8px',
+                    marginBottom: '7.5px',
                   },
                   [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
                     opacity: 1,
diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md
index fe7e1df897b849..74205facd6ae01 100644
--- a/docs/data/material/components/text-fields/text-fields.md
+++ b/docs/data/material/components/text-fields/text-fields.md
@@ -70,9 +70,10 @@ For instance, you can use an icon button to hide or reveal the password.
 
 {{"demo": "InputAdornments.js"}}
 
-### Visible on shrink
+#### Customizing adornments
 
-By customizing the suffix's opacity based on the shrink attribute, the suffix is visible when the label is shrunk.
+You can apply custom styles to adornments, and trigger changes to one based on attributes from another.
+For example, the demo below uses the label's `[data-shrink=true]` attribute to make the suffix visible (via opacity) when the label is in its shrunken state.
 
 {{"demo": "InputSuffixShrink.js"}}