[joy-ui][Button] Fix button size being a decorator (#39529)

mui · Oct 23, 2023 · 1fd4dff · 1fd4dff
1 parent baf6bc7
commit 1fd4dff
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 55 deletions.
diff --git a/docs/data/joy/components/input/InputDecorators.js b/docs/data/joy/components/input/InputDecorators.js
@@ -1,36 +1,50 @@
 import * as React from 'react';
+import Button from '@mui/joy/Button';
 import Divider from '@mui/joy/Divider';
 import Input from '@mui/joy/Input';
 import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
+import Stack from '@mui/joy/Stack';
+import LocationOn from '@mui/icons-material/LocationOn';
 
 export default function InputDecorators() {
   const [currency, setCurrency] = React.useState('dollar');
   return (
-    <Input
-      placeholder="Amount"
-      startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
-      endDecorator={
-        <React.Fragment>
-          <Divider orientation="vertical" />
-          <Select
-            variant="plain"
-            value={currency}
-            onChange={(_, value) => setCurrency(value)}
-            slotProps={{
-              listbox: {
-                variant: 'outlined',
-              },
-            }}
-            sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
-          >
-            <Option value="dollar">US dollar</Option>
-            <Option value="baht">Thai baht</Option>
-            <Option value="yen">Japanese yen</Option>
-          </Select>
-        </React.Fragment>
-      }
-      sx={{ width: 300 }}
-    />
+    <Stack spacing={1.5}>
+      <Input
+        placeholder="Amount"
+        startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
+        endDecorator={
+          <React.Fragment>
+            <Divider orientation="vertical" />
+            <Select
+              variant="plain"
+              value={currency}
+              onChange={(_, value) => setCurrency(value)}
+              slotProps={{
+                listbox: {
+                  variant: 'outlined',
+                },
+              }}
+              sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
+            >
+              <Option value="dollar">US dollar</Option>
+              <Option value="baht">Thai baht</Option>
+              <Option value="yen">Japanese yen</Option>
+            </Select>
+          </React.Fragment>
+        }
+        sx={{ width: 300 }}
+      />
+      <Input
+        placeholder="Your location"
+        startDecorator={
+          <Button variant="soft" color="neutral" startDecorator={<LocationOn />}>
+            Locate
+          </Button>
+        }
+        sx={{ width: 300 }}
+      />
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/input/InputDecorators.tsx b/docs/data/joy/components/input/InputDecorators.tsx
@@ -1,36 +1,50 @@
 import * as React from 'react';
+import Button from '@mui/joy/Button';
 import Divider from '@mui/joy/Divider';
 import Input from '@mui/joy/Input';
 import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
+import Stack from '@mui/joy/Stack';
+import LocationOn from '@mui/icons-material/LocationOn';
 
 export default function InputDecorators() {
   const [currency, setCurrency] = React.useState('dollar');
   return (
-    <Input
-      placeholder="Amount"
-      startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
-      endDecorator={
-        <React.Fragment>
-          <Divider orientation="vertical" />
-          <Select
-            variant="plain"
-            value={currency}
-            onChange={(_, value) => setCurrency(value!)}
-            slotProps={{
-              listbox: {
-                variant: 'outlined',
-              },
-            }}
-            sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
-          >
-            <Option value="dollar">US dollar</Option>
-            <Option value="baht">Thai baht</Option>
-            <Option value="yen">Japanese yen</Option>
-          </Select>
-        </React.Fragment>
-      }
-      sx={{ width: 300 }}
-    />
+    <Stack spacing={1.5}>
+      <Input
+        placeholder="Amount"
+        startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
+        endDecorator={
+          <React.Fragment>
+            <Divider orientation="vertical" />
+            <Select
+              variant="plain"
+              value={currency}
+              onChange={(_, value) => setCurrency(value!)}
+              slotProps={{
+                listbox: {
+                  variant: 'outlined',
+                },
+              }}
+              sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
+            >
+              <Option value="dollar">US dollar</Option>
+              <Option value="baht">Thai baht</Option>
+              <Option value="yen">Japanese yen</Option>
+            </Select>
+          </React.Fragment>
+        }
+        sx={{ width: 300 }}
+      />
+      <Input
+        placeholder="Your location"
+        startDecorator={
+          <Button variant="soft" color="neutral" startDecorator={<LocationOn />}>
+            Locate
+          </Button>
+        }
+        sx={{ width: 300 }}
+      />
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/textarea/TextareaDecorators.js b/docs/data/joy/components/textarea/TextareaDecorators.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
 import IconButton from '@mui/joy/IconButton';
 import Textarea from '@mui/joy/Textarea';
 import Typography from '@mui/joy/Typography';
@@ -15,7 +16,7 @@ export default function TextareaDecorators() {
       minRows={2}
       maxRows={4}
       startDecorator={
-        <Box sx={{ display: 'flex', gap: 0.5 }}>
+        <Box sx={{ display: 'flex', gap: 0.5, flex: 1 }}>
           <IconButton variant="outlined" color="neutral" onClick={addEmoji('👍')}>
             👍
           </IconButton>
@@ -25,6 +26,9 @@ export default function TextareaDecorators() {
           <IconButton variant="outlined" color="neutral" onClick={addEmoji('😍')}>
             😍
           </IconButton>
+          <Button variant="outlined" color="neutral" sx={{ ml: 'auto' }}>
+            See all
+          </Button>
         </Box>
       }
       endDecorator={

diff --git a/docs/data/joy/components/textarea/TextareaDecorators.tsx b/docs/data/joy/components/textarea/TextareaDecorators.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
 import IconButton from '@mui/joy/IconButton';
 import Textarea from '@mui/joy/Textarea';
 import Typography from '@mui/joy/Typography';
@@ -15,7 +16,7 @@ export default function TextareaDecorators() {
       minRows={2}
       maxRows={4}
       startDecorator={
-        <Box sx={{ display: 'flex', gap: 0.5 }}>
+        <Box sx={{ display: 'flex', gap: 0.5, flex: 1 }}>
           <IconButton variant="outlined" color="neutral" onClick={addEmoji('👍')}>
             👍
           </IconButton>
@@ -25,6 +26,9 @@ export default function TextareaDecorators() {
           <IconButton variant="outlined" color="neutral" onClick={addEmoji('😍')}>
             😍
           </IconButton>
+          <Button variant="outlined" color="neutral" sx={{ ml: 'auto' }}>
+            See all
+          </Button>
         </Box>
       }
       endDecorator={

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: '0.25rem',
+        paddingBlock: 'var(--Button-paddingBlock, 0.25rem)',
         paddingInline: '0.75rem',
       }),
       ...(ownerState.size === 'md' && {
@@ -117,7 +117,8 @@ 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.375rem', // the padding-block act as a minimum spacing between content and root element
+        // internal --Button-paddingBlock is used to control the padding-block of the button from the outside, e.g. as a decorator of an Input
+        paddingBlock: 'var(--Button-paddingBlock, 0.375rem)', // the padding-block act as a minimum spacing between content and root element
         paddingInline: '1rem',
       }),
       ...(ownerState.size === 'lg' && {
@@ -127,7 +128,7 @@ export const getButtonStyles = ({
         '--Button-gap': '0.75rem',
         minHeight: 'var(--Button-minHeight, 2.75rem)',
         fontSize: theme.vars.fontSize.md,
-        paddingBlock: '0.5rem',
+        paddingBlock: 'var(--Button-paddingBlock, 0.5rem)',
         paddingInline: '1.5rem',
       }),
       WebkitTapHighlightColor: 'transparent',

diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
@@ -81,6 +81,7 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
         '--Input-decoratorChildRadius':
           'max(var(--Input-radius) - var(--variant-borderWidth, 0px) - var(--_Input-paddingBlock), min(var(--_Input-paddingBlock) + var(--variant-borderWidth, 0px), var(--Input-radius) / 2))',
         '--Button-minHeight': 'var(--Input-decoratorChildHeight)',
+        '--Button-paddingBlock': '0px', // to ensure that the height of the button is equal to --Button-minHeight
         '--IconButton-size': 'var(--Input-decoratorChildHeight)',
         '--Button-radius': 'var(--Input-decoratorChildRadius)',
         '--IconButton-radius': 'var(--Input-decoratorChildRadius)',

diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
@@ -121,6 +121,7 @@ const SelectRoot = styled('div', {
       '--Select-decoratorChildRadius':
         'max(var(--Select-radius) - var(--variant-borderWidth, 0px) - var(--_Select-paddingBlock), min(var(--_Select-paddingBlock) + var(--variant-borderWidth, 0px), var(--Select-radius) / 2))',
       '--Button-minHeight': 'var(--Select-decoratorChildHeight)',
+      '--Button-paddingBlock': '0px', // to ensure that the height of the button is equal to --Button-minHeight
       '--IconButton-size': 'var(--Select-decoratorChildHeight)',
       '--Button-radius': 'var(--Select-decoratorChildRadius)',
       '--IconButton-radius': 'var(--Select-decoratorChildRadius)',

diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -85,6 +85,7 @@ const TextareaRoot = styled('div', {
       '--Textarea-decoratorChildRadius':
         'max(var(--Textarea-radius) - var(--variant-borderWidth, 0px) - var(--_Textarea-paddingBlock), min(var(--_Textarea-paddingBlock) + var(--variant-borderWidth, 0px), var(--Textarea-radius) / 2))',
       '--Button-minHeight': 'var(--Textarea-decoratorChildHeight)',
+      '--Button-paddingBlock': '0px', // to ensure that the height of the button is equal to --Button-minHeight
       '--IconButton-size': 'var(--Textarea-decoratorChildHeight)',
       '--Button-radius': 'var(--Textarea-decoratorChildRadius)',
       '--IconButton-radius': 'var(--Textarea-decoratorChildRadius)',