playbook_ui 14.13.0.pre.alpha.play1851checkboxreacthook6083 → 14.13.0.pre.alpha.play1884progresspill6064

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb3a9002f9a8764511848a3c3d772fadf25f5f54630059aa06c9a4369335179d
-  data.tar.gz: a6a46c5bfdb0e7a0a93957852210185c6e9eece5faa63454c1815b5b75e6c63d
+  metadata.gz: 21317a1c7d5325bd88ac09a06b74859e30a5fcf6748c6b4b710c500189733796
+  data.tar.gz: 0f6e8ac0625c5ba45989ab65b84603c15e777699e9726e2a7769d6e2aa57dd5e
 SHA512:
-  metadata.gz: 9224cd88c0f6759480689ee6637464d0a05ff61e69093a1f834f5b1a0477543883204e81b0cce35d67b0ca66b6d00bfc2bcd2f5302e15bd4c008d21c2e3fc352
-  data.tar.gz: 70771f474c26f416e72a5906f06e4b8b36109daa5d492bc21a5e2a8b8cbb0ac49eb7e4c68ab36a6952dbc8d3be99db7d835390987d8ccc647304b61c8d0cebce
+  metadata.gz: a7555df6aeccfb138dd8a45ff0a86b1e1843ba3ae6640a29d27899f2a9972b717f26cda50b79da966a5681b5eea56394f0a97823b165e27194add95c3e892158
+  data.tar.gz: 275833538e43720396649195b958886d4d4cca24f5b9e8e977fc1b7ec520d6e1151665de6d02086b11e05c45414f2b9c03d941df3fd43ad2fcd78ce403f4472b

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, forwardRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -24,7 +24,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+const Checkbox = (props: CheckboxProps): React.ReactElement => {
   const {
     aria = {},
     checked = false,
@@ -44,15 +44,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     value = '',
   } = props
 
-  const internalRef = useRef<HTMLInputElement>(null)
-  const setRefs = (el: HTMLInputElement) => {
-    internalRef.current = el
-    if (typeof ref === 'function') {
-      ref(el)
-    } else if (ref) {
-      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
-    }
-  }
+  const checkRef = useRef(null)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -64,9 +56,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
   )
 
   useEffect(() => {
-    if (internalRef.current) {
-      internalRef.current.checked = checked
-      internalRef.current.indeterminate = indeterminate
+    if (checkRef.current) {
+      checkRef.current.checked = checked
+      checkRef.current.indeterminate = indeterminate
     }
   }, [indeterminate, checked])
 
@@ -80,7 +72,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         disabled={disabled}
         name={name}
         onChange={onChange}
-        ref={setRefs}
+        ref={checkRef}
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
@@ -127,7 +119,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
       </Body>
     </label>
   )
-})
+}
 
-Checkbox.displayName = "Checkbox"
 export default Checkbox

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -106,19 +106,3 @@ test('has disabled attribute', () => {
   const input = kit.querySelector('input')
   expect(input).toHaveAttribute('disabled')
 }) 
-
-test('has ref in the input element', () => {
-  const ref = React.createRef()
-    render(
-      <Checkbox
-          data={{ testid: testId }}
-          name="checkbox-name"
-          ref={ref}
-          text="Checkbox"
-          value="check-box value"
-      />
-  )
-
-  expect(ref.current).not.toBeNull()
-  expect(ref.current?.tagName).toBe('INPUT')
-})

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

@@ -11,7 +11,6 @@ examples:
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
-  - checkbox_react_hook: React Hook Form
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
@@ -22,4 +21,4 @@ examples:
     - checkbox_error_swift: Default w/ Error
     - checkbox_indeterminate_swift: Indeterminate Checkbox
     - checkbox_props_swift: ""
-    
+    

data/app/pb_kits/playbook/pb_checkbox/docs/index.js

@@ -1,6 +1,5 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
-export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -29,7 +29,6 @@ type DatePickerProps = {
   hideLabel?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  initializeOnce?: boolean,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
@@ -74,7 +73,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     htmlOptions = {},
     id,
-    initializeOnce = false,
     inLine = false,
     inputAria = {},
     inputData = {},
@@ -136,7 +134,7 @@ useEffect(() => {
     yearRange,
     required: false,
   }, scrollContainer)
-}, initializeOnce ? [] : undefined)
+})
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -3,7 +3,8 @@
 @import "../tokens/border_radius";
 
 @mixin pb_progress_pill {
-  width: 45px;
+  width: 100%;
+  max-width: 45px;
   height: 4px;
   border-radius: $border_rad_light;
   margin-right: $space_xs;

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1 +1,2 @@
 <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -10,6 +10,13 @@ const ProgressPillsDefault = (props) => {
                 steps={3}
                 {...props}
             />
+            <ProgressPills
+                active={9}
+                aria={{ label: '9 out of 18 steps complete' }}
+                marginTop="md"
+                steps={18}
+                {...props}
+            />
         </>
     )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md

@@ -0,0 +1 @@
+Progress pills start at `45px` wide if the container allows, but will shrink down to `1px` as the container gets smaller. Resize this window to see each pill shrink.

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

@@ -35,7 +35,6 @@ examples:
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
-    - table_with_selectable_rows: Table with Selectable Rows
 
   react:
     - table_sm: Small
@@ -72,5 +71,4 @@ examples:
     - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
-    - table_with_clickable_rows: Table with Clickable Rows
-    - table_with_selectable_rows: Table with Selectable Rows
+    - table_with_clickable_rows: Table with Clickable Rows

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -33,5 +33,4 @@ export { default as TableWithCollapsibleWithCustomContent } from './_table_with_
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
 export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
 export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
-export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
-export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
+export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'