diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 25048e08e49254..2c4cabcc6d2666 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -1135,6 +1135,9 @@ export function getThemedComponents(): ThemeOptions { color: (theme.vars || theme).palette.primary[500], borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, backgroundColor: (theme.vars || theme).palette.primary[50], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, }, } as const, theme.applyDarkStyles({ diff --git a/docs/src/modules/components/ApiPage/list/ExpendableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpendableApiItem.tsx index 4b4ee6c7399fd5..3d15e8926d2687 100644 --- a/docs/src/modules/components/ApiPage/list/ExpendableApiItem.tsx +++ b/docs/src/modules/components/ApiPage/list/ExpendableApiItem.tsx @@ -113,9 +113,11 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>( ...theme.typography.caption, fontFamily: theme.typography.fontFamilyCode, fontWeight: theme.typography.fontWeightRegular, + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, padding: '1px 4px', + borderRadius: 6, border: '1px solid', - borderColor: alpha(darkTheme.palette.primary[100], 0.5), + borderColor: alpha(darkTheme.palette.primary[100], 0.8), backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, }, }), diff --git a/docs/src/modules/components/ApiPage/table/CSSTable.tsx b/docs/src/modules/components/ApiPage/table/CSSTable.tsx index 428c5ae5234ca0..c640c9e61170e3 100644 --- a/docs/src/modules/components/ApiPage/table/CSSTable.tsx +++ b/docs/src/modules/components/ApiPage/table/CSSTable.tsx @@ -6,22 +6,10 @@ import { brandingLightTheme as lightTheme, } from 'docs/src/modules/brandingTheme'; import { CSSFormatedParams, getHash } from 'docs/src/modules/components/ApiPage/list/CSSList'; +import StyledTableContainer from './StyledTableContainer'; const StyledTable = styled('table')( ({ theme }) => ({ - '& .table-headers': { - paddingTop: 8, - paddingBottom: 8, - textAlign: 'left', - fontWeight: theme.typography.fontWeightSemiBold, - fontSize: theme.typography.pxToRem(14), - }, - '& tr': { - scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', - '&:hover': { - backgroundColor: alpha(darkTheme.palette.grey[50], 0.5), - }, - }, '& .MuiApi-table-rule-name': { fontFamily: theme.typography.fontFamilyCode, fontWeight: theme.typography.fontWeightSemiBold, @@ -29,15 +17,15 @@ const StyledTable = styled('table')( color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, }, '& .MuiApi-table-ruleName': { - padding: '0 4px', - borderRadius: 5, - border: '1px solid', - borderColor: alpha(darkTheme.palette.primary[100], 0.5), - backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, ...theme.typography.caption, fontFamily: theme.typography.fontFamilyCode, fontWeight: theme.typography.fontWeightRegular, color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + padding: '1px 4px', + borderRadius: 6, + border: '1px solid', + borderColor: alpha(darkTheme.palette.primary[100], 0.8), + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, }, '& .MuiApi-table-global-class': { fontWeight: theme.typography.fontWeightSemiBold, @@ -52,11 +40,6 @@ const StyledTable = styled('table')( }), ({ theme }) => ({ [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { - '& tr': { - '&:hover': { - backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5), - }, - }, '& .MuiApi-table-ruleName': { color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, borderColor: alpha(darkTheme.palette.primary[400], 0.1), @@ -76,46 +59,48 @@ interface CSSTableProps { export default function CSSTable(props: CSSTableProps) { const { classes } = props; return ( - - - - Global class - Rule name - Description - - - - {classes.map((params) => { - const { componentName, className, selector, description } = params; + + + + + Global class + Rule name + Description + + + + {classes.map((params) => { + const { componentName, className, selector, description } = params; - return ( - - - { + return ( + + + { + + } + + + {className} + + + - } - - - {className} - - - - - - - ); - })} - - + + + ); + })} + + + ); } diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx index 388d7ccc357126..e76101f94d3214 100644 --- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-danger */ import * as React from 'react'; -import { styled, alpha } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, @@ -12,19 +12,6 @@ import { const StyledTable = styled('table')( ({ theme }) => ({ - '& .table-headers': { - paddingTop: 8, - paddingBottom: 8, - textAlign: 'left', - fontWeight: theme.typography.fontWeightSemiBold, - fontSize: theme.typography.pxToRem(14), - }, - '& tr': { - scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', - '&:hover': { - backgroundColor: alpha(darkTheme.palette.grey[50], 0.5), - }, - }, '& .rule-name': { flexShrink: 0, fontWeight: theme.typography.fontWeightSemiBold, @@ -35,11 +22,6 @@ const StyledTable = styled('table')( }), ({ theme }) => ({ [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { - '& tr': { - '&:hover': { - backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5), - }, - }, '& .rule-name': { color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, }, @@ -57,8 +39,8 @@ export default function ClassesTable(props: ClassesTableProps) { - Rule name - Description + Rule name + Description diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx index 3fc5db28a7080c..2592d1d0089fbf 100644 --- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx @@ -13,22 +13,10 @@ import { PropDescriptionParams, getHash, } from 'docs/src/modules/components/ApiPage/list/PropertiesList'; +import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer'; const StyledTable = styled('table')( ({ theme }) => ({ - '& .table-headers': { - paddingTop: 8, - paddingBottom: 8, - textAlign: 'left', - fontWeight: theme.typography.fontWeightSemiBold, - fontSize: theme.typography.pxToRem(14), - }, - '& tr': { - scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', - '&:hover': { - backgroundColor: alpha(darkTheme.palette.grey[50], 0.5), - }, - }, '& .type-column': { minWidth: '20%', }, @@ -43,25 +31,26 @@ const StyledTable = styled('table')( color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, }, '& .MuiApi-table-item-type': { - padding: '0 4px', - borderRadius: 5, - border: '1px solid', - borderColor: alpha(darkTheme.palette.primary[100], 0.5), - backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, ...theme.typography.caption, fontFamily: theme.typography.fontFamilyCode, fontWeight: theme.typography.fontWeightRegular, - }, - '& .MuiApi-table-item-default': { - padding: '0 4px', - borderRadius: 5, color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, - backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, + padding: '1px 4px', + borderRadius: 6, border: '1px solid', - borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, + borderColor: alpha(darkTheme.palette.primary[100], 0.8), + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + }, + '& .MuiApi-table-item-default': { ...theme.typography.caption, fontFamily: theme.typography.fontFamilyCode, fontWeight: theme.typography.fontWeightRegular, + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + padding: '1px 4px', + borderRadius: 6, + border: '1px solid', + borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, + backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, }, '& .MuiPropTable-description-column': { width: '40%', @@ -82,6 +71,9 @@ const StyledTable = styled('table')( color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, backgroundColor: alpha(lightTheme.palette.warning[50], 0.5), borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`, + '& .MuiAlert-icon': { + padding: 0, + }, '& strong': { color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, }, @@ -110,11 +102,6 @@ const StyledTable = styled('table')( }), ({ theme }) => ({ [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { - '& tr': { - '&:hover': { - backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5), - }, - }, '& .MuiApi-table-item-title': { color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, }, @@ -180,154 +167,156 @@ export default function PropertiesTable(props: PropertiesTableProps) { const { properties } = props; const t = useTranslate(); return ( - - - - Name - Type - Default - Description - - - - {properties.map((params) => { - const { - targetName, - propName, - description, - requiresRef, - isOptional, - isRequired, - isDeprecated, - hooksParameters, - hooksReturnValue, - deprecationInfo, - typeName, - propDefault, - additionalInfo, - signature, - signatureArgs, - signatureReturnDescription, - } = params; + + + + + Name + Type + Default + Description + + + + {properties.map((params) => { + const { + targetName, + propName, + description, + requiresRef, + isOptional, + isRequired, + isDeprecated, + hooksParameters, + hooksReturnValue, + deprecationInfo, + typeName, + propDefault, + additionalInfo, + signature, + signatureArgs, + signatureReturnDescription, + } = params; - return ( - - - {propName} - {isRequired ? '*' : ''} - {isOptional ? '?' : ''} - - - { - - } - - - {propDefault} - - - {description && } - {requiresRef && ( - } - sx={{ - alignItems: 'center', - '& .MuiAlert-icon': { - height: 'fit-content', - p: 0, - mr: 1, - mb: 0.3, - }, - }} - > + return ( + + + {propName} + {isRequired ? '*' : ''} + {isOptional ? '?' : ''} + + + { - - )} - {additionalInfo.map((key) => ( -

- ))} - {isDeprecated && ( - } - > - {t('api-docs.deprecated')} - {deprecationInfo && ( - - {' - '} - - - )} - - )} - {signature && ( -

- {t('api-docs.signature')}: - - + + {propDefault} + + + {description && } + {requiresRef && ( + } + sx={{ + alignItems: 'center', + '& .MuiAlert-icon': { + height: 'fit-content', + p: 0, + mr: 1, + mb: 0.3, + }, + }} + > + + + )} + {additionalInfo.map((key) => ( +

+ ))} + {isDeprecated && ( + } + sx={{ mb: 1, py: 0, alignItems: 'center' }} + > + {t('api-docs.deprecated')} + {deprecationInfo && ( + + {' - '} + + + )} + + )} + {signature && ( +

+ {t('api-docs.signature')}: + + - {signatureArgs && ( -
-
    - {signatureArgs.map(({ argName, argDescription }) => ( -
  • ${argName} ${argDescription}`, - }} - /> - ))} -
-
- )} - {signatureReturnDescription && ( -

- {t('api-docs.returns')} - -

- )} -
- )} - - - ); - })} - - + {signatureArgs && ( +
+
    + {signatureArgs.map(({ argName, argDescription }) => ( +
  • ${argName} ${argDescription}`, + }} + /> + ))} +
+
+ )} + {signatureReturnDescription && ( +

+ {t('api-docs.returns')} + +

+ )} +
+ )} + + + ); + })} + + + ); } diff --git a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx index 8756002372de7d..60f7a1f7a1fe20 100644 --- a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx +++ b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx @@ -6,22 +6,10 @@ import { brandingLightTheme as lightTheme, } from 'docs/src/modules/brandingTheme'; import { SlotsFormatedParams, getHash } from 'docs/src/modules/components/ApiPage/list/SlotsList'; +import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer'; const StyledTable = styled('table')( ({ theme }) => ({ - '& .table-headers': { - paddingTop: 8, - paddingBottom: 8, - textAlign: 'left', - fontWeight: theme.typography.fontWeightSemiBold, - fontSize: theme.typography.pxToRem(14), - }, - '& tr': { - scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', - '&:hover': { - backgroundColor: alpha(darkTheme.palette.grey[50], 0.5), - }, - }, '& .slot-name': { fontFamily: theme.typography.fontFamilyCode, fontWeight: theme.typography.fontWeightSemiBold, @@ -29,25 +17,26 @@ const StyledTable = styled('table')( color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, }, '& .class-name': { - padding: '0 4px', - borderRadius: 5, - border: '1px solid', - borderColor: alpha(darkTheme.palette.primary[100], 0.5), - backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, ...theme.typography.caption, fontFamily: theme.typography.fontFamilyCode, fontWeight: theme.typography.fontWeightRegular, - }, - '& .item-default': { - padding: '0 4px', - borderRadius: 5, color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, - backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, + padding: '1px 4px', + borderRadius: 6, border: '1px solid', - borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, + borderColor: alpha(darkTheme.palette.primary[100], 0.8), + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + }, + '& .item-default': { ...theme.typography.caption, fontFamily: theme.typography.fontFamilyCode, fontWeight: theme.typography.fontWeightRegular, + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + padding: '1px 4px', + borderRadius: 6, + border: '1px solid', + borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, + backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, }, '& .description-column': { width: '40%', @@ -56,11 +45,6 @@ const StyledTable = styled('table')( }), ({ theme }) => ({ [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { - '& tr': { - '&:hover': { - backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5), - }, - }, '& .slot-name': { color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, }, @@ -85,39 +69,41 @@ interface SlotsTableProps { export default function SlotsTable(props: SlotsTableProps) { const { slots } = props; return ( - - - - Slot name - Class name - Default - Description - - - - {slots.map((params) => { - const { description, className, name, defaultValue, componentName } = params; + + + + + Slot name + Class name + Default + Description + + + + {slots.map((params) => { + const { description, className, name, defaultValue, componentName } = params; - return ( - - - {name} - - - {className} - - {defaultValue && {defaultValue}} - - - - - ); - })} - - + return ( + + + {name} + + + {className} + + {defaultValue && {defaultValue}} + + + + + ); + })} + + + ); } diff --git a/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx b/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx new file mode 100644 index 00000000000000..02635b219ccff5 --- /dev/null +++ b/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx @@ -0,0 +1,64 @@ +import { styled, alpha } from '@mui/material/styles'; +import { brandingDarkTheme as darkTheme } from 'docs/src/modules/brandingTheme'; + +const StyledTableContainer = styled('div')( + ({ theme }) => ({ + overflow: 'hidden', + '& table': { + borderRadius: '10px', + marginLeft: -1, + marginRight: -1, + background: [ + 'linear-gradient(to right, rgb(255, 255, 255) 5%, rgba(255, 255, 255, 0) 90%) local', + 'linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 100%) 100% center local', + `linear-gradient(to right, ${alpha( + theme.palette.grey[500], + 0.5, + )}, rgba(0, 0, 0, 0) 5%) scroll`, + `linear-gradient(to left, ${alpha( + theme.palette.grey[500], + 0.2, + )}, rgba(0, 0, 0, 0) 5%) scroll`, + ].join(', '), + }, + '&& th': { + paddingTop: 8, + paddingBottom: 8, + textAlign: 'left', + fontWeight: theme.typography.fontWeightSemiBold, + fontSize: theme.typography.pxToRem(14), + }, + '& tr': { + scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', + '&:hover': { + backgroundColor: alpha(darkTheme.palette.grey[50], 0.5), + }, + '& .MuiPropTable-description-column': { + minWidth: 400, + }, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& table': { + background: [ + `linear-gradient(to right, ${theme.palette.primaryDark[900]} 5%, ${alpha( + theme.palette.primaryDark[900], + 0, + )} 80%) local`, + `linear-gradient(to right, ${alpha(theme.palette.primaryDark[900], 0)}, ${ + theme.palette.primaryDark[900] + } 100%) 100% center local`, + `linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 10%) scroll`, + 'linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 10%) scroll', + ].join(', '), + }, + '& tr': { + '&:hover': { + backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5), + }, + }, + }, + }), +); +export default StyledTableContainer;