Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[List] Add button runtime deprecation warning #26743

Merged
merged 6 commits into from
Jul 1, 2021
Merged

[List] Add button runtime deprecation warning #26743

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bea598a
add initial deprecation
siriwatknp Jun 14, 2021
69565e5
Merge branch 'next' of https://github.com/mui-org/material-ui into fi…
siriwatknp Jun 25, 2021
18efe17
add deprecation to api-docs
siriwatknp Jun 25, 2021
6ba26ff
Revert "add initial deprecation"
siriwatknp Jun 25, 2021
1597588
update deprecation to support markdown
siriwatknp Jun 28, 2021
fdd0632
remove Tooltip
siriwatknp Jun 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions docs/pages/api-docs/list-item.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,16 @@
"type": { "name": "enum", "description": "'center'<br>&#124;&nbsp;'flex-start'" },
"default": "'center'"
},
"autoFocus": { "type": { "name": "bool" } },
"button": { "type": { "name": "bool" } },
"autoFocus": {
"type": { "name": "bool" },
"deprecated": true,
"deprecationInfo": "checkout `ListItemButton` instead"
},
"button": {
"type": { "name": "bool" },
"deprecated": true,
"deprecationInfo": "checkout `ListItemButton` instead"
},
"children": { "type": { "name": "custom", "description": "node" } },
"classes": { "type": { "name": "object" } },
"component": { "type": { "name": "elementType" } },
Expand All @@ -16,16 +24,25 @@
"componentsProps": { "type": { "name": "object" }, "default": "{}" },
"ContainerComponent": {
"type": { "name": "custom", "description": "element type" },
"default": "'li'"
"default": "'li'",
"deprecated": true
},
"ContainerProps": { "type": { "name": "object" }, "default": "{}" },
"ContainerProps": { "type": { "name": "object" }, "default": "{}", "deprecated": true },
"dense": { "type": { "name": "bool" } },
"disabled": { "type": { "name": "bool" } },
"disabled": {
"type": { "name": "bool" },
"deprecated": true,
"deprecationInfo": "checkout `ListItemButton` instead"
},
"disableGutters": { "type": { "name": "bool" } },
"disablePadding": { "type": { "name": "bool" } },
"divider": { "type": { "name": "bool" } },
"secondaryAction": { "type": { "name": "node" } },
"selected": { "type": { "name": "bool" } },
"selected": {
"type": { "name": "bool" },
"deprecated": true,
"deprecationInfo": "checkout `ListItemButton` instead"
},
"sx": { "type": { "name": "object" } }
},
"name": "ListItem",
Expand Down
6 changes: 6 additions & 0 deletions docs/scripts/buildApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -833,6 +833,8 @@ async function buildDocs(options: {
default: string | undefined;
required: boolean | undefined;
type: { name: string | undefined; description: string | undefined };
deprecated: true | undefined;
deprecationInfo: string | undefined;
}>(
Object.entries(reactApi.props).map(([propName, propDescriptor]) => {
let prop: DescribeablePropDescriptor | null;
Expand Down Expand Up @@ -874,6 +876,8 @@ async function buildDocs(options: {
/\.isRequired/.test(prop.type.raw) ||
(chainedPropType !== false && chainedPropType.required);

const deprecation = (propDescriptor.description || '').match(/@deprecated(\s+(?<info>.*))?/);

return [
propName,
{
Expand All @@ -885,6 +889,8 @@ async function buildDocs(options: {
default: defaultValue,
// undefined values are not serialized => saving some bytes
required: requiredProp || undefined,
deprecated: !!deprecation || undefined,
deprecationInfo: (deprecation?.groups?.info || '').trim() || undefined,
},
];
}),
Expand Down
35 changes: 27 additions & 8 deletions docs/src/modules/components/ApiPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { exactProp } from '@material-ui/utils';
import { styled } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
import InfoOutlined from '@material-ui/icons/InfoOutlined';

const Asterisk = styled('abbr')(({ theme }) => ({ color: theme.palette.error.main }));
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved

function PropsTable(props) {
const { componentProps, propDescriptions } = props;
Expand All @@ -31,14 +36,28 @@ function PropsTable(props) {
propData.description !== '@ignore' && (
<tr key={propName}>
<td align="left">
<span className={clsx('prop-name', propData.required ? 'required' : null)}>
{propName}
{propData.required ? (
<sup>
<abbr title="required">*</abbr>
</sup>
) : null}
</span>
<Tooltip arrow title={propData.deprecationInfo || ''} placement="bottom-start">
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
<span className={clsx('prop-name', propData.required ? 'required' : null)}>
<Typography
variant="body2"
sx={{
display: 'inline-block',
textDecoration: propData.deprecated ? 'line-through' : 'auto',
fontFamily: 'inherit',
}}
>
{propName}
</Typography>
{propData.required && (
<sup>
<Asterisk title="required">*</Asterisk>
</sup>
)}
{propData.deprecationInfo && (
<InfoOutlined sx={{ fontSize: 18, color: 'secondary.main' }} />
)}
</span>
</Tooltip>
</td>
<td align="left">
<span
Expand Down