Merge pull request #1505 from Adslot/fix-checkbox-item-types

fix: checkbox group item docs & types
Adslot · Oct 18, 2022 · fdac0b8 · fdac0b8
2 parents 4119854 + 10585c0
commit fdac0b8
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 27 deletions.
diff --git a/src/components/Checkbox/index.d.ts b/src/components/Checkbox/index.d.ts
@@ -1,20 +1,16 @@
 import * as React from 'react';
 
-export type CheckboxValue = string | number;
-
 export type CheckboxVariant = 'default' | 'box';
 
 export type CheckboxChecked = boolean | 'partial';
 
+export type CheckboxValue = string | number;
+
 export interface CheckboxProps {
   /**
    * name for the checkbox input
    */
   name?: string;
-  /**
-   * checkBox input value
-   */
-  value?: CheckboxValue;
   variant?: CheckboxVariant;
   /**
    * @function onChange called when checkBox onChange event is fired
@@ -36,6 +32,10 @@ export interface CheckboxProps {
    * @deprecated
    */
   inline?: boolean;
+  /**
+   * checkBox input value
+   */
+  value?: CheckboxValue;
   /**
    * id for the checkbox input
    */

diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx
@@ -103,6 +103,10 @@ const Checkbox = ({
 };
 
 export const shareCheckboxPropTypes = {
+  /**
+   * checkBox input value
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * id for the checkbox input
    */
@@ -136,10 +140,6 @@ Checkbox.propTypes = {
    * name for the checkbox input
    */
   name: PropTypes.string,
-  /**
-   * checkBox input value
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   variant: PropTypes.oneOf(['default', 'box']),
   /**
    * @function onChange called when checkBox onChange event is fired

diff --git a/src/components/CheckboxGroup/index.d.ts b/src/components/CheckboxGroup/index.d.ts
@@ -1,6 +1,12 @@
 import * as React from 'react';
 
+export type CheckboxGroupItemValue = string | number;
+
 export interface CheckboxGroupItemProps {
+  /**
+   * checkBox input value
+   */
+  value?: CheckboxGroupItemValue;
   /**
    * id for the checkbox input
    */

diff --git a/www/containers/props.json b/www/containers/props.json
@@ -1152,6 +1152,21 @@
       "displayName": "Checkbox",
       "methods": [],
       "props": {
+        "value": {
+          "type": {
+            "name": "union",
+            "value": [
+              {
+                "name": "string"
+              },
+              {
+                "name": "number"
+              }
+            ]
+          },
+          "required": false,
+          "description": "checkBox input value"
+        },
         "id": {
           "type": {
             "name": "string"
@@ -1212,21 +1227,6 @@
           "required": false,
           "description": "name for the checkbox input"
         },
-        "value": {
-          "type": {
-            "name": "union",
-            "value": [
-              {
-                "name": "string"
-              },
-              {
-                "name": "number"
-              }
-            ]
-          },
-          "required": false,
-          "description": "checkBox input value"
-        },
         "variant": {
           "type": {
             "name": "enum",

diff --git a/www/examples/CheckboxGroup.mdx b/www/examples/CheckboxGroup.mdx
@@ -1,5 +1,6 @@
 import Props from '../containers/Props.jsx';
 import DesignNotes from '../containers/DesignNotes.jsx';
+import { shareCheckboxPropTypes } from '../../src/components/Checkbox/index.jsx';
 
 ## CheckboxGroup
 
@@ -158,9 +159,18 @@ render(Example);
 
 ### CheckboxGroup.Item
 
-<Props customMapper={(props) => [props[`src/components/Card/index.jsx`][0]]} />
+<Props
+  customMapper={(props) => [
+    {
+      ...props[`src/components/Checkbox/index.jsx`][0],
+      props: _.pickBy(props[`src/components/Checkbox/index.jsx`][0].props, (v, k) =>
+        _.keys(shareCheckboxPropTypes).includes(k)
+      ),
+    },
+  ]}
+/>
 <br />
 
 ### CheckboxGroup.All
 
-<Props customMapper={(props) => [props[`src/components/Card/index.jsx`][1]]} />
+<Props customMapper={(props) => [props[`src/components/CheckboxGroup/index.jsx`][1]]} />