From 22eb6c1a9e669f93ce1672908bae59e10f79cb63 Mon Sep 17 00:00:00 2001 From: zanivan Date: Fri, 11 Aug 2023 14:50:19 -0300 Subject: [PATCH 01/23] Changed card boxShadow --- packages/mui-joy/src/Card/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index ec05cc6cacbb93..9dece1ddf57969 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -81,7 +81,7 @@ const CardRoot = styled('div', { }), padding: 'var(--Card-padding)', borderRadius: 'var(--Card-radius)', - boxShadow: theme.shadow.sm, + boxShadow: theme.shadow.md, backgroundColor: theme.vars.palette.background.surface, position: 'relative', display: 'flex', From 2f415c304171168c4f1cde1d2fc587e29aee0502 Mon Sep 17 00:00:00 2001 From: zanivan Date: Fri, 11 Aug 2023 14:51:36 -0300 Subject: [PATCH 02/23] Removed alert boxShadow --- packages/mui-joy/src/Alert/Alert.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx index e41e4f121e70da..f4b5e617f6ce70 100644 --- a/packages/mui-joy/src/Alert/Alert.tsx +++ b/packages/mui-joy/src/Alert/Alert.tsx @@ -74,7 +74,7 @@ const AlertRoot = styled('div', { alignItems: 'center', padding: `var(--Alert-padding)`, borderRadius: 'var(--Alert-radius)', - boxShadow: theme.vars.shadow.xs, + boxShadow: 'none', ...theme.typography[`body-${({ sm: 'xs', md: 'sm', lg: 'md' } as const)[ownerState.size!]}`], fontWeight: theme.vars.fontWeight.md, ...theme.variants[ownerState.variant!]?.[ownerState.color!], From a9151440cd0626143f72a953009caa8c039b17d7 Mon Sep 17 00:00:00 2001 From: zanivan Date: Fri, 11 Aug 2023 14:54:38 -0300 Subject: [PATCH 03/23] Added boxShadow to input --- packages/mui-joy/src/Input/Input.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx index 3904b5470d34cf..b75206c4d48192 100644 --- a/packages/mui-joy/src/Input/Input.tsx +++ b/packages/mui-joy/src/Input/Input.tsx @@ -94,6 +94,7 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>( display: 'flex', paddingInline: `var(--Input-paddingInline)`, borderRadius: 'var(--Input-radius)', + boxShadow: theme.vars.shadow.xs, ...theme.typography[`body-${ownerState.size!}`], ...variantStyle, backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface, From 9a0ae2d1b90946a40021fdfd944f6df72710345f Mon Sep 17 00:00:00 2001 From: zanivan Date: Fri, 11 Aug 2023 14:56:40 -0300 Subject: [PATCH 04/23] Set outlined card as default --- packages/mui-joy/src/Card/Card.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index 9dece1ddf57969..14cb4c7338bcf5 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -81,7 +81,7 @@ const CardRoot = styled('div', { }), padding: 'var(--Card-padding)', borderRadius: 'var(--Card-radius)', - boxShadow: theme.shadow.md, + boxShadow: theme.shadow.xs, backgroundColor: theme.vars.palette.background.surface, position: 'relative', display: 'flex', @@ -120,7 +120,7 @@ const Card = React.forwardRef(function Card(inProps, ref) { component = 'div', invertedColors = false, size = 'md', - variant = 'plain', + variant = 'outlined', children, orientation = 'vertical', slots = {}, From cf79b38b5c697b554437f4061c48248651c940c5 Mon Sep 17 00:00:00 2001 From: zanivan Date: Fri, 11 Aug 2023 15:02:59 -0300 Subject: [PATCH 05/23] Changed alert default to soft --- packages/mui-joy/src/Alert/Alert.tsx | 2 +- packages/mui-joy/src/Alert/AlertProps.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx index f4b5e617f6ce70..59da7ef81d9d78 100644 --- a/packages/mui-joy/src/Alert/Alert.tsx +++ b/packages/mui-joy/src/Alert/Alert.tsx @@ -277,7 +277,7 @@ Alert.propTypes /* remove-proptypes */ = { ]), /** * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use. - * @default 'outlined' + * @default 'soft' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']), diff --git a/packages/mui-joy/src/Alert/AlertProps.ts b/packages/mui-joy/src/Alert/AlertProps.ts index b79749d972e662..8c1364e478f602 100644 --- a/packages/mui-joy/src/Alert/AlertProps.ts +++ b/packages/mui-joy/src/Alert/AlertProps.ts @@ -73,7 +73,7 @@ export interface AlertTypeMap

{ sx?: SxProps; /** * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use. - * @default 'outlined' + * @default 'soft' */ variant?: OverridableStringUnion; }; From 836ed53630c179ee1d31b97566f9e5fe0f122026 Mon Sep 17 00:00:00 2001 From: zanivan Date: Fri, 11 Aug 2023 15:19:11 -0300 Subject: [PATCH 06/23] Update Alert.tsx --- packages/mui-joy/src/Alert/Alert.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx index 59da7ef81d9d78..14ae0f47817f07 100644 --- a/packages/mui-joy/src/Alert/Alert.tsx +++ b/packages/mui-joy/src/Alert/Alert.tsx @@ -128,7 +128,7 @@ const Alert = React.forwardRef(function Alert(inProps, ref) { color: colorProp = 'neutral', invertedColors = false, role = 'alert', - variant = 'outlined', + variant = 'soft', size = 'md', startDecorator, endDecorator, From 6eba5de9557dd162812cd614eff97fc1d8aea631 Mon Sep 17 00:00:00 2001 From: zanivan Date: Mon, 14 Aug 2023 14:49:50 -0300 Subject: [PATCH 07/23] Updated Alert demos --- docs/data/joy/components/alert/AlertUsage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/joy/components/alert/AlertUsage.js b/docs/data/joy/components/alert/AlertUsage.js index 4df19557f68e39..eb33a6de54663a 100644 --- a/docs/data/joy/components/alert/AlertUsage.js +++ b/docs/data/joy/components/alert/AlertUsage.js @@ -10,7 +10,7 @@ export default function AlertUsage() { { propName: 'variant', knob: 'radio', - defaultValue: 'outlined', + defaultValue: 'soft', options: ['plain', 'outlined', 'soft', 'solid'], }, { From 633c412682459f8f1a00769feb964525ec9051fd Mon Sep 17 00:00:00 2001 From: zanivan Date: Mon, 14 Aug 2023 14:55:28 -0300 Subject: [PATCH 08/23] Updated Card demos --- docs/data/joy/components/card/BasicCard.tsx | 2 +- docs/data/joy/components/card/CardUsage.js | 4 ++-- docs/data/joy/components/card/CardVariants.tsx | 6 +++--- docs/data/joy/components/card/DribbbleShot.tsx | 1 + docs/data/joy/components/card/card.md | 2 +- 5 files changed, 8 insertions(+), 7 deletions(-) diff --git a/docs/data/joy/components/card/BasicCard.tsx b/docs/data/joy/components/card/BasicCard.tsx index a7ff812c6b4fbd..c4b3aee4a9f9fc 100644 --- a/docs/data/joy/components/card/BasicCard.tsx +++ b/docs/data/joy/components/card/BasicCard.tsx @@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined'; export default function BasicCard() { return ( - +

Yosemite National Park April 24 to May 02, 2021 diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js index dc8bd35863185e..613d81a6dff176 100644 --- a/docs/data/joy/components/card/CardUsage.js +++ b/docs/data/joy/components/card/CardUsage.js @@ -13,8 +13,8 @@ export default function CardUsage() { data={[ { propName: 'variant', - knob: 'select', - defaultValue: 'plain', + knob: 'radio', + defaultValue: 'outlined', options: ['plain', 'outlined', 'soft', 'solid'], }, { diff --git a/docs/data/joy/components/card/CardVariants.tsx b/docs/data/joy/components/card/CardVariants.tsx index 7c6ff6f75257bf..bcd703f82efde8 100644 --- a/docs/data/joy/components/card/CardVariants.tsx +++ b/docs/data/joy/components/card/CardVariants.tsx @@ -15,16 +15,16 @@ export default function CardVariants() { gap: 2, }} > - + - Plain card (default) + Plain card Description of the card. - Outlined card + Outlined card (default) Description of the card. diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx index 183c013ecb5c2e..0f9c1fde01a1c1 100644 --- a/docs/data/joy/components/card/DribbbleShot.tsx +++ b/docs/data/joy/components/card/DribbbleShot.tsx @@ -15,6 +15,7 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder'; export default function DribbbleShot() { return ( Date: Mon, 14 Aug 2023 14:57:59 -0300 Subject: [PATCH 09/23] Run yarn docs:typescript:formatted --- docs/data/joy/components/card/BasicCard.js | 2 +- docs/data/joy/components/card/CardVariants.js | 6 +++--- docs/data/joy/components/card/DribbbleShot.js | 1 + 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/data/joy/components/card/BasicCard.js b/docs/data/joy/components/card/BasicCard.js index a7ff812c6b4fbd..c4b3aee4a9f9fc 100644 --- a/docs/data/joy/components/card/BasicCard.js +++ b/docs/data/joy/components/card/BasicCard.js @@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined'; export default function BasicCard() { return ( - +
Yosemite National Park April 24 to May 02, 2021 diff --git a/docs/data/joy/components/card/CardVariants.js b/docs/data/joy/components/card/CardVariants.js index 7c6ff6f75257bf..bcd703f82efde8 100644 --- a/docs/data/joy/components/card/CardVariants.js +++ b/docs/data/joy/components/card/CardVariants.js @@ -15,16 +15,16 @@ export default function CardVariants() { gap: 2, }} > - + - Plain card (default) + Plain card Description of the card. - Outlined card + Outlined card (default) Description of the card. diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js index 183c013ecb5c2e..0f9c1fde01a1c1 100644 --- a/docs/data/joy/components/card/DribbbleShot.js +++ b/docs/data/joy/components/card/DribbbleShot.js @@ -15,6 +15,7 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder'; export default function DribbbleShot() { return ( Date: Tue, 15 Aug 2023 10:59:35 -0300 Subject: [PATCH 10/23] Remove Alert boxShadow Co-authored-by: Siriwat K Signed-off-by: Victor Zanivan Monteiro --- packages/mui-joy/src/Alert/Alert.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx index 14ae0f47817f07..ae19e140577ce0 100644 --- a/packages/mui-joy/src/Alert/Alert.tsx +++ b/packages/mui-joy/src/Alert/Alert.tsx @@ -74,7 +74,6 @@ const AlertRoot = styled('div', { alignItems: 'center', padding: `var(--Alert-padding)`, borderRadius: 'var(--Alert-radius)', - boxShadow: 'none', ...theme.typography[`body-${({ sm: 'xs', md: 'sm', lg: 'md' } as const)[ownerState.size!]}`], fontWeight: theme.vars.fontWeight.md, ...theme.variants[ownerState.variant!]?.[ownerState.color!], From 8b662ba1fe71505182fc91e2b41194b04e250669 Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Tue, 15 Aug 2023 11:00:34 -0300 Subject: [PATCH 11/23] Fix shadow on Input Co-authored-by: Siriwat K Signed-off-by: Victor Zanivan Monteiro --- packages/mui-joy/src/Input/Input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx index b75206c4d48192..32a831ba03d917 100644 --- a/packages/mui-joy/src/Input/Input.tsx +++ b/packages/mui-joy/src/Input/Input.tsx @@ -94,7 +94,7 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>( display: 'flex', paddingInline: `var(--Input-paddingInline)`, borderRadius: 'var(--Input-radius)', - boxShadow: theme.vars.shadow.xs, + boxShadow: theme.shadow.xs, ...theme.typography[`body-${ownerState.size!}`], ...variantStyle, backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface, From 3a3d7605daa3132e33881a0fc3a94c8498d0a041 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 15 Aug 2023 11:26:30 -0300 Subject: [PATCH 12/23] Update Alert.test.tsx --- packages/mui-joy/src/Alert/Alert.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/Alert/Alert.test.tsx b/packages/mui-joy/src/Alert/Alert.test.tsx index 0ccb30dd20c302..8edc33de165dd9 100644 --- a/packages/mui-joy/src/Alert/Alert.test.tsx +++ b/packages/mui-joy/src/Alert/Alert.test.tsx @@ -32,10 +32,10 @@ describe('', () => { it('soft by default', () => { const { getByRole } = render(); - expect(getByRole('alert')).to.have.class(classes.variantOutlined); + expect(getByRole('alert')).to.have.class(classes.variantSoft); }); - (['plain', 'soft', 'solid'] as const).forEach((variant) => { + (['plain', 'outlined', 'solid'] as const).forEach((variant) => { it(`should render ${variant}`, () => { const { getByRole } = render(); From 669242c155b1b624fcd908d71638ce0a14bebbc5 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 15 Aug 2023 11:28:02 -0300 Subject: [PATCH 13/23] Update Card.test.tsx --- packages/mui-joy/src/Card/Card.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/Card/Card.test.tsx b/packages/mui-joy/src/Card/Card.test.tsx index a291aeaf112e93..ae773620f6869e 100644 --- a/packages/mui-joy/src/Card/Card.test.tsx +++ b/packages/mui-joy/src/Card/Card.test.tsx @@ -29,10 +29,10 @@ describe('', () => { describeJoyColorInversion(, { muiName: 'JoyCard', classes }); describe('prop: variant', () => { - it('plain by default', () => { + it('outlined by default', () => { const { getByTestId } = render(Hello World); - expect(getByTestId('root')).to.have.class(classes.variantPlain); + expect(getByTestId('root')).to.have.class(classes.variantOutlined); }); (['plain', 'outlined', 'soft', 'solid'] as const).forEach((variant) => { From 034a2ab4e00605e55dbeb90b5849b50ad1d16c97 Mon Sep 17 00:00:00 2001 From: zanivan Date: Wed, 16 Aug 2023 13:11:57 -0300 Subject: [PATCH 14/23] Run yarn docs:api --- docs/pages/base-ui/api/number-input.json | 7 +- docs/pages/base-ui/api/use-modal.json | 4 + docs/pages/joy-ui/api/alert.json | 2 +- docs/pages/joy-ui/api/card.js | 19 ----- docs/pages/joy-ui/api/card.json | 90 --------------------- docs/pages/system/api/box.js | 19 ----- docs/pages/system/api/box.json | 23 ------ docs/pages/system/api/container.js | 19 ----- docs/pages/system/api/container.json | 48 ----------- docs/pages/system/api/grid.js | 19 ----- docs/pages/system/api/grid.json | 89 -------------------- docs/pages/system/api/stack.js | 19 ----- docs/pages/system/api/stack.json | 38 --------- docs/translations/api-docs/grid/grid.json | 37 +++++---- docs/translations/api-docs/stack/stack.json | 4 +- 15 files changed, 34 insertions(+), 403 deletions(-) delete mode 100644 docs/pages/joy-ui/api/card.js delete mode 100644 docs/pages/joy-ui/api/card.json delete mode 100644 docs/pages/system/api/box.js delete mode 100644 docs/pages/system/api/box.json delete mode 100644 docs/pages/system/api/container.js delete mode 100644 docs/pages/system/api/container.json delete mode 100644 docs/pages/system/api/grid.js delete mode 100644 docs/pages/system/api/grid.json delete mode 100644 docs/pages/system/api/stack.js delete mode 100644 docs/pages/system/api/stack.json diff --git a/docs/pages/base-ui/api/number-input.json b/docs/pages/base-ui/api/number-input.json index 1bb6945c855368..edbfc4de395594 100644 --- a/docs/pages/base-ui/api/number-input.json +++ b/docs/pages/base-ui/api/number-input.json @@ -75,7 +75,12 @@ ], "classes": { "classes": ["disabled", "error", "focused", "formControl", "readOnly"], - "globalClasses": { "focused": "Mui-focused", "disabled": "Mui-disabled", "error": "Mui-error" } + "globalClasses": { + "focused": "Mui-focused", + "disabled": "Mui-disabled", + "readOnly": "Mui-readOnly", + "error": "Mui-error" + } }, "spread": true, "muiName": "MuiNumberInput", diff --git a/docs/pages/base-ui/api/use-modal.json b/docs/pages/base-ui/api/use-modal.json index f40ebdef554aef..d7fe1e226f3af0 100644 --- a/docs/pages/base-ui/api/use-modal.json +++ b/docs/pages/base-ui/api/use-modal.json @@ -90,5 +90,9 @@ }, "name": "useModal", "filename": "/packages/mui-base/src/unstable_useModal/useModal.ts", + "imports": [ + "import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';", + "import { unstable_useModal as useModal } from '@mui/base';" + ], "demos": "" } diff --git a/docs/pages/joy-ui/api/alert.json b/docs/pages/joy-ui/api/alert.json index 572c2b95d75574..95451d45c2f00a 100644 --- a/docs/pages/joy-ui/api/alert.json +++ b/docs/pages/joy-ui/api/alert.json @@ -48,7 +48,7 @@ "name": "union", "description": "'outlined'
| 'plain'
| 'soft'
| 'solid'
| string" }, - "default": "'outlined'", + "default": "'soft'", "additionalInfo": { "joy-variant": true } } }, diff --git a/docs/pages/joy-ui/api/card.js b/docs/pages/joy-ui/api/card.js deleted file mode 100644 index 5da0e773bb2a6d..00000000000000 --- a/docs/pages/joy-ui/api/card.js +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './card.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context('docs/translations/api-docs-joy/card', false, /card.*.json$/); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/joy-ui/api/card.json b/docs/pages/joy-ui/api/card.json deleted file mode 100644 index d7f69219f122e8..00000000000000 --- a/docs/pages/joy-ui/api/card.json +++ /dev/null @@ -1,90 +0,0 @@ -{ - "props": { - "children": { "type": { "name": "node" } }, - "color": { - "type": { - "name": "union", - "description": "'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string" - }, - "default": "'neutral'", - "additionalInfo": { "joy-color": true } - }, - "component": { "type": { "name": "elementType" } }, - "invertedColors": { "type": { "name": "bool" }, "default": "false" }, - "orientation": { - "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, - "default": "'vertical'" - }, - "size": { - "type": { - "name": "union", - "description": "'lg'
| 'md'
| 'sm'
| string" - }, - "default": "'md'", - "additionalInfo": { "joy-size": true } - }, - "slotProps": { - "type": { "name": "shape", "description": "{ root?: func
| object }" }, - "default": "{}" - }, - "slots": { - "type": { "name": "shape", "description": "{ root?: elementType }" }, - "default": "{}", - "additionalInfo": { "slotsApi": true } - }, - "sx": { - "type": { - "name": "union", - "description": "Array<func
| object
| bool>
| func
| object" - }, - "additionalInfo": { "sx": true } - }, - "variant": { - "type": { - "name": "union", - "description": "'outlined'
| 'plain'
| 'soft'
| 'solid'
| string" - }, - "default": "'plain'", - "additionalInfo": { "joy-variant": true } - } - }, - "name": "Card", - "imports": ["import Card from '@mui/joy/Card';", "import { Card } from '@mui/joy';"], - "styles": { "classes": [], "globalClasses": {}, "name": "MuiCard" }, - "slots": [ - { - "name": "root", - "description": "The component that renders the root.", - "default": "'div'", - "class": ".MuiCard-root" - } - ], - "classes": { - "classes": [ - "colorContext", - "colorDanger", - "colorNeutral", - "colorPrimary", - "colorSuccess", - "colorWarning", - "horizontal", - "sizeLg", - "sizeMd", - "sizeSm", - "variantOutlined", - "variantPlain", - "variantSoft", - "variantSolid", - "vertical" - ], - "globalClasses": {} - }, - "spread": true, - "themeDefaultProps": true, - "muiName": "JoyCard", - "forwardsRefTo": "HTMLDivElement", - "filename": "/packages/mui-joy/src/Card/Card.tsx", - "inheritance": null, - "demos": "", - "cssComponent": false -} diff --git a/docs/pages/system/api/box.js b/docs/pages/system/api/box.js deleted file mode 100644 index 75bdf6fcffccf1..00000000000000 --- a/docs/pages/system/api/box.js +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './box.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context('docs/translations/api-docs/box', false, /box.*.json$/); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/system/api/box.json b/docs/pages/system/api/box.json deleted file mode 100644 index 8671a75c632274..00000000000000 --- a/docs/pages/system/api/box.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "props": { - "component": { "type": { "name": "elementType" } }, - "sx": { - "type": { - "name": "union", - "description": "Array<func
| object
| bool>
| func
| object" - }, - "additionalInfo": { "sx": true } - } - }, - "name": "Box", - "imports": ["import Box from '@mui/system/Box';", "import { Box } from '@mui/system';"], - "styles": { "classes": [], "globalClasses": {}, "name": null }, - "spread": true, - "themeDefaultProps": false, - "muiName": "MuiBox", - "forwardsRefTo": "HTMLDivElement", - "filename": "/packages/mui-system/src/Box/Box.js", - "inheritance": null, - "demos": "", - "cssComponent": true -} diff --git a/docs/pages/system/api/container.js b/docs/pages/system/api/container.js deleted file mode 100644 index 93a80589d308f5..00000000000000 --- a/docs/pages/system/api/container.js +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './container.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context('docs/translations/api-docs/container', false, /container.*.json$/); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/system/api/container.json b/docs/pages/system/api/container.json deleted file mode 100644 index 0bcd5bd6c15813..00000000000000 --- a/docs/pages/system/api/container.json +++ /dev/null @@ -1,48 +0,0 @@ -{ - "props": { - "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "component": { "type": { "name": "elementType" } }, - "disableGutters": { "type": { "name": "bool" } }, - "fixed": { "type": { "name": "bool" } }, - "maxWidth": { - "type": { - "name": "union", - "description": "'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false
| string" - } - }, - "sx": { - "type": { - "name": "union", - "description": "Array<func
| object
| bool>
| func
| object" - }, - "additionalInfo": { "sx": true } - } - }, - "name": "Container", - "imports": [ - "import Container from '@mui/system/Container';", - "import { Container } from '@mui/system';" - ], - "styles": { - "classes": [ - "root", - "disableGutters", - "fixed", - "maxWidthXs", - "maxWidthSm", - "maxWidthMd", - "maxWidthLg", - "maxWidthXl" - ], - "globalClasses": {}, - "name": "MuiContainer" - }, - "spread": true, - "themeDefaultProps": true, - "muiName": "MuiContainer", - "forwardsRefTo": "HTMLElement", - "filename": "/packages/mui-system/src/Container/Container.tsx", - "inheritance": null, - "demos": "", - "cssComponent": false -} diff --git a/docs/pages/system/api/grid.js b/docs/pages/system/api/grid.js deleted file mode 100644 index 1296f5b5bebc49..00000000000000 --- a/docs/pages/system/api/grid.js +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './grid.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context('docs/translations/api-docs/grid', false, /grid.*.json$/); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json deleted file mode 100644 index 1df76627e570e3..00000000000000 --- a/docs/pages/system/api/grid.json +++ /dev/null @@ -1,89 +0,0 @@ -{ - "props": { - "children": { "type": { "name": "node" } }, - "columns": { - "type": { - "name": "union", - "description": "Array<number>
| number
| object" - } - }, - "columnSpacing": { - "type": { - "name": "union", - "description": "Array<number
| string>
| number
| object
| string" - } - }, - "container": { "type": { "name": "bool" } }, - "direction": { - "type": { - "name": "union", - "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" - } - }, - "disableEqualOverflow": { "type": { "name": "bool" } }, - "lg": { - "type": { "name": "union", "description": "'auto'
| number
| bool" } - }, - "lgOffset": { "type": { "name": "union", "description": "'auto'
| number" } }, - "md": { - "type": { "name": "union", "description": "'auto'
| number
| bool" } - }, - "mdOffset": { "type": { "name": "union", "description": "'auto'
| number" } }, - "rowSpacing": { - "type": { - "name": "union", - "description": "Array<number
| string>
| number
| object
| string" - } - }, - "sm": { - "type": { "name": "union", "description": "'auto'
| number
| bool" } - }, - "smOffset": { "type": { "name": "union", "description": "'auto'
| number" } }, - "spacing": { - "type": { - "name": "union", - "description": "Array<number
| string>
| number
| object
| string" - } - }, - "wrap": { - "type": { - "name": "enum", - "description": "'nowrap'
| 'wrap-reverse'
| 'wrap'" - } - }, - "xl": { - "type": { "name": "union", "description": "'auto'
| number
| bool" } - }, - "xlOffset": { "type": { "name": "union", "description": "'auto'
| number" } }, - "xs": { - "type": { "name": "union", "description": "'auto'
| number
| bool" } - }, - "xsOffset": { "type": { "name": "union", "description": "'auto'
| number" } } - }, - "name": "Grid", - "imports": [ - "import Grid from '@mui/system/Unstable_Grid';", - "import { Unstable_Grid as Grid } from '@mui/system';" - ], - "styles": { - "classes": [ - "root", - "container", - "direction-xs-column", - "direction-xs-column-reverse", - "direction-xs-row-reverse", - "wrap-xs-nowrap", - "wrap-xs-wrap-reverse" - ], - "globalClasses": {}, - "name": "MuiGrid" - }, - "spread": true, - "themeDefaultProps": true, - "muiName": "MuiGrid", - "forwardsRefTo": "HTMLElement", - "filename": "/packages/mui-system/src/Unstable_Grid/Grid.tsx", - "inheritance": null, - "demos": "", - "cssComponent": true -} diff --git a/docs/pages/system/api/stack.js b/docs/pages/system/api/stack.js deleted file mode 100644 index 9544e37c5e9ad1..00000000000000 --- a/docs/pages/system/api/stack.js +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './stack.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context('docs/translations/api-docs/stack', false, /stack.*.json$/); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/system/api/stack.json b/docs/pages/system/api/stack.json deleted file mode 100644 index b5712edda3809f..00000000000000 --- a/docs/pages/system/api/stack.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "props": { - "children": { "type": { "name": "node" } }, - "component": { "type": { "name": "elementType" } }, - "direction": { - "type": { - "name": "union", - "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" - } - }, - "divider": { "type": { "name": "node" } }, - "spacing": { - "type": { - "name": "union", - "description": "Array<number
| string>
| number
| object
| string" - } - }, - "sx": { - "type": { - "name": "union", - "description": "Array<func
| object
| bool>
| func
| object" - }, - "additionalInfo": { "sx": true } - }, - "useFlexGap": { "type": { "name": "bool" } } - }, - "name": "Stack", - "imports": ["import Stack from '@mui/system/Stack';", "import { Stack } from '@mui/system';"], - "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiStack" }, - "spread": true, - "themeDefaultProps": true, - "muiName": "MuiStack", - "forwardsRefTo": "HTMLDivElement", - "filename": "/packages/mui-system/src/Stack/Stack.tsx", - "inheritance": null, - "demos": "", - "cssComponent": true -} diff --git a/docs/translations/api-docs/grid/grid.json b/docs/translations/api-docs/grid/grid.json index 684505103bf3a0..75d0fe811ae032 100644 --- a/docs/translations/api-docs/grid/grid.json +++ b/docs/translations/api-docs/grid/grid.json @@ -2,57 +2,52 @@ "componentDescription": "", "propDescriptions": { "children": { "description": "The content of the component." }, + "classes": { "description": "Override or extend the styles applied to the component." }, "columns": { "description": "The number of columns." }, "columnSpacing": { "description": "Defines the horizontal space between the type item components. It overrides the value of the spacing prop." }, + "component": { + "description": "The component used for the root node. Either a string to use a HTML element or a component." + }, "container": { "description": "If true, the component will have the flex container behavior. You should be wrapping items with a container." }, "direction": { "description": "Defines the flex-direction style property. It is applied for all screen sizes." }, - "disableEqualOverflow": { - "description": "If true, the negative margin and padding are apply only to the top and left sides of the grid." + "item": { + "description": "If true, the component will have the flex item behavior. You should be wrapping items with a container." }, "lg": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the lg breakpoint and wider screens if not overridden." }, - "lgOffset": { - "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the lg breakpoint and wider screens if not overridden." - }, "md": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the md breakpoint and wider screens if not overridden." }, - "mdOffset": { - "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the md breakpoint and wider screens if not overridden." - }, "rowSpacing": { "description": "Defines the vertical space between the type item components. It overrides the value of the spacing prop." }, "sm": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the sm breakpoint and wider screens if not overridden." }, - "smOffset": { - "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the sm breakpoint and wider screens if not overridden." - }, "spacing": { "description": "Defines the space between the type item components. It can only be used on a type container component." }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + }, "wrap": { "description": "Defines the flex-wrap style property. It's applied for all screen sizes." }, "xl": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the xl breakpoint and wider screens if not overridden." }, - "xlOffset": { - "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the xl breakpoint and wider screens if not overridden." - }, "xs": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority." }, - "xsOffset": { - "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the xs breakpoint and wider screens if not overridden." + "zeroMinWidth": { + "description": "If true, it sets min-width: 0 on the item. Refer to the limitations section of the documentation to better understand the use case." } }, "classDescriptions": { @@ -62,6 +57,16 @@ "nodeName": "the root element", "conditions": "container={true}" }, + "item": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "item={true}" + }, + "zeroMinWidth": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "zeroMinWidth={true}" + }, "direction-xs-column": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/stack/stack.json b/docs/translations/api-docs/stack/stack.json index 7984ca543b5f82..933e25399e8c32 100644 --- a/docs/translations/api-docs/stack/stack.json +++ b/docs/translations/api-docs/stack/stack.json @@ -14,8 +14,8 @@ "description": "The system prop, which allows defining system overrides as well as additional CSS styles." }, "useFlexGap": { - "description": "If true, the CSS flexbox gap is used instead of applying margin to children.
While CSS gap removes the known limitations, it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
To enable this flag globally, follow the theme's default props configuration." + "description": "If true, the CSS flexbox gap is used instead of applying margin to children.
While CSS gap removes the known limitations, it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
To enable this flag globally, follow the theme's default props configuration." } }, - "classDescriptions": { "root": { "description": "Styles applied to the root element." } } + "classDescriptions": {} } From 08bc9a09d28e1cddc84deac0b7a5d7c2875a5cab Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Aug 2023 10:14:17 +0700 Subject: [PATCH 15/23] fix jsdoc default variant --- docs/pages/joy-ui/api/card.js | 19 ++++++ docs/pages/joy-ui/api/card.json | 90 ++++++++++++++++++++++++++ packages/mui-joy/src/Card/Card.tsx | 2 +- packages/mui-joy/src/Card/CardProps.ts | 2 +- 4 files changed, 111 insertions(+), 2 deletions(-) create mode 100644 docs/pages/joy-ui/api/card.js create mode 100644 docs/pages/joy-ui/api/card.json diff --git a/docs/pages/joy-ui/api/card.js b/docs/pages/joy-ui/api/card.js new file mode 100644 index 00000000000000..5da0e773bb2a6d --- /dev/null +++ b/docs/pages/joy-ui/api/card.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './card.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context('docs/translations/api-docs-joy/card', false, /card.*.json$/); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/joy-ui/api/card.json b/docs/pages/joy-ui/api/card.json new file mode 100644 index 00000000000000..e9fb4bd31addfa --- /dev/null +++ b/docs/pages/joy-ui/api/card.json @@ -0,0 +1,90 @@ +{ + "props": { + "children": { "type": { "name": "node" } }, + "color": { + "type": { + "name": "union", + "description": "'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string" + }, + "default": "'neutral'", + "additionalInfo": { "joy-color": true } + }, + "component": { "type": { "name": "elementType" } }, + "invertedColors": { "type": { "name": "bool" }, "default": "false" }, + "orientation": { + "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, + "default": "'vertical'" + }, + "size": { + "type": { + "name": "union", + "description": "'lg'
| 'md'
| 'sm'
| string" + }, + "default": "'md'", + "additionalInfo": { "joy-size": true } + }, + "slotProps": { + "type": { "name": "shape", "description": "{ root?: func
| object }" }, + "default": "{}" + }, + "slots": { + "type": { "name": "shape", "description": "{ root?: elementType }" }, + "default": "{}", + "additionalInfo": { "slotsApi": true } + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, + "variant": { + "type": { + "name": "union", + "description": "'outlined'
| 'plain'
| 'soft'
| 'solid'
| string" + }, + "default": "'outlined'", + "additionalInfo": { "joy-variant": true } + } + }, + "name": "Card", + "imports": ["import Card from '@mui/joy/Card';", "import { Card } from '@mui/joy';"], + "styles": { "classes": [], "globalClasses": {}, "name": "MuiCard" }, + "slots": [ + { + "name": "root", + "description": "The component that renders the root.", + "default": "'div'", + "class": ".MuiCard-root" + } + ], + "classes": { + "classes": [ + "colorContext", + "colorDanger", + "colorNeutral", + "colorPrimary", + "colorSuccess", + "colorWarning", + "horizontal", + "sizeLg", + "sizeMd", + "sizeSm", + "variantOutlined", + "variantPlain", + "variantSoft", + "variantSolid", + "vertical" + ], + "globalClasses": {} + }, + "spread": true, + "themeDefaultProps": true, + "muiName": "JoyCard", + "forwardsRefTo": "HTMLDivElement", + "filename": "/packages/mui-joy/src/Card/Card.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index 99271995d4c6af..27d99bbc9284df 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -259,7 +259,7 @@ Card.propTypes /* remove-proptypes */ = { ]), /** * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use. - * @default 'plain' + * @default 'outlined' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']), diff --git a/packages/mui-joy/src/Card/CardProps.ts b/packages/mui-joy/src/Card/CardProps.ts index 8c0c2dc9f3420c..1791beee9f6d7b 100644 --- a/packages/mui-joy/src/Card/CardProps.ts +++ b/packages/mui-joy/src/Card/CardProps.ts @@ -58,7 +58,7 @@ export interface CardTypeMap

{ sx?: SxProps; /** * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use. - * @default 'plain' + * @default 'outlined' */ variant?: OverridableStringUnion; } & CardSlotsAndSlotProps; From 3280cf226d99ff41c9daab8ddb0b2bdc0f5983e0 Mon Sep 17 00:00:00 2001 From: zanivan Date: Fri, 18 Aug 2023 12:49:11 -0300 Subject: [PATCH 16/23] Added boxShadow to other components --- packages/mui-joy/src/Select/Select.tsx | 1 + packages/mui-joy/src/Textarea/Textarea.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index e38553b16c22fa..e229562744cfe8 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -143,6 +143,7 @@ const SelectRoot = styled('div', { display: 'flex', alignItems: 'center', borderRadius: 'var(--Select-radius)', + boxShadow: theme.shadow.xs, cursor: 'pointer', ...(!variantStyle?.backgroundColor && { backgroundColor: theme.vars.palette.background.surface, diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx index 3a2332e160f697..889444fcb3a4ce 100644 --- a/packages/mui-joy/src/Textarea/Textarea.tsx +++ b/packages/mui-joy/src/Textarea/Textarea.tsx @@ -97,6 +97,7 @@ const TextareaRoot = styled('div', { paddingInlineStart: `var(--Textarea-paddingInline)`, // the paddingInlineEnd is added to the textarea. It looks better when the scrollbar appears. paddingBlock: 'var(--Textarea-paddingBlock)', borderRadius: 'var(--Textarea-radius)', + boxShadow: theme.shadow.xs, ...theme.typography[`body-${ownerState.size!}`], ...variantStyle, backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface, From 7ef1b3fb03b87ec1850e9c59e67be59ffc125e52 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Aug 2023 14:06:57 +0700 Subject: [PATCH 17/23] run scripts --- docs/pages/material-ui/api/timeline.json | 8 -- docs/pages/system/api/box.js | 19 +++++ docs/pages/system/api/box.json | 23 ++++++ docs/pages/system/api/container.js | 19 +++++ docs/pages/system/api/container.json | 48 +++++++++++ docs/pages/system/api/grid.js | 19 +++++ docs/pages/system/api/grid.json | 89 +++++++++++++++++++++ docs/pages/system/api/stack.js | 19 +++++ docs/pages/system/api/stack.json | 38 +++++++++ docs/translations/api-docs/grid/grid.json | 37 ++++----- docs/translations/api-docs/stack/stack.json | 4 +- 11 files changed, 292 insertions(+), 31 deletions(-) create mode 100644 docs/pages/system/api/box.js create mode 100644 docs/pages/system/api/box.json create mode 100644 docs/pages/system/api/container.js create mode 100644 docs/pages/system/api/container.json create mode 100644 docs/pages/system/api/grid.js create mode 100644 docs/pages/system/api/grid.json create mode 100644 docs/pages/system/api/stack.js create mode 100644 docs/pages/system/api/stack.json diff --git a/docs/pages/material-ui/api/timeline.json b/docs/pages/material-ui/api/timeline.json index 33e4abe5f1adf8..f178093bfea75a 100644 --- a/docs/pages/material-ui/api/timeline.json +++ b/docs/pages/material-ui/api/timeline.json @@ -1,7 +1,6 @@ { "props": { "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "className": { "type": { "name": "string" } }, "position": { "type": { @@ -9,13 +8,6 @@ "description": "'alternate-reverse'
| 'alternate'
| 'left'
| 'right'" }, "default": "'right'" - }, - "sx": { - "type": { - "name": "union", - "description": "Array<func
| object
| bool>
| func
| object" - }, - "additionalInfo": { "sx": true } } }, "name": "Timeline", diff --git a/docs/pages/system/api/box.js b/docs/pages/system/api/box.js new file mode 100644 index 00000000000000..75bdf6fcffccf1 --- /dev/null +++ b/docs/pages/system/api/box.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './box.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context('docs/translations/api-docs/box', false, /box.*.json$/); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/system/api/box.json b/docs/pages/system/api/box.json new file mode 100644 index 00000000000000..8671a75c632274 --- /dev/null +++ b/docs/pages/system/api/box.json @@ -0,0 +1,23 @@ +{ + "props": { + "component": { "type": { "name": "elementType" } }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + } + }, + "name": "Box", + "imports": ["import Box from '@mui/system/Box';", "import { Box } from '@mui/system';"], + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": true, + "themeDefaultProps": false, + "muiName": "MuiBox", + "forwardsRefTo": "HTMLDivElement", + "filename": "/packages/mui-system/src/Box/Box.js", + "inheritance": null, + "demos": "

", + "cssComponent": true +} diff --git a/docs/pages/system/api/container.js b/docs/pages/system/api/container.js new file mode 100644 index 00000000000000..93a80589d308f5 --- /dev/null +++ b/docs/pages/system/api/container.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './container.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context('docs/translations/api-docs/container', false, /container.*.json$/); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/system/api/container.json b/docs/pages/system/api/container.json new file mode 100644 index 00000000000000..0bcd5bd6c15813 --- /dev/null +++ b/docs/pages/system/api/container.json @@ -0,0 +1,48 @@ +{ + "props": { + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "component": { "type": { "name": "elementType" } }, + "disableGutters": { "type": { "name": "bool" } }, + "fixed": { "type": { "name": "bool" } }, + "maxWidth": { + "type": { + "name": "union", + "description": "'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false
| string" + } + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + } + }, + "name": "Container", + "imports": [ + "import Container from '@mui/system/Container';", + "import { Container } from '@mui/system';" + ], + "styles": { + "classes": [ + "root", + "disableGutters", + "fixed", + "maxWidthXs", + "maxWidthSm", + "maxWidthMd", + "maxWidthLg", + "maxWidthXl" + ], + "globalClasses": {}, + "name": "MuiContainer" + }, + "spread": true, + "themeDefaultProps": true, + "muiName": "MuiContainer", + "forwardsRefTo": "HTMLElement", + "filename": "/packages/mui-system/src/Container/Container.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/system/api/grid.js b/docs/pages/system/api/grid.js new file mode 100644 index 00000000000000..1296f5b5bebc49 --- /dev/null +++ b/docs/pages/system/api/grid.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './grid.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context('docs/translations/api-docs/grid', false, /grid.*.json$/); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json new file mode 100644 index 00000000000000..1df76627e570e3 --- /dev/null +++ b/docs/pages/system/api/grid.json @@ -0,0 +1,89 @@ +{ + "props": { + "children": { "type": { "name": "node" } }, + "columns": { + "type": { + "name": "union", + "description": "Array<number>
| number
| object" + } + }, + "columnSpacing": { + "type": { + "name": "union", + "description": "Array<number
| string>
| number
| object
| string" + } + }, + "container": { "type": { "name": "bool" } }, + "direction": { + "type": { + "name": "union", + "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" + } + }, + "disableEqualOverflow": { "type": { "name": "bool" } }, + "lg": { + "type": { "name": "union", "description": "'auto'
| number
| bool" } + }, + "lgOffset": { "type": { "name": "union", "description": "'auto'
| number" } }, + "md": { + "type": { "name": "union", "description": "'auto'
| number
| bool" } + }, + "mdOffset": { "type": { "name": "union", "description": "'auto'
| number" } }, + "rowSpacing": { + "type": { + "name": "union", + "description": "Array<number
| string>
| number
| object
| string" + } + }, + "sm": { + "type": { "name": "union", "description": "'auto'
| number
| bool" } + }, + "smOffset": { "type": { "name": "union", "description": "'auto'
| number" } }, + "spacing": { + "type": { + "name": "union", + "description": "Array<number
| string>
| number
| object
| string" + } + }, + "wrap": { + "type": { + "name": "enum", + "description": "'nowrap'
| 'wrap-reverse'
| 'wrap'" + } + }, + "xl": { + "type": { "name": "union", "description": "'auto'
| number
| bool" } + }, + "xlOffset": { "type": { "name": "union", "description": "'auto'
| number" } }, + "xs": { + "type": { "name": "union", "description": "'auto'
| number
| bool" } + }, + "xsOffset": { "type": { "name": "union", "description": "'auto'
| number" } } + }, + "name": "Grid", + "imports": [ + "import Grid from '@mui/system/Unstable_Grid';", + "import { Unstable_Grid as Grid } from '@mui/system';" + ], + "styles": { + "classes": [ + "root", + "container", + "direction-xs-column", + "direction-xs-column-reverse", + "direction-xs-row-reverse", + "wrap-xs-nowrap", + "wrap-xs-wrap-reverse" + ], + "globalClasses": {}, + "name": "MuiGrid" + }, + "spread": true, + "themeDefaultProps": true, + "muiName": "MuiGrid", + "forwardsRefTo": "HTMLElement", + "filename": "/packages/mui-system/src/Unstable_Grid/Grid.tsx", + "inheritance": null, + "demos": "", + "cssComponent": true +} diff --git a/docs/pages/system/api/stack.js b/docs/pages/system/api/stack.js new file mode 100644 index 00000000000000..9544e37c5e9ad1 --- /dev/null +++ b/docs/pages/system/api/stack.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './stack.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context('docs/translations/api-docs/stack', false, /stack.*.json$/); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/system/api/stack.json b/docs/pages/system/api/stack.json new file mode 100644 index 00000000000000..b5712edda3809f --- /dev/null +++ b/docs/pages/system/api/stack.json @@ -0,0 +1,38 @@ +{ + "props": { + "children": { "type": { "name": "node" } }, + "component": { "type": { "name": "elementType" } }, + "direction": { + "type": { + "name": "union", + "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" + } + }, + "divider": { "type": { "name": "node" } }, + "spacing": { + "type": { + "name": "union", + "description": "Array<number
| string>
| number
| object
| string" + } + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, + "useFlexGap": { "type": { "name": "bool" } } + }, + "name": "Stack", + "imports": ["import Stack from '@mui/system/Stack';", "import { Stack } from '@mui/system';"], + "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiStack" }, + "spread": true, + "themeDefaultProps": true, + "muiName": "MuiStack", + "forwardsRefTo": "HTMLDivElement", + "filename": "/packages/mui-system/src/Stack/Stack.tsx", + "inheritance": null, + "demos": "", + "cssComponent": true +} diff --git a/docs/translations/api-docs/grid/grid.json b/docs/translations/api-docs/grid/grid.json index 75d0fe811ae032..684505103bf3a0 100644 --- a/docs/translations/api-docs/grid/grid.json +++ b/docs/translations/api-docs/grid/grid.json @@ -2,52 +2,57 @@ "componentDescription": "", "propDescriptions": { "children": { "description": "The content of the component." }, - "classes": { "description": "Override or extend the styles applied to the component." }, "columns": { "description": "The number of columns." }, "columnSpacing": { "description": "Defines the horizontal space between the type item components. It overrides the value of the spacing prop." }, - "component": { - "description": "The component used for the root node. Either a string to use a HTML element or a component." - }, "container": { "description": "If true, the component will have the flex container behavior. You should be wrapping items with a container." }, "direction": { "description": "Defines the flex-direction style property. It is applied for all screen sizes." }, - "item": { - "description": "If true, the component will have the flex item behavior. You should be wrapping items with a container." + "disableEqualOverflow": { + "description": "If true, the negative margin and padding are apply only to the top and left sides of the grid." }, "lg": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the lg breakpoint and wider screens if not overridden." }, + "lgOffset": { + "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the lg breakpoint and wider screens if not overridden." + }, "md": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the md breakpoint and wider screens if not overridden." }, + "mdOffset": { + "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the md breakpoint and wider screens if not overridden." + }, "rowSpacing": { "description": "Defines the vertical space between the type item components. It overrides the value of the spacing prop." }, "sm": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the sm breakpoint and wider screens if not overridden." }, + "smOffset": { + "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the sm breakpoint and wider screens if not overridden." + }, "spacing": { "description": "Defines the space between the type item components. It can only be used on a type container component." }, - "sx": { - "description": "The system prop that allows defining system overrides as well as additional CSS styles." - }, "wrap": { "description": "Defines the flex-wrap style property. It's applied for all screen sizes." }, "xl": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the xl breakpoint and wider screens if not overridden." }, + "xlOffset": { + "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the xl breakpoint and wider screens if not overridden." + }, "xs": { "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority." }, - "zeroMinWidth": { - "description": "If true, it sets min-width: 0 on the item. Refer to the limitations section of the documentation to better understand the use case." + "xsOffset": { + "description": "If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the xs breakpoint and wider screens if not overridden." } }, "classDescriptions": { @@ -57,16 +62,6 @@ "nodeName": "the root element", "conditions": "container={true}" }, - "item": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "item={true}" - }, - "zeroMinWidth": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "zeroMinWidth={true}" - }, "direction-xs-column": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/stack/stack.json b/docs/translations/api-docs/stack/stack.json index 933e25399e8c32..7984ca543b5f82 100644 --- a/docs/translations/api-docs/stack/stack.json +++ b/docs/translations/api-docs/stack/stack.json @@ -14,8 +14,8 @@ "description": "The system prop, which allows defining system overrides as well as additional CSS styles." }, "useFlexGap": { - "description": "If true, the CSS flexbox gap is used instead of applying margin to children.
While CSS gap removes the known limitations, it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
To enable this flag globally, follow the theme's default props configuration." + "description": "If true, the CSS flexbox gap is used instead of applying margin to children.
While CSS gap removes the known limitations, it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
To enable this flag globally, follow the theme's default props configuration." } }, - "classDescriptions": {} + "classDescriptions": { "root": { "description": "Styles applied to the root element." } } } From 6889c644b52057447fcd6cce16a9792ae8a6e3f9 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Aug 2023 14:07:29 +0700 Subject: [PATCH 18/23] restore timeline.json --- docs/pages/material-ui/api/timeline.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/pages/material-ui/api/timeline.json b/docs/pages/material-ui/api/timeline.json index f178093bfea75a..33e4abe5f1adf8 100644 --- a/docs/pages/material-ui/api/timeline.json +++ b/docs/pages/material-ui/api/timeline.json @@ -1,6 +1,7 @@ { "props": { "children": { "type": { "name": "node" } }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "className": { "type": { "name": "string" } }, "position": { "type": { @@ -8,6 +9,13 @@ "description": "'alternate-reverse'
| 'alternate'
| 'left'
| 'right'" }, "default": "'right'" + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } } }, "name": "Timeline", From 23381b8a1c9c55c4bb9935d26117d8b5cfa914d2 Mon Sep 17 00:00:00 2001 From: zanivan Date: Mon, 21 Aug 2023 16:55:42 -0300 Subject: [PATCH 19/23] Removed unnecessary shadows --- packages/mui-joy/src/Card/Card.tsx | 4 +++- packages/mui-joy/src/Input/Input.tsx | 13 ++++++++++++- packages/mui-joy/src/Select/Select.tsx | 13 ++++++++++++- packages/mui-joy/src/Textarea/Textarea.tsx | 13 ++++++++++++- 4 files changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index 27d99bbc9284df..96e24048d2ec6f 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -79,9 +79,11 @@ const CardRoot = styled('div', { '--Card-padding': '1.5rem', gap: '1rem 1.5rem', }), + ...(ownerState.variant === 'plain' && { + boxShadow: theme.shadow.xs, + }), padding: 'var(--Card-padding)', borderRadius: 'var(--Card-radius)', - boxShadow: theme.shadow.xs, backgroundColor: theme.vars.palette.background.surface, position: 'relative', display: 'flex', diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx index 79d0b4d0a4b7cf..47ad25affc3960 100644 --- a/packages/mui-joy/src/Input/Input.tsx +++ b/packages/mui-joy/src/Input/Input.tsx @@ -72,6 +72,18 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>( '--Input-decoratorChildHeight': 'min(2.375rem, var(--Input-minHeight))', '--Icon-fontSize': theme.vars.fontSize.xl2, }), + ...(ownerState.variant === 'plain' && { + boxShadow: 'none', + }), + ...(ownerState.variant === 'outlined' && { + boxShadow: theme.shadow.xs, + }), + ...(ownerState.variant === 'soft' && { + boxShadow: theme.shadow.xs, + }), + ...(ownerState.variant === 'solid' && { + boxShadow: theme.shadow.xs, + }), // variables for controlling child components '--Input-decoratorChildOffset': 'min(calc(var(--Input-paddingInline) - (var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Input-decoratorChildHeight)) / 2), var(--Input-paddingInline))', @@ -94,7 +106,6 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>( display: 'flex', paddingInline: `var(--Input-paddingInline)`, borderRadius: 'var(--Input-radius)', - boxShadow: theme.shadow.xs, ...theme.typography[`body-${ownerState.size!}`], ...variantStyle, backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface, diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index e229562744cfe8..ade8f391fa0517 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -125,6 +125,18 @@ const SelectRoot = styled('div', { '--Select-decoratorChildHeight': 'min(2.375rem, var(--Select-minHeight))', '--Icon-fontSize': theme.vars.fontSize.xl2, }), + ...(ownerState.variant === 'plain' && { + boxShadow: 'none', + }), + ...(ownerState.variant === 'outlined' && { + boxShadow: theme.shadow.xs, + }), + ...(ownerState.variant === 'soft' && { + boxShadow: theme.shadow.xs, + }), + ...(ownerState.variant === 'solid' && { + boxShadow: theme.shadow.xs, + }), // variables for controlling child components '--Select-decoratorChildOffset': 'min(calc(var(--Select-paddingInline) - (var(--Select-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Select-decoratorChildHeight)) / 2), var(--Select-paddingInline))', @@ -143,7 +155,6 @@ const SelectRoot = styled('div', { display: 'flex', alignItems: 'center', borderRadius: 'var(--Select-radius)', - boxShadow: theme.shadow.xs, cursor: 'pointer', ...(!variantStyle?.backgroundColor && { backgroundColor: theme.vars.palette.background.surface, diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx index 889444fcb3a4ce..d136aa3b5a7a1d 100644 --- a/packages/mui-joy/src/Textarea/Textarea.tsx +++ b/packages/mui-joy/src/Textarea/Textarea.tsx @@ -78,6 +78,18 @@ const TextareaRoot = styled('div', { '--Textarea-decoratorChildHeight': 'min(2.375rem, var(--Textarea-minHeight))', '--Icon-fontSize': theme.vars.fontSize.xl2, }), + ...(ownerState.variant === 'plain' && { + boxShadow: 'none', + }), + ...(ownerState.variant === 'outlined' && { + boxShadow: theme.shadow.xs, + }), + ...(ownerState.variant === 'soft' && { + boxShadow: theme.shadow.xs, + }), + ...(ownerState.variant === 'solid' && { + boxShadow: theme.shadow.xs, + }), // variables for controlling child components '--_Textarea-paddingBlock': 'max((var(--Textarea-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Textarea-decoratorChildHeight)) / 2, 0px)', @@ -97,7 +109,6 @@ const TextareaRoot = styled('div', { paddingInlineStart: `var(--Textarea-paddingInline)`, // the paddingInlineEnd is added to the textarea. It looks better when the scrollbar appears. paddingBlock: 'var(--Textarea-paddingBlock)', borderRadius: 'var(--Textarea-radius)', - boxShadow: theme.shadow.xs, ...theme.typography[`body-${ownerState.size!}`], ...variantStyle, backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface, From 63e8b403545c56bf4346bbc9f52686270d43aaed Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 22 Aug 2023 19:19:08 -0300 Subject: [PATCH 20/23] removed shadows from cards --- packages/mui-joy/src/Card/Card.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index 96e24048d2ec6f..73607123bf9052 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -79,9 +79,6 @@ const CardRoot = styled('div', { '--Card-padding': '1.5rem', gap: '1rem 1.5rem', }), - ...(ownerState.variant === 'plain' && { - boxShadow: theme.shadow.xs, - }), padding: 'var(--Card-padding)', borderRadius: 'var(--Card-radius)', backgroundColor: theme.vars.palette.background.surface, From 6f866aa065541db518c87b419f02ab62b89565e4 Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Wed, 23 Aug 2023 15:35:16 -0300 Subject: [PATCH 21/23] Fix boxShadow Co-authored-by: Siriwat K Signed-off-by: Victor Zanivan Monteiro --- packages/mui-joy/src/Select/Select.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index ade8f391fa0517..c71859c477425d 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -125,16 +125,7 @@ const SelectRoot = styled('div', { '--Select-decoratorChildHeight': 'min(2.375rem, var(--Select-minHeight))', '--Icon-fontSize': theme.vars.fontSize.xl2, }), - ...(ownerState.variant === 'plain' && { - boxShadow: 'none', - }), - ...(ownerState.variant === 'outlined' && { - boxShadow: theme.shadow.xs, - }), - ...(ownerState.variant === 'soft' && { - boxShadow: theme.shadow.xs, - }), - ...(ownerState.variant === 'solid' && { + ...(ownerState.variant !== 'plain' && { boxShadow: theme.shadow.xs, }), // variables for controlling child components From b0aa8e7dee68dc28482f3fdb93d9cd4456eab3b9 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 24 Aug 2023 14:26:41 +0700 Subject: [PATCH 22/23] apply boxShadow to non plain variant --- packages/mui-joy/src/Input/Input.tsx | 15 +++------------ packages/mui-joy/src/Select/Select.tsx | 6 +++--- packages/mui-joy/src/Textarea/Textarea.tsx | 15 +++------------ 3 files changed, 9 insertions(+), 27 deletions(-) diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx index 47ad25affc3960..43e8830d12d2e5 100644 --- a/packages/mui-joy/src/Input/Input.tsx +++ b/packages/mui-joy/src/Input/Input.tsx @@ -72,18 +72,6 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>( '--Input-decoratorChildHeight': 'min(2.375rem, var(--Input-minHeight))', '--Icon-fontSize': theme.vars.fontSize.xl2, }), - ...(ownerState.variant === 'plain' && { - boxShadow: 'none', - }), - ...(ownerState.variant === 'outlined' && { - boxShadow: theme.shadow.xs, - }), - ...(ownerState.variant === 'soft' && { - boxShadow: theme.shadow.xs, - }), - ...(ownerState.variant === 'solid' && { - boxShadow: theme.shadow.xs, - }), // variables for controlling child components '--Input-decoratorChildOffset': 'min(calc(var(--Input-paddingInline) - (var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Input-decoratorChildHeight)) / 2), var(--Input-paddingInline))', @@ -96,6 +84,9 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>( '--Button-radius': 'var(--Input-decoratorChildRadius)', '--IconButton-radius': 'var(--Input-decoratorChildRadius)', boxSizing: 'border-box', + ...(ownerState.variant !== 'plain' && { + boxShadow: theme.shadow.xs, + }), minWidth: 0, minHeight: 'var(--Input-minHeight)', ...(ownerState.fullWidth && { diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index c71859c477425d..990665044bbf50 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -125,9 +125,6 @@ const SelectRoot = styled('div', { '--Select-decoratorChildHeight': 'min(2.375rem, var(--Select-minHeight))', '--Icon-fontSize': theme.vars.fontSize.xl2, }), - ...(ownerState.variant !== 'plain' && { - boxShadow: theme.shadow.xs, - }), // variables for controlling child components '--Select-decoratorChildOffset': 'min(calc(var(--Select-paddingInline) - (var(--Select-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Select-decoratorChildHeight)) / 2), var(--Select-paddingInline))', @@ -140,6 +137,9 @@ const SelectRoot = styled('div', { '--Button-radius': 'var(--Select-decoratorChildRadius)', '--IconButton-radius': 'var(--Select-decoratorChildRadius)', boxSizing: 'border-box', + ...(ownerState.variant !== 'plain' && { + boxShadow: theme.shadow.xs, + }), minWidth: 0, minHeight: 'var(--Select-minHeight)', position: 'relative', diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx index d136aa3b5a7a1d..13cacbdd15eb93 100644 --- a/packages/mui-joy/src/Textarea/Textarea.tsx +++ b/packages/mui-joy/src/Textarea/Textarea.tsx @@ -78,18 +78,6 @@ const TextareaRoot = styled('div', { '--Textarea-decoratorChildHeight': 'min(2.375rem, var(--Textarea-minHeight))', '--Icon-fontSize': theme.vars.fontSize.xl2, }), - ...(ownerState.variant === 'plain' && { - boxShadow: 'none', - }), - ...(ownerState.variant === 'outlined' && { - boxShadow: theme.shadow.xs, - }), - ...(ownerState.variant === 'soft' && { - boxShadow: theme.shadow.xs, - }), - ...(ownerState.variant === 'solid' && { - boxShadow: theme.shadow.xs, - }), // variables for controlling child components '--_Textarea-paddingBlock': 'max((var(--Textarea-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Textarea-decoratorChildHeight)) / 2, 0px)', @@ -100,6 +88,9 @@ const TextareaRoot = styled('div', { '--Button-radius': 'var(--Textarea-decoratorChildRadius)', '--IconButton-radius': 'var(--Textarea-decoratorChildRadius)', boxSizing: 'border-box', + ...(ownerState.variant !== 'plain' && { + boxShadow: theme.shadow.xs, + }), minWidth: 0, minHeight: 'var(--Textarea-minHeight)', cursor: 'text', From 970948dcbc63ce39bef7ed7ca116590509c3f9b4 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 24 Aug 2023 14:28:11 +0700 Subject: [PATCH 23/23] remove unnecessary shadow from demo --- docs/data/joy/components/card/DribbbleShot.js | 3 +-- docs/data/joy/components/card/DribbbleShot.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js index 69ae9a7fc3981e..74469d2d3c7433 100644 --- a/docs/data/joy/components/card/DribbbleShot.js +++ b/docs/data/joy/components/card/DribbbleShot.js @@ -19,8 +19,7 @@ export default function DribbbleShot() { sx={{ width: 300, bgcolor: 'initial', - boxShadow: 'none', - '--Card-padding': '0px', + p: 0, }} > diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx index 69ae9a7fc3981e..74469d2d3c7433 100644 --- a/docs/data/joy/components/card/DribbbleShot.tsx +++ b/docs/data/joy/components/card/DribbbleShot.tsx @@ -19,8 +19,7 @@ export default function DribbbleShot() { sx={{ width: 300, bgcolor: 'initial', - boxShadow: 'none', - '--Card-padding': '0px', + p: 0, }} >