playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

data/app/pb_kits/playbook/pb_button/docs/_playground.overrides.json

@@ -14,7 +14,7 @@
     { "name": "Content", "props": ["text", "icon", "iconRight"] },
     { "name": "Link Mode", "props": ["link", "target", "newWindow"] },
     { "name": "Reaction Mode", "props": ["count", "highlight"] },
-    { "name": "Form", "props": ["htmlType", "form", "value", "tabIndex"] }
+    { "name": "Form", "props": ["htmlType", "type", "form", "value", "tabIndex"] }
   ],
   "presets": [
     { "name": "Primary", "props": { "variant": "primary" }, "children": "Submit" },

data/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -24,7 +24,7 @@ examples:
   - button_block_content: Button Block Content
   - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options
-  - button_options: Button Additional Options (onClick)
+  - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover

data/app/pb_kits/playbook/pb_button/kit.schema.json

@@ -57,7 +57,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": null
     },
     "iconRight": {
       "type": "boolean",
@@ -72,7 +73,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": null
     },
     "loading": {
       "type": "boolean",
@@ -120,7 +122,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "text": {
       "type": "string",
@@ -129,28 +132,6 @@
         "rails"
       ]
     },
-    "type": {
-      "type": "enum",
-      "platforms": [
-        "react",
-        "rails"
-      ],
-      "values": [
-        "inline"
-      ],
-      "default": "inline"
-    },
-    "htmlType": {
-      "type": "enum",
-      "platforms": [
-        "react"
-      ],
-      "values": [
-        "submit",
-        "reset",
-        "button"
-      ]
-    },
     "value": {
       "type": "string | null",
       "platforms": [
@@ -173,12 +154,35 @@
       ],
       "default": "primary"
     },
+    "htmlType": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "submit",
+        "reset",
+        "button"
+      ],
+      "default": "button"
+    },
     "wrapperClass": {
       "type": "string",
       "platforms": [
         "react"
       ]
     },
+    "type": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "enum",
+      "values": [
+        "submit",
+        "reset",
+        "button"
+      ]
+    },
     "iconFontFamily": {
       "platforms": [
         "rails"
@@ -197,11 +201,11 @@
   "usage": {
     "react": {
       "import": "import { Button } from 'playbook-ui'",
-      "example": "<Button size=\"sm\" type=\"inline\"></Button>"
+      "example": "<Button size=\"sm\" variant=\"primary\"></Button>"
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"button\", props: { size: \"sm\", type: \"inline\" }) %>"
+      "example": "<%= pb_rails(\"button\", props: { size: \"sm\", variant: \"primary\" }) %>"
     }
   }
 }

data/app/pb_kits/playbook/pb_caption/kit.schema.json

@@ -29,13 +29,23 @@
         "react",
         "rails"
       ],
-      "values": [
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ],
+      "values": {
+        "react": [
+          "xs",
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ],
+        "rails": [
+          "xs",
+          "sm",
+          "md",
+          "base",
+          "lg",
+          "xl"
+        ]
+      },
       "default": "md"
     },
     "tag": {

data/app/pb_kits/playbook/pb_card/docs/_playground.json

@@ -10,6 +10,7 @@
     "borderRadius": "md",
     "draggableItem": false,
     "dragHandle": true,
+    "highlight": {},
     "selected": false,
     "tag": "div",
     "headerColor": "category_1",

data/app/pb_kits/playbook/pb_card/kit.schema.json

@@ -113,7 +113,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "length": {
       "type": "number",

data/app/pb_kits/playbook/pb_checkbox/docs/_playground.json

@@ -3,9 +3,14 @@
   "propTargets": {},
   "defaults": {
     "checked": false,
+    "dark": false,
     "disabled": false,
     "error": false,
-    "requiredIndicator": false
+    "indeterminate": false,
+    "name": "",
+    "requiredIndicator": false,
+    "text": "",
+    "value": ""
   },
   "groups": [
     {

data/app/pb_kits/playbook/pb_checkbox/kit.schema.json

@@ -19,7 +19,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "disabled": {
       "type": "boolean",
@@ -41,14 +42,16 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "name": {
       "type": "string",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "onChange": {
       "type": "function",
@@ -75,14 +78,16 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "value": {
       "type": "string",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "indeterminateMain": {
       "platforms": [

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -31,11 +31,11 @@ const CollapsibleMain = ({
   const mainSpacing = globalProps(props, { cursor })
 
   const handleCollapsibleClick = () => {
-    onClick && onClick();
-    //To disable default toggling behavior return "true" in the onClick()
-    const disableToggle = onClick && onClick();
+    // Returning true from onClick disables the default toggle.
+    const disableToggle = onClick && onClick()
+
     if (disableToggle !== true) {
-    toggle();
+      toggle()
     }
   }
 

data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js

@@ -11,8 +11,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  // eslint-disable-next-line
-  console.error.mockRestore()
+  jest.restoreAllMocks()
 })
 
 const testId = 'collapsible1',
@@ -72,3 +71,83 @@ test('html structure is correct', () => {
 
   expect(container).toMatchSnapshot()
 })
+
+const clickCollapsibleMain = () => {
+  screen.getByText('Main Section').click()
+}
+
+test('calls onClick once per click', () => {
+  const handleClick = jest.fn()
+  render(
+    <Collapsible onClick={handleClick}>
+      <Collapsible.Main>
+        <div>{'Main Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>{'Content'}</div>
+      </Collapsible.Content>
+    </Collapsible>
+  )
+
+  clickCollapsibleMain()
+
+  expect(handleClick).toHaveBeenCalledTimes(1)
+})
+
+test('toggles by default when onClick is omitted', () => {
+  const { container } = render(
+    <Collapsible>
+      <Collapsible.Main>
+        <div>{'Main Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>{'Content'}</div>
+      </Collapsible.Content>
+    </Collapsible>
+  )
+
+  expect(container.querySelector('[aria-label="chevron-down icon"]')).toBeInTheDocument()
+
+  clickCollapsibleMain()
+
+  expect(container.querySelector('[aria-label="chevron-up icon"]')).toBeInTheDocument()
+})
+
+test('toggles when onClick does not return true', () => {
+  const handleClick = jest.fn()
+  const { container } = render(
+    <Collapsible onClick={handleClick}>
+      <Collapsible.Main>
+        <div>{'Main Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>{'Content'}</div>
+      </Collapsible.Content>
+    </Collapsible>
+  )
+
+  clickCollapsibleMain()
+
+  expect(handleClick).toHaveBeenCalledTimes(1)
+  expect(container.querySelector('[aria-label="chevron-up icon"]')).toBeInTheDocument()
+})
+
+test('does not toggle when onClick returns true', () => {
+  const handleClick = jest.fn(() => true)
+  const { container } = render(
+    <Collapsible onClick={handleClick}>
+      <Collapsible.Main>
+        <div>{'Main Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>{'Content'}</div>
+      </Collapsible.Content>
+    </Collapsible>
+  )
+
+  clickCollapsibleMain()
+
+  expect(handleClick).toHaveBeenCalledTimes(1)
+  expect(container.querySelector('[aria-label="chevron-down icon"]')).toBeInTheDocument()
+  expect(container.querySelector('[aria-label="chevron-up icon"]')).not.toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -64,7 +65,7 @@ type ContactProps = {
   iconEnabled?: boolean
   id?: string
   unstyled?: boolean
-}
+} & GlobalEventProps
 
 const Contact = (props: ContactProps): React.ReactElement => {
   const {
@@ -125,6 +126,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
+          {...globalEventProps(props)}
           className={classes}
           id={id}
       >
@@ -139,6 +141,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_contact/docs/_playground.json

@@ -2,6 +2,7 @@
   "template": "<Contact{{props}} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "iconEnabled": true,
     "unstyled": false,
     "contactType": "email",

data/app/pb_kits/playbook/pb_contact/kit.schema.json

@@ -32,7 +32,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "iconEnabled": {
       "type": "boolean",
@@ -52,6 +53,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Contact } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_copy_button/docs/_playground.json

@@ -2,9 +2,13 @@
   "template": "<CopyButton{{props}} />",
   "propTargets": {},
   "defaults": {
+    "from": "",
+    "text": "Copy",
+    "tooltipPlacement": "bottom",
     "tooltipText": "Copied!",
+    "value": "Boo from Ghost Crew!",
     "variant": "icon",
-    "value": "Boo from Ghost Crew!"
+    "timeout": 1000
   },
   "groups": [
     {

data/app/pb_kits/playbook/pb_copy_button/kit.schema.json

@@ -12,14 +12,16 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "text": {
       "type": "string",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": "Copy"
     },
     "tooltipPlacement": {
       "type": "enum",
@@ -31,7 +33,8 @@
         "right",
         "bottom",
         "left"
-      ]
+      ],
+      "default": "bottom"
     },
     "tooltipText": {
       "type": "string",
@@ -46,7 +49,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "variant": {
       "type": "enum",
@@ -64,7 +68,8 @@
       "type": "number",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": 1000
     },
     "tooltipPosition": {
       "platforms": [

data/app/pb_kits/playbook/pb_currency/docs/_playground.json

@@ -8,7 +8,7 @@
     "decimals": "default",
     "emphasized": true,
     "label": "Balance",
-    "size": "md",
+    "nullDisplay": "",
     "symbol": "$",
     "variant": "default",
     "unstyled": false,

data/app/pb_kits/playbook/pb_currency/kit.schema.json

@@ -76,7 +76,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "size": {
       "type": "enum",
@@ -89,7 +90,10 @@
         "md",
         "lg"
       ],
-      "default": "md"
+      "default": {
+        "react": "sm",
+        "rails": "md"
+      }
     },
     "symbol": {
       "type": "string",

data/app/pb_kits/playbook/pb_dashboard_value/docs/_playground.json

@@ -7,11 +7,11 @@
       "change": "decrease",
       "value": "26.1"
     },
-    "statLabel": "Decreased Value",
     "statValue": {
       "value": "1,428",
       "unit": "appts"
-    }
+    },
+    "statLabel": "Decreased Value"
   },
   "groups": [
     {

data/app/pb_kits/playbook/pb_dashboard_value/kit.schema.json

@@ -25,7 +25,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "statLabel": {
       "type": "string",
@@ -39,7 +40,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -3,6 +3,7 @@ import classnames from "classnames";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GlobalEventProps, globalEventProps } from "../utilities/globalEventProps";
 import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
@@ -24,7 +25,7 @@ type PbDateProps = {
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
   value: Date;
-};
+} & GlobalEventProps;
 
 const PbDate = (props: PbDateProps): React.ReactElement => {
   const {
@@ -64,6 +65,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date/date.test.js

@@ -31,7 +31,7 @@ describe('PbDate Kit', () => {
   })
 
   afterEach(() => {
-    console.error.mockRestore()
+    jest.restoreAllMocks()
   })
 
   // Default Props

data/app/pb_kits/playbook/pb_date/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "alignment": "left",
+    "dark": false,
     "showDayOfWeek": false,
     "showCurrentYear": false,
     "showIcon": false,

data/app/pb_kits/playbook/pb_date/kit.schema.json

@@ -24,7 +24,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "showDayOfWeek": {
       "type": "boolean",
@@ -56,11 +57,19 @@
         "react",
         "rails"
       ],
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ],
+      "values": {
+        "react": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "rails": [
+          "lg",
+          "md",
+          "sm",
+          "xs"
+        ]
+      },
       "default": "md"
     },
     "unstyled": {
@@ -90,6 +99,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Date } from 'playbook-ui'",
@@ -97,7 +107,7 @@
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"date\", props: { alignment: \"left\", size: \"sm\" }) %>"
+      "example": "<%= pb_rails(\"date\", props: { alignment: \"left\", size: \"lg\" }) %>"
     }
   }
 }

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -6,6 +6,10 @@ import DatePicker from './_date_picker'
 import DateTime from "../pb_kit/dateTime.ts"
 import { getTimezoneText } from './plugins/timeSelect'
 
+// Freeze Date while letting Flatpickr updates and waitFor polling run normally.
+jest.useFakeTimers({
+  doNotFake: ['setTimeout', 'clearTimeout', 'setInterval', 'clearInterval', 'requestAnimationFrame', 'cancelAnimationFrame'],
+});
 jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
 

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json

@@ -11,10 +11,13 @@
     "format": "m/d/Y",
     "hideIcon": false,
     "hideLabel": false,
+    "initializeOnce": false,
+    "inLine": false,
+    "inputAria": {},
+    "inputData": {},
     "label": "Date Picker",
     "placeholder": "Select Date",
     "requiredIndicator": false,
-    "selectionType": "none",
     "showTimezone": false,
     "staticPosition": true,
     "thisRangesEndToday": false,