From 2adc9dd7ce47dafa316f09308395621df1603034 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Tue, 9 Jan 2024 14:34:39 -0300 Subject: [PATCH] [docs-infra] Standardize api warning styles --- .../modules/components/ApiPage/ApiAlert.tsx | 79 +++++++++++++++++++ .../components/ApiPage/list/ClassesList.tsx | 38 ++++----- .../ApiPage/list/ExpandableApiItem.tsx | 23 ------ .../ApiPage/list/PropertiesList.tsx | 39 +++------ .../components/ApiPage/table/ClassesTable.tsx | 49 +----------- .../ApiPage/table/PropertiesTable.tsx | 68 ++-------------- 6 files changed, 111 insertions(+), 185 deletions(-) create mode 100644 docs/src/modules/components/ApiPage/ApiAlert.tsx diff --git a/docs/src/modules/components/ApiPage/ApiAlert.tsx b/docs/src/modules/components/ApiPage/ApiAlert.tsx new file mode 100644 index 00000000000000..ab733a8ed17796 --- /dev/null +++ b/docs/src/modules/components/ApiPage/ApiAlert.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import { alpha } from '@mui/system'; +import { styled } from '@mui/material/styles'; +import Alert from '@mui/material/Alert'; +import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; +import { + brandingDarkTheme as darkTheme, + brandingLightTheme as lightTheme, +} from 'docs/src/modules/brandingTheme'; + +const StyledAlert = styled(Alert)( + ({ theme }) => ({ + '&.MuiAlert-standardWarning': { + alignItems: 'center', + padding: '2px 12px', + fontWeight: theme.typography.fontWeightRegular, + 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': { + height: 'fit-content', + padding: 0, + }, + '& code': { all: 'unset' }, + '& strong': { + color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, + }, + '& svg': { + fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`, + }, + '& a': { + color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, + textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4), + '&:hover': { + textDecorationColor: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, + }, + }, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '&.MuiAlert-standardWarning': { + color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`, + backgroundColor: alpha(darkTheme.palette.warning[700], 0.15), + borderColor: alpha(darkTheme.palette.warning[600], 0.3), + '& strong': { + color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`, + }, + '& svg': { + fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`, + }, + '& a': { + color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`, + textDecorationColor: alpha(darkTheme.palette.warning.main, 0.4), + '&:hover': { + textDecorationColor: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`, + }, + }, + }, + }, + }), +); + +interface DeprecationAlertProps { + children?: React.ReactNode; + className?: string; +} + +export default function ApiAlert({ children, className }: DeprecationAlertProps) { + return ( + } + > + {children} + + ); +} diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx index 8e9f13b2939a81..7bd5febc8ea003 100644 --- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx +++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx @@ -1,8 +1,6 @@ /* eslint-disable react/no-danger */ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Alert from '@mui/material/Alert'; -import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; import { ComponentClassDefinition } from '@mui-internal/docs-utilities'; import { useTranslate } from 'docs/src/modules/utils/i18n'; import ExpandableApiItem, { @@ -12,6 +10,7 @@ import { brandingLightTheme as lightTheme, brandingDarkTheme as darkTheme, } from 'docs/src/modules/brandingTheme'; +import ApiAlert from 'docs/src/modules/components/ApiPage/ApiAlert'; const StyledApiItem = styled(ExpandableApiItem)( ({ theme }) => ({ @@ -31,12 +30,13 @@ const StyledApiItem = styled(ExpandableApiItem)( }, '&.classes-list-deprecated-item': { '& .MuiApi-item-note': { - color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, - }, - '& .classes-list-alert': { - '& code': { all: 'unset' }, + color: `var(--muidocs-palette-warning-700, ${lightTheme.palette.warning[700]})`, }, }, + '& .classes-list-alert': { + marginTop: 12, + marginBottom: 16, + }, }), ({ theme }) => ({ [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { @@ -88,24 +88,8 @@ export default function ClassesList(props: ClassesListProps) { className={isDeprecated ? 'classes-list-deprecated-item' : ''} > {description &&

} - {displayClassKeys && !isGlobal && ( -

- {'Rule name'}: - {key} -

- )} {isDeprecated && ( - } - sx={{ - '& .MuiAlert-icon': { - height: 'fit-content', - py: '8px', - }, - }} - > + {t('api-docs.deprecated')} {deprecationInfo && ( @@ -117,7 +101,13 @@ export default function ClassesList(props: ClassesListProps) { /> )} - + + )} + {displayClassKeys && !isGlobal && ( +

+ {'Rule name'}: + {key} +

)} ); diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx index be8c66d1c193ca..8fdeadaf42148b 100644 --- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx +++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx @@ -93,21 +93,6 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>( }, }, }, - '& .MuiAlert-standardWarning': { - padding: '6px 12px', - fontWeight: theme.typography.fontWeightMedium, - border: '1px solid', - borderColor: `var(--muidocs-palette-warning-300, ${lightTheme.palette.warning[300]})`, - borderRadius: 12, - backgroundColor: `var(--muidocs-palette-warning-50, ${lightTheme.palette.warning[50]})`, - color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, - marginBottom: 16, - '.MuiAlert-icon': { - display: 'flex', - alignItems: 'center', - fill: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, - }, - }, '& code.Api-code': { ...theme.typography.caption, fontFamily: theme.typography.fontFamilyCode, @@ -152,14 +137,6 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>( color: `var(--muidocs-palette-success-400, ${darkTheme.palette.success[400]})`, }, }, - '& .MuiAlert-standardWarning': { - borderColor: alpha(darkTheme.palette.warning[800], 0.3), - backgroundColor: alpha(darkTheme.palette.warning[800], 0.2), - color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`, - '.MuiAlert-icon svg': { - fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`, - }, - }, '& code.Api-code': { color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx index 38031ca5b91540..72dc0880817987 100644 --- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx +++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx @@ -1,8 +1,6 @@ /* eslint-disable react/no-danger */ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Alert from '@mui/material/Alert'; -import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; import { useTranslate } from 'docs/src/modules/utils/i18n'; import { brandingDarkTheme as darkTheme, @@ -11,6 +9,7 @@ import { import ExpandableApiItem, { ApiItemContaier, } from 'docs/src/modules/components/ApiPage/list/ExpandableApiItem'; +import ApiAlert from 'docs/src/modules/components/ApiPage/ApiAlert'; const StyledApiItem = styled(ExpandableApiItem)( ({ theme }) => ({ @@ -38,12 +37,13 @@ const StyledApiItem = styled(ExpandableApiItem)( }, '&.prop-list-deprecated-item': { '& .MuiApi-item-note': { - color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, - }, - '& .prop-list-alert': { - '& code': { all: 'unset' }, + color: `var(--muidocs-palette-warning-700, ${lightTheme.palette.warning[700]})`, }, }, + '& .prop-list-alert': { + marginTop: 12, + marginBottom: 16, + }, '& .prop-list-default-props': { ...theme.typography.body2, fontWeight: theme.typography.fontWeightSemiBold, @@ -193,22 +193,13 @@ export default function PropertiesList(props: PropertiesListProps) { > {description && } {requiresRef && ( - } - sx={{ - '& .MuiAlert-icon': { - height: 'fit-content', - py: '8px', - }, - }} - > + - + )} {additionalInfo.map((key) => (

))} {isDeprecated && ( - } - sx={{ - '& .MuiAlert-icon': { - height: 'fit-content', - py: '8px', - }, - }} - > + {t('api-docs.deprecated')} {deprecationInfo && ( @@ -242,7 +223,7 @@ export default function PropertiesList(props: PropertiesListProps) { /> )} - + )}

{typeName && ( diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx index 7a78f98eb9c5ad..0fb9293367f204 100644 --- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx @@ -2,14 +2,13 @@ import * as React from 'react'; import { ComponentClassDefinition } from '@mui-internal/docs-utilities'; import { styled, alpha } from '@mui/material/styles'; -import Alert from '@mui/material/Alert'; -import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, } from 'docs/src/modules/brandingTheme'; import { getHash } from 'docs/src/modules/components/ApiPage/list/ClassesList'; import { useTranslate } from 'docs/src/modules/utils/i18n'; +import ApiAlert from 'docs/src/modules/components/ApiPage/ApiAlert'; const StyledTable = styled('table')( ({ theme }) => ({ @@ -32,31 +31,8 @@ const StyledTable = styled('table')( borderColor: alpha(darkTheme.palette.primary[100], 0.8), backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, }, - '& .classes-table-deprecated': { - '& code ': { all: 'unset' }, - }, '& .classes-table-alert': { - padding: '2px 12px', marginTop: 12, - 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]})`, - }, - '&>svg': { - fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`, - }, - '& a': { - color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, - textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4), - '&:hover': { - textDecorationColor: 'inherit', - }, - }, }, }), ({ theme }) => ({ @@ -69,20 +45,6 @@ const StyledTable = styled('table')( borderColor: alpha(darkTheme.palette.primary[400], 0.1), backgroundColor: alpha(darkTheme.palette.primary[900], 0.4), }, - '& .classes-table-alert': { - color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`, - backgroundColor: alpha(darkTheme.palette.warning[700], 0.15), - borderColor: alpha(darkTheme.palette.warning[600], 0.3), - '& strong': { - color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`, - }, - '&>svg': { - fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`, - }, - '& a': { - color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`, - }, - }, }, }), ); @@ -123,12 +85,7 @@ export default function ClassesTable(props: ClassesTableProps) { }} /> {isDeprecated && ( - } - sx={{ mb: 1, py: 0, alignItems: 'center' }} - > + {t('api-docs.deprecated')} {deprecationInfo && ( @@ -140,7 +97,7 @@ export default function ClassesTable(props: ClassesTableProps) { /> )} - + )} diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx index 320781d92491a4..3048c0c7e801f0 100644 --- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx @@ -1,8 +1,6 @@ /* eslint-disable react/no-danger */ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; -import Alert from '@mui/material/Alert'; -import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; import { useTranslate } from 'docs/src/modules/utils/i18n'; import { brandingDarkTheme as darkTheme, @@ -13,6 +11,7 @@ import { getHash, } from 'docs/src/modules/components/ApiPage/list/PropertiesList'; import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer'; +import ApiAlert from 'docs/src/modules/components/ApiPage/ApiAlert'; const StyledTable = styled('table')( ({ theme }) => ({ @@ -61,31 +60,8 @@ const StyledTable = styled('table')( marginTop: 12, marginBottom: 0, }, - '& .prop-table-deprecated': { - '& code ': { all: 'unset' }, - }, '& .prop-table-alert': { - padding: '2px 12px', marginTop: 12, - 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]})`, - }, - '&>svg': { - fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`, - }, - '& a': { - color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, - textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4), - '&:hover': { - textDecorationColor: 'inherit', - }, - }, }, }, '& .prop-table-signature': { @@ -119,22 +95,6 @@ const StyledTable = styled('table')( color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, }, }, - '& .MuiPropTable-description-column': { - '& .prop-table-alert': { - color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`, - backgroundColor: alpha(darkTheme.palette.warning[700], 0.15), - borderColor: alpha(darkTheme.palette.warning[600], 0.3), - '& strong': { - color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`, - }, - '&>svg': { - fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`, - }, - '& a': { - color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`, - }, - }, - }, }, }), ); @@ -219,26 +179,13 @@ export default function PropertiesTable(props: PropertiesTableProps) { {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 && ( @@ -267,7 +209,7 @@ export default function PropertiesTable(props: PropertiesTableProps) { /> )} - + )} {signature && (