[joy-ui][Button] Fix the text wrap issue (#38696)

mui · Oct 9, 2023 · 2936147 · 2936147
1 parent cacb668
commit 2936147
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
@@ -107,7 +107,7 @@ export const getButtonStyles = ({
         '--Button-gap': '0.375rem',
         minHeight: 'var(--Button-minHeight, 2rem)',
         fontSize: theme.vars.fontSize.sm,
-        paddingBlock: '2px',
+        paddingBlock: '0.25rem',
         paddingInline: '0.75rem',
       }),
       ...(ownerState.size === 'md' && {
@@ -117,7 +117,7 @@ export const getButtonStyles = ({
         '--Button-gap': '0.5rem',
         minHeight: 'var(--Button-minHeight, 2.25rem)', // use min-height instead of height to make the button resilient to its content
         fontSize: theme.vars.fontSize.sm,
-        paddingBlock: '0.25rem', // the padding-block act as a minimum spacing between content and root element
+        paddingBlock: '0.375rem', // the padding-block act as a minimum spacing between content and root element
         paddingInline: '1rem',
       }),
       ...(ownerState.size === 'lg' && {
@@ -127,10 +127,11 @@ export const getButtonStyles = ({
         '--Button-gap': '0.75rem',
         minHeight: 'var(--Button-minHeight, 2.75rem)',
         fontSize: theme.vars.fontSize.md,
-        paddingBlock: '0.375rem',
+        paddingBlock: '0.5rem',
         paddingInline: '1.5rem',
       }),
       WebkitTapHighlightColor: 'transparent',
+      boxSizing: 'border-box',
       borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input
       margin: `var(--Button-margin)`, // to be controlled by other components, e.g. Input
       border: 'none',
@@ -143,7 +144,7 @@ export const getButtonStyles = ({
       textDecoration: 'none', // prevent user agent underline when used as anchor
       fontFamily: theme.vars.fontFamily.body,
       fontWeight: theme.vars.fontWeight.lg,
-      lineHeight: 1,
+      lineHeight: theme.vars.lineHeight.md,
       ...(ownerState.fullWidth && {
         width: '100%',
       }),