Merge pull request #1457 from Adslot/fix-radio-checkbox-docs

docs: fix propType descriptions
Adslot · Jul 11, 2022 · 885f7ce · 885f7ce
2 parents 231c3bc + 0f9a5ca
commit 885f7ce
Show file tree

Hide file tree

Showing 13 changed files with 240 additions and 36 deletions.
diff --git a/src/components/Anchor/index.d.ts b/src/components/Anchor/index.d.ts
@@ -17,6 +17,7 @@ export interface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElemen
   className?: string;
   dts?: string;
   disabled?: boolean;
+  children?: React.ReactNode;
 }
 
 declare const Anchor: React.FC<AnchorProps>;

diff --git a/src/components/Anchor/index.jsx b/src/components/Anchor/index.jsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { expandDts, invariant } from '../../lib/utils';
-import { buttonSharedPropTypes, buttonSharedClasses, colors, variants, sizes } from '../Button';
+import { buttonSharedClasses, colors, variants, sizes } from '../Button';
 
 const Anchor = (props) => {
   const {
@@ -66,8 +66,14 @@ Anchor.propTypes = {
   color: PropTypes.oneOf(colors),
   variant: PropTypes.oneOf(variants),
   size: PropTypes.oneOf(sizes),
-  ...buttonSharedPropTypes,
   href: PropTypes.string.isRequired,
+  round: PropTypes.bool,
+  icon: PropTypes.node,
+  fullWidth: PropTypes.bool,
+  className: PropTypes.string,
+  dts: PropTypes.string,
+  disabled: PropTypes.bool,
+  children: PropTypes.node,
 };
 
 export default Anchor;
diff --git a/src/components/Button/index.d.ts b/src/components/Button/index.d.ts
@@ -27,6 +27,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   className?: string;
   dts?: string;
   disabled?: boolean;
+  children?: React.ReactNode;
 }
 
 declare const Button: React.FC<ButtonProps>;

diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
@@ -36,6 +36,7 @@ const Button = (props) => {
   } = props;
   const isLink = variant === 'link' || className?.match(/\b(aui-link)\b/)?.[0];
 
+  // eslint-disable-next-line react/prop-types
   invariant(!props.href, 'Button: should not be used for href links. Use an <Anchor/> instead.');
   invariant(!theme, 'Button: The theme prop has been deprecated. Please use color instead.');
   invariant(!inverse, 'Button: The inverse prop has been deprecated. Please use variant="inverse" instead.');
@@ -96,15 +97,6 @@ export const colors = ['default', 'primary', 'secondary', 'success', 'danger', '
 export const variants = ['solid', 'borderless', 'inverse', 'link'];
 export const sizes = ['medium', 'large'];
 
-export const buttonSharedPropTypes = {
-  round: PropTypes.bool,
-  icon: PropTypes.node,
-  fullWidth: PropTypes.bool,
-  className: PropTypes.string,
-  dts: PropTypes.string,
-  disabled: PropTypes.bool,
-};
-
 Button.propTypes = {
   isLoading: PropTypes.bool,
   color: PropTypes.oneOf(colors),
@@ -120,7 +112,13 @@ Button.propTypes = {
    * Please use `variant="inverse"` instead.
    */
   inverse: PropTypes.bool,
-  ...buttonSharedPropTypes,
+  round: PropTypes.bool,
+  icon: PropTypes.node,
+  fullWidth: PropTypes.bool,
+  className: PropTypes.string,
+  dts: PropTypes.string,
+  disabled: PropTypes.bool,
+  children: PropTypes.node,
 };
 
 export default Button;
diff --git a/src/components/Checkbox/index.d.ts b/src/components/Checkbox/index.d.ts
@@ -18,7 +18,13 @@ export interface CheckboxProps {
    * checkBox label for the checkbox input
    */
   label?: React.ReactNode;
+  /**
+   * additional text description to display below the label
+   */
   text?: React.ReactNode;
+  /**
+   * icon to display beside the label when  parent group's `variant="box"`
+   */
   icon?: React.ReactNode;
   /**
    * checkBox input value

diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx
@@ -118,7 +118,13 @@ Checkbox.propTypes = {
    * checkBox label for the checkbox input
    */
   label: PropTypes.node,
+  /**
+   * additional text description to display below the label
+   */
   text: PropTypes.node,
+  /**
+   * icon to display beside the label when  parent group's `variant="box"`
+   */
   icon: PropTypes.node,
   /**
    * checkBox input value

diff --git a/src/components/CheckboxGroup/index.d.ts b/src/components/CheckboxGroup/index.d.ts
@@ -7,7 +7,19 @@ export type CheckboxGroupVariant = 'default' | 'box';
 export interface CheckboxGroupProps {
   value: any[];
   name: string;
+  /**
+   * @function onChange
+   * @param {array} newValue - the new checkboxGroup value
+   * @param {string} name - the checkbox name
+   * @param {string|number} value - the changed checkbox's value
+   */
   onChange: (...args: any[]) => any;
+  /**
+   * @function getIsChecked overrides the default checked state behaviour
+   * @param {string|number} itemValue - the checkbox's value
+   * @param {array} value - the checkbox group's value
+   */
+  getIsChecked?: (...args: any[]) => any;
   orientation?: CheckboxGroupOrientation;
   children: React.ReactNode;
   className?: string;

diff --git a/src/components/CheckboxGroup/index.jsx b/src/components/CheckboxGroup/index.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { invariant } from '../../lib/utils';
-import { radioGroupSharedPropTypes } from '../RadioGroup';
 import '../RadioGroup/style.css';
 
 const CheckboxGroupContext = React.createContext({});
@@ -74,7 +73,30 @@ const CheckboxGroup = ({
 
 CheckboxGroup.propTypes = {
   value: PropTypes.array.isRequired,
-  ...radioGroupSharedPropTypes,
+  name: PropTypes.string.isRequired,
+  /**
+   * @function onChange
+   * @param {array} newValue - the new checkboxGroup value
+   * @param {string} name - the checkbox name
+   * @param {string|number} value - the changed checkbox's value
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * @function getIsChecked overrides the default checked state behaviour
+   * @param {string|number} itemValue - the checkbox's value
+   * @param {array} value - the checkbox group's value
+   */
+  getIsChecked: PropTypes.func,
+  orientation: PropTypes.oneOf(['vertical', 'horizontal']),
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  dts: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'box']),
+  id: PropTypes.string,
+  /**
+   *  @deprecated use orientation="horizontal" instead
+   **/
+  inline: PropTypes.bool,
 };
 
 export default CheckboxGroup;
diff --git a/src/components/Radio/index.d.ts b/src/components/Radio/index.d.ts
@@ -7,7 +7,13 @@ export interface RadioProps {
   className?: string;
   name?: string;
   label?: React.ReactNode;
+  /**
+   * additional text description to display below the label
+   */
   text?: React.ReactNode;
+  /**
+   * icon to display beside the label when parent group's `variant="box"`
+   */
   icon?: React.ReactNode;
   value?: RadioValue;
   dts?: string;
@@ -17,6 +23,9 @@ export interface RadioProps {
    * @param {string|number} value - the radio value
    */
   onChange?: (...args: any[]) => any;
+  /**
+   * checked status of the radio input
+   */
   checked?: boolean;
   /**
    * @deprecated

diff --git a/src/components/Radio/index.jsx b/src/components/Radio/index.jsx
@@ -101,7 +101,13 @@ Radio.propTypes = {
   className: PropTypes.string,
   name: PropTypes.string,
   label: PropTypes.node,
+  /**
+   * additional text description to display below the label
+   */
   text: PropTypes.node,
+  /**
+   * icon to display beside the label when parent group's `variant="box"`
+   */
   icon: PropTypes.node,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   dts: PropTypes.string,
@@ -111,6 +117,9 @@ Radio.propTypes = {
    * @param {string|number} value - the radio value
    */
   onChange: PropTypes.func,
+  /**
+   * checked status of the radio input
+   */
   checked: PropTypes.bool,
   /**
    * @deprecated

diff --git a/src/components/RadioGroup/index.jsx b/src/components/RadioGroup/index.jsx
@@ -68,7 +68,8 @@ const RadioGroup = ({
   );
 };
 
-export const radioGroupSharedPropTypes = {
+RadioGroup.propTypes = {
+  value: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   orientation: PropTypes.oneOf(['vertical', 'horizontal']),
@@ -83,9 +84,4 @@ export const radioGroupSharedPropTypes = {
   inline: PropTypes.bool,
 };
 
-RadioGroup.propTypes = {
-  value: PropTypes.string.isRequired,
-  ...radioGroupSharedPropTypes,
-};
-
 export default RadioGroup;
diff --git a/www/containers/Props.jsx b/www/containers/Props.jsx
@@ -45,7 +45,11 @@ const Props = ({ componentName, customMapper }) => {
                   <td>
                     <code>{_.get(prop, 'defaultValue.value', '')}</code>
                   </td>
-                  <td>{HtmlParser(prop.description)}</td>
+                  <td>
+                    {prop.description?.split('\n').map((line, i) => (
+                      <div key={i}>{HtmlParser(line)}</div>
+                    ))}
+                  </td>
                 </tr>
               ))}
             </tbody>