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] 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"}}