fix as suggested

mui · Dec 16, 2024 · 805bd6a · 805bd6a
1 parent 161d96c
commit 805bd6a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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"}}