Skip to content

Commit

Permalink
[docs-infra] Standardize api warning styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@DiegoAndai
DiegoAndai committed Jan 9, 2024
1 parent 108b621 commit 2adc9dd
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 185 deletions.
79 changes: 79 additions & 0 deletions docs/src/modules/components/ApiPage/ApiAlert.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<StyledAlert
className={className}
severity="warning"
icon={<WarningRoundedIcon fontSize="small" />}
>
{children}
</StyledAlert>
);
}
38 changes: 14 additions & 24 deletions docs/src/modules/components/ApiPage/list/ClassesList.tsx
View file
Original file line number Diff line number Diff line change
@@ -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, {
Expand All @@ -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 }) => ({
Expand All @@ -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'}) &`]: {
Expand Down Expand Up @@ -88,24 +88,8 @@ export default function ClassesList(props: ClassesListProps) {
className={isDeprecated ? 'classes-list-deprecated-item' : ''}
>
{description && <p dangerouslySetInnerHTML={{ __html: description }} />}
{displayClassKeys && !isGlobal && (
<p className="prop-list-class">
<span className="prop-list-title">{'Rule name'}:</span>
<code className="Api-code">{key}</code>
</p>
)}
{isDeprecated && (
<Alert
className="MuiApi-collapsible classes-list-alert"
severity="warning"
icon={<WarningRoundedIcon fontSize="small" />}
sx={{
'& .MuiAlert-icon': {
height: 'fit-content',
py: '8px',
},
}}
>
<ApiAlert className="MuiApi-collapsible classes-list-alert">
{t('api-docs.deprecated')}
{deprecationInfo && (
<React.Fragment>
Expand All @@ -117,7 +101,13 @@ export default function ClassesList(props: ClassesListProps) {
/>
</React.Fragment>
)}
</Alert>
</ApiAlert>
)}
{displayClassKeys && !isGlobal && (
<p className="prop-list-class">
<span className="prop-list-title">{'Rule name'}:</span>
<code className="Api-code">{key}</code>
</p>
)}
</StyledApiItem>
);
Expand Down
23 changes: 0 additions & 23 deletions docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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})`,
Expand Down
39 changes: 10 additions & 29 deletions docs/src/modules/components/ApiPage/list/PropertiesList.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 }) => ({
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -193,22 +193,13 @@ export default function PropertiesList(props: PropertiesListProps) {
>
{description && <PropDescription description={description} />}
{requiresRef && (
<Alert
severity="warning"
icon={<WarningRoundedIcon fontSize="small" />}
sx={{
'& .MuiAlert-icon': {
height: 'fit-content',
py: '8px',
},
}}
>
<ApiAlert className="MuiApi-collapsible prop-list-alert">
<span
dangerouslySetInnerHTML={{
__html: t('api-docs.requires-ref'),
}}
/>
</Alert>
</ApiAlert>
)}
{additionalInfo.map((key) => (
<p
Expand All @@ -220,17 +211,7 @@ export default function PropertiesList(props: PropertiesListProps) {
/>
))}
{isDeprecated && (
<Alert
className="MuiApi-collapsible prop-list-alert"
severity="warning"
icon={<WarningRoundedIcon fontSize="small" />}
sx={{
'& .MuiAlert-icon': {
height: 'fit-content',
py: '8px',
},
}}
>
<ApiAlert className="MuiApi-collapsible prop-list-alert">
{t('api-docs.deprecated')}
{deprecationInfo && (
<React.Fragment>
Expand All @@ -242,7 +223,7 @@ export default function PropertiesList(props: PropertiesListProps) {
/>
</React.Fragment>
)}
</Alert>
</ApiAlert>
)}
<div className="prop-list-additional-info">
{typeName && (
Expand Down
49 changes: 3 additions & 46 deletions docs/src/modules/components/ApiPage/table/ClassesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => ({
Expand All @@ -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 }) => ({
Expand All @@ -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]})`,
},
},
},
}),
);
Expand Down Expand Up @@ -123,12 +85,7 @@ export default function ClassesTable(props: ClassesTableProps) {
}}
/>
{isDeprecated && (
<Alert
severity="warning"
className="classes-table-alert classes-table-deprecated"
icon={<WarningRoundedIcon fontSize="small" />}
sx={{ mb: 1, py: 0, alignItems: 'center' }}
>
<ApiAlert className="classes-table-alert">
{t('api-docs.deprecated')}
{deprecationInfo && (
<React.Fragment>
Expand All @@ -140,7 +97,7 @@ export default function ClassesTable(props: ClassesTableProps) {
/>
</React.Fragment>
)}
</Alert>
</ApiAlert>
)}
</td>
</tr>
Expand Down
Loading

0 comments on commit 2adc9dd

Please sign in to comment.