diff --git a/docs/data/joy/components/sheet/SheetUsage.js b/docs/data/joy/components/sheet/SheetUsage.js new file mode 100644 index 00000000000000..70c796699aa0c9 --- /dev/null +++ b/docs/data/joy/components/sheet/SheetUsage.js @@ -0,0 +1,40 @@ +import * as React from 'react'; +import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo'; +import Sheet from '@mui/joy/Sheet'; + +export default function SheetUsage() { + return ( + ( + + Sheet + + )} + /> + ); +} diff --git a/docs/data/joy/components/sheet/SimpleSheet.js b/docs/data/joy/components/sheet/SimpleSheet.js new file mode 100644 index 00000000000000..1cd5e7cc7fcf6e --- /dev/null +++ b/docs/data/joy/components/sheet/SimpleSheet.js @@ -0,0 +1,10 @@ +import Sheet from '@mui/joy/Sheet'; +import * as React from 'react'; + +export default function SimpleSheet() { + return ( + + Hello world! + + ); +} diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx b/docs/data/joy/components/sheet/SimpleSheet.tsx new file mode 100644 index 00000000000000..1cd5e7cc7fcf6e --- /dev/null +++ b/docs/data/joy/components/sheet/SimpleSheet.tsx @@ -0,0 +1,10 @@ +import Sheet from '@mui/joy/Sheet'; +import * as React from 'react'; + +export default function SimpleSheet() { + return ( + + Hello world! + + ); +} diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx.preview b/docs/data/joy/components/sheet/SimpleSheet.tsx.preview new file mode 100644 index 00000000000000..af5198b0005732 --- /dev/null +++ b/docs/data/joy/components/sheet/SimpleSheet.tsx.preview @@ -0,0 +1,3 @@ + + Hello world! + \ No newline at end of file diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md new file mode 100644 index 00000000000000..739ff379a29466 --- /dev/null +++ b/docs/data/joy/components/sheet/sheet.md @@ -0,0 +1,35 @@ +--- +product: joy-ui +title: React Sheet component +--- + +# Sheet + +

Sheet is a useful surface component that implements the global variant feature.

+ +## Introduction + +The `Sheet` container is a generic container. +It's a sibling to the `Box` component with the difference being that it supports Joy UI's global variants out of the box. + +{{"demo": "SheetUsage.js", "hideToolbar": true, "bg": true}} + +{{"component": "modules/components/ComponentLinkHeader.js"}} + +## Component + +After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: + +```jsx +import Sheet from '@mui/joy/Sheet'; + +export default function MyApp() { + return Holy sheet!; +} +``` + +### Basic usage + +The `Sheet` component, in addition to the variants, also has access to the `color` prop, allowing you to use every palette of the theme. + +{{"demo": "SimpleSheet.js"}} diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts index dc228f172e50bb..1875758257a596 100644 --- a/docs/data/joy/pages.ts +++ b/docs/data/joy/pages.ts @@ -48,7 +48,7 @@ const pages = [ { pathname: '/joy-ui/components/surfaces', subheader: 'surfaces', - children: [{ pathname: '/joy-ui/react-card' }], + children: [{ pathname: '/joy-ui/react-card' }, { pathname: '/joy-ui/react-sheet' }], }, { pathname: '/joy-ui/components/navigation', diff --git a/docs/pages/experiments/joy/sheet.tsx b/docs/pages/experiments/joy/sheet.tsx index e097cf5945fbde..10e991e6f3cebf 100644 --- a/docs/pages/experiments/joy/sheet.tsx +++ b/docs/pages/experiments/joy/sheet.tsx @@ -1,4 +1,5 @@ import Moon from '@mui/icons-material/DarkMode'; +import Info from '@mui/icons-material/InfoOutlined'; import Sun from '@mui/icons-material/LightMode'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; @@ -7,7 +8,6 @@ import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; import Typography from '@mui/joy/Typography'; import { GlobalStyles } from '@mui/system'; import * as React from 'react'; -import Info from '@mui/icons-material/InfoOutlined'; const ColorSchemePicker = () => { const { mode, setMode } = useColorScheme(); @@ -40,7 +40,6 @@ export default function JoySheet() { const SheetProps = { variant: ['plain', 'outlined', 'soft', 'solid'], color: ['primary', 'neutral', 'danger', 'info', 'success', 'warning'], - elevation: ['xs', 'sm', 'md', 'lg', 'xl'], } as const; return ( @@ -52,10 +51,7 @@ export default function JoySheet() { - + ; +} diff --git a/packages/mui-joy/src/Sheet/Sheet.spec.tsx b/packages/mui-joy/src/Sheet/Sheet.spec.tsx index 9191bd58531f69..cd6a10f90b2e2e 100644 --- a/packages/mui-joy/src/Sheet/Sheet.spec.tsx +++ b/packages/mui-joy/src/Sheet/Sheet.spec.tsx @@ -19,18 +19,8 @@ import * as React from 'react'; ; ; -// `elevation` -; -; -; -; -; - // @ts-expect-error there is no variant `filled` ; // @ts-expect-error there is no color `secondary` ; - -// @ts-expect-error there is no elevation `xl2` -; diff --git a/packages/mui-joy/src/Sheet/Sheet.test.js b/packages/mui-joy/src/Sheet/Sheet.test.js index 187fa4eaf49f24..dac9eb34a6265d 100644 --- a/packages/mui-joy/src/Sheet/Sheet.test.js +++ b/packages/mui-joy/src/Sheet/Sheet.test.js @@ -59,27 +59,4 @@ describe('', () => { }); }); }); - - describe('prop: elevation', () => { - it('undefined by default', () => { - const { getByTestId } = render(Hello World); - - expect(getByTestId('root')).not.to.have.class(classes.elevationXs); - expect(getByTestId('root')).not.to.have.class(classes.elevationSm); - expect(getByTestId('root')).not.to.have.class(classes.elevationMd); - expect(getByTestId('root')).not.to.have.class(classes.elevationLg); - expect(getByTestId('root')).not.to.have.class(classes.elevationXl); - }); - ['xs', 'sm', 'md', 'lg', 'xl'].forEach((elevation) => { - it(`should render ${elevation}`, () => { - const { getByTestId } = render( - - Hello World - , - ); - - expect(getByTestId('root')).to.have.class(classes[`elevation${capitalize(elevation)}`]); - }); - }); - }); }); diff --git a/packages/mui-joy/src/Sheet/Sheet.tsx b/packages/mui-joy/src/Sheet/Sheet.tsx index 6897817704629b..4bf85e258c184f 100644 --- a/packages/mui-joy/src/Sheet/Sheet.tsx +++ b/packages/mui-joy/src/Sheet/Sheet.tsx @@ -5,20 +5,19 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; import { useThemeProps } from '../styles'; -import { resolveSxValue } from '../styles/styleUtils'; import styled from '../styles/styled'; +import { resolveSxValue } from '../styles/styleUtils'; import { getSheetUtilityClass } from './sheetClasses'; import { SheetProps, SheetTypeMap } from './SheetProps'; const useUtilityClasses = (ownerState: SheetProps) => { - const { elevation, variant, color } = ownerState; + const { variant, color } = ownerState; const slots = { root: [ 'root', variant && `variant${capitalize(variant)}`, color && `color${capitalize(color)}`, - elevation && `elevation${capitalize(elevation)}`, ], }; @@ -43,7 +42,6 @@ const SheetRoot = styled('div', { // TODO: discuss the theme transition. // This value is copied from mui-material Sheet. transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', - boxShadow: theme.vars.shadow[ownerState.elevation!], backgroundColor: theme.vars.palette.background.body, position: 'relative', }, @@ -57,20 +55,12 @@ const Sheet = React.forwardRef(function Sheet(inProps, ref) { name: 'JoySheet', }); - const { - className, - color = 'neutral', - component = 'div', - variant = 'plain', - elevation, - ...other - } = props; + const { className, color = 'neutral', component = 'div', variant = 'plain', ...other } = props; const ownerState = { ...props, color, component, - elevation, variant, }; @@ -113,14 +103,6 @@ Sheet.propTypes /* remove-proptypes */ = { * Either a string to use a HTML element or a component. */ component: PropTypes.elementType, - /** - * Shadow depth, corresponds to the `theme.shadow` scale. - * It accepts theme values between 'xs' and 'xl'. - */ - elevation: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']), - PropTypes.string, - ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-joy/src/Sheet/SheetProps.ts b/packages/mui-joy/src/Sheet/SheetProps.ts index fcd5258f073e18..993305b7657764 100644 --- a/packages/mui-joy/src/Sheet/SheetProps.ts +++ b/packages/mui-joy/src/Sheet/SheetProps.ts @@ -1,6 +1,6 @@ import { OverridableStringUnion, OverrideProps } from '@mui/types'; import * as React from 'react'; -import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types'; +import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types'; export type SheetSlot = 'root'; @@ -18,11 +18,6 @@ export interface SheetTypeMap

{ * @default 'neutral' */ color?: OverridableStringUnion; - /** - * Shadow depth, corresponds to the `theme.shadow` scale. - * It accepts theme values between 'xs' and 'xl'. - */ - elevation?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-joy/src/Sheet/sheetClasses.ts b/packages/mui-joy/src/Sheet/sheetClasses.ts index a4f7d8cb2839f6..a6d78654abba3d 100644 --- a/packages/mui-joy/src/Sheet/sheetClasses.ts +++ b/packages/mui-joy/src/Sheet/sheetClasses.ts @@ -23,16 +23,6 @@ export interface SheetClasses { variantSoft: string; /** Styles applied to the root element if `variant="solid"`. */ variantSolid: string; - /** Styles applied to the root element if `elevation="xs"`. */ - elevationXs: string; - /** Styles applied to the root element if `elevation="sm"`. */ - elevationSm: string; - /** Styles applied to the root element if `elevation="md"`. */ - elevationMd: string; - /** Styles applied to the root element if `elevation="lg"`. */ - elevationLg: string; - /** Styles applied to the root element if `elevation="xl"`. */ - elevationXl: string; } export type SheetClassKey = keyof SheetClasses; @@ -53,11 +43,6 @@ const sheetClasses: SheetClasses = generateUtilityClasses('JoySheet', [ 'variantOutlined', 'variantSoft', 'variantSolid', - 'elevationXs', - 'elevationSm', - 'elevationMd', - 'elevationLg', - 'elevationXl', ]); export default sheetClasses;