Add deprecated styling on deprecated props (#225)

* add deprecated styling

* docs(changeset): Changed the heading styles for deprecated props and removed "@deprecated" from the prop description.

* add a deprecated prop to story examples

Co-authored-by: mengX666 <[email protected]>

Author: mengX666

.changeset/angry-pets-hammer.md

@@ -0,0 +1,5 @@
+---
+'pretty-proptypes': patch
+---
+
+Changed the heading styles for deprecated props and removed "@deprecated" from the prop description.

packages/pretty-proptypes/src/HybridLayout/index.js

@@ -9,7 +9,13 @@ import { Component, type Node } from 'react';
 import md from 'react-markings';
 import PropsWrapper from '../Props/Wrapper';
 import LayoutRenderer, { type LayoutRendererProps } from '../LayoutRenderer';
-import { HeadingType, HeadingDefault, Heading, HeadingRequired } from '../Prop/Heading';
+import {
+  HeadingType,
+  HeadingDefault,
+  Heading,
+  HeadingRequired,
+  HeadingDeprecated
+} from '../Prop/Heading';
 import { colors } from '../components/constants';
 
 type DynamicPropsProps = LayoutRendererProps & {
@@ -46,6 +52,7 @@ export default class HybridLayout extends Component<DynamicPropsProps> {
             defaultValue,
             description,
             required,
+            deprecated,
             name,
             type,
             componentDisplayName,
@@ -103,6 +110,7 @@ export default class HybridLayout extends Component<DynamicPropsProps> {
                       padding: 4px 8px;
                       line-height: 20px;
                       display: inline-block;
+                      text-decoration: ${deprecated ? 'line-through' : 'none'};
                     `}
                   >
                     {name}
@@ -117,12 +125,28 @@ export default class HybridLayout extends Component<DynamicPropsProps> {
                       required
                     </HeadingRequired>
                   )}
+                  {deprecated && (
+                    <HeadingDeprecated
+                      css={css`
+                        margin-left: 1em;
+                        color: ${colors.N300};
+                      `}
+                    >
+                      deprecated
+                    </HeadingDeprecated>
+                  )}
                 </Heading>
               </caption>
               <tbody>
                 <tr>
                   <th scope="row">Description</th>
-                  <td>{description && <Description>{md([description])}</Description>}</td>
+                  <td>
+                    {description && (
+                      <Description>
+                        {md([description && description.replace('@deprecated', '')])}
+                      </Description>
+                    )}
+                  </td>
                 </tr>
                 {defaultValue !== undefined && (
                   <tr>

packages/pretty-proptypes/src/Prop/Heading.js

@@ -38,6 +38,15 @@ export const HeadingRequired = (props: { children: Node }) => (
   />
 );
 
+export const HeadingDeprecated = (props: { children: Node }) => (
+  <code
+    css={css`
+      color: ${colors.N300};
+    `}
+    {...props}
+  />
+);
+
 export const HeadingType = (props: { children: Node }) => (
   <code
     css={css`
@@ -70,20 +79,24 @@ const Whitespace = () => ' ';
 type PropTypeHeadingProps = {
   name: any,
   required: boolean,
+  deprecated?: boolean,
   type: any,
   // This is probably giving up
   defaultValue?: any
 };
 
 const PropTypeHeading = (props: PropTypeHeadingProps) => (
   <Heading>
-    <HeadingName>{props.name}</HeadingName>
+    <HeadingName style={{ textDecoration: props.deprecated ? 'line-through' : 'none' }}>
+      {props.name}
+    </HeadingName>
     <Whitespace />
     <HeadingType>{props.type}</HeadingType>
     {props.defaultValue !== undefined && <HeadingDefault> = {props.defaultValue}</HeadingDefault>}
     {props.required && props.defaultValue === undefined ? (
       <HeadingRequired> required</HeadingRequired>
     ) : null}
+    {props.deprecated && <HeadingDeprecated> deprecated</HeadingDeprecated>}
   </Heading>
 );
 

packages/pretty-proptypes/src/Prop/index.js

@@ -38,6 +38,7 @@ export default class Prop extends Component<PropProps> {
       description,
       name,
       required,
+      deprecated,
       type,
       components,
       componentDisplayName
@@ -47,8 +48,19 @@ export default class Prop extends Component<PropProps> {
       <PropTypeWrapper
         {...(componentDisplayName ? { id: `${componentDisplayName}-${name}` } : null)}
       >
-        <PropTypeHeading name={name} required={required} type={type} defaultValue={defaultValue} />
-        {description && <components.Description>{md([description])}</components.Description>}
+        <PropTypeHeading
+          name={name}
+          required={required}
+          type={type}
+          defaultValue={defaultValue}
+          deprecated={deprecated}
+        />
+        {description && (
+          <components.Description>
+            {' '}
+            {md([deprecated ? description.replace('@deprecated', '') : description])}
+          </components.Description>
+        )}
         <ShapeComponent {...commonProps} />
       </PropTypeWrapper>
     );

packages/pretty-proptypes/src/renderPropType.js

@@ -5,6 +5,7 @@ import convert, { getKind, reduceToObj } from 'kind2string';
 import allComponents from './components';
 
 const IGNORE_COMMENTS_STARTING_WITH = ['eslint-disable', '@ts-'];
+const DEPRECATE_PROPS_THAT_CONTAIN = '@deprecated';
 const HIDE_PROPS_THAT_CONTAIN = ['@internal', '@access private'];
 
 const shouldIgnoreComment = comment => {
@@ -37,6 +38,14 @@ const shouldHideProp = comment => {
   return false;
 };
 
+const shouldDeprecateProp = comment => {
+  if (!comment) {
+    return false;
+  }
+
+  return comment.includes(DEPRECATE_PROPS_THAT_CONTAIN);
+};
+
 const renderPropType = (
   propType: any,
   { overrides = {}, shouldCollapseProps, components, componentDisplayName = {} }: any,
@@ -88,6 +97,7 @@ const renderPropType = (
       name={name}
       description={description}
       required={!propType.optional}
+      deprecated={shouldDeprecateProp(description)}
       type={getKind(propType.value)}
       defaultValue={propType.default && convert(propType.default)}
       shouldCollapse={shouldCollapseProps}

packages/pretty-proptypes/src/types.js

@@ -7,6 +7,7 @@ export type CommonProps = {
   defaultValue?: string,
   description?: string,
   required: boolean,
+  deprecated?: boolean,
   name: string,
   typeValue: Kind,
   type: string,

stories/TypeScriptComponent.tsx

@@ -41,6 +41,11 @@ type TypeScriptComponentProps = {
   // @internal
   hideProp: Boolean;
   nocomment: boolean;
+  /**
+   * @deprecated
+   * This prop is deprecated
+   */
+  deprecatedProp: boolean;
 };
 
 const TypeScriptComponent = (props: TypeScriptComponentProps) => <p>Hello World</p>;
@@ -59,7 +64,8 @@ TypeScriptComponent.defaultProps = {
   anyProp: 'any',
   unionProp: 'hello',
   unknownProp: 'hello',
-  unsupportedProp: 'text'
+  unsupportedProp: 'text',
+  deprecatedProp: true
 };
 
 export default TypeScriptComponent;

stories/layout/LayoutRenderer.stories.js

@@ -8,6 +8,7 @@ import {
   Heading,
   HeadingDefault,
   HeadingRequired,
+  HeadingDeprecated,
   HeadingType
 } from '../../packages/pretty-proptypes/src/Prop/Heading';
 import { colors } from '../../packages/pretty-proptypes/src/components/constants';
@@ -41,10 +42,6 @@ const rowStyles = css`
   tbody {
     border-bottom: none;
   }
-
-  &:target {
-    background: #e9f2ff;
-  }
 `;
 
 const headingStyles = css`
@@ -74,6 +71,11 @@ const headingRequiredStyles = css`
   color: ${colors.R400};
 `;
 
+const headingDeprecatedStyles = css`
+  margin-left: 1em;
+  color: ${colors.N300};
+`;
+
 Base.args = {
   component: (
     <div>
@@ -88,25 +90,32 @@ Base.args = {
           name,
           type,
           components,
-          componentDisplayName
+          deprecated
         }) => (
-          <table
-            css={rowStyles}
-            {...(componentDisplayName ? { id: `${componentDisplayName}-${name}` } : null)}
-          >
+          <table css={rowStyles}>
             <caption css={captionStyles}>
               <Heading css={headingStyles}>
-                <code css={headingCodeStyles}>{name}</code>
+                <code
+                  css={headingCodeStyles}
+                  style={{ textDecoration: deprecated ? 'line-through' : 'none' }}
+                >
+                  {name}
+                </code>
                 {required && defaultValue === undefined && (
                   <HeadingRequired css={headingRequiredStyles}>required</HeadingRequired>
                 )}
+                {deprecated && (
+                  <HeadingDeprecated css={headingDeprecatedStyles}>deprecated</HeadingDeprecated>
+                )}
               </Heading>
             </caption>
             <tbody>
               <tr>
                 <th scope="row">Description</th>
                 <td>
-                  <components.Description>{md([description])}</components.Description>
+                  <components.Description>
+                    {md([description && description.replace('@deprecated', '')])}
+                  </components.Description>
                 </td>
               </tr>
               {defaultValue !== undefined && (