playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

data/app/pb_kits/playbook/pb_form/docs/_form_validation_react.md

@@ -0,0 +1,26 @@
+Toggle pills to compose a validated form. Submit an empty form to see error states.
+
+**Note:** Some snippets pass `key={resetKey}` to controls that only read their initial value on mount — Date Picker, Time Picker, and Star Rating. `resetKey` is a counter that the Cancel button increments, which forces those controls to remount and repaint from form state after a reset.
+
+### Validation rules
+
+Attach react-hook-form rules (`required`, `pattern`, or `validate`) to the field, and pass the message to the kit's `error` prop from `fieldState`:
+
+```jsx
+<Controller
+  control={control}
+  name="email"
+  render={({ field, fieldState }) => (
+    <TextInput
+        error={fieldState.error?.message}
+        label="Email"
+        onChange={(event) => field.onChange(event.target.value)}
+        required
+        requiredIndicator
+        type="email"
+        value={field.value}
+    />
+  )}
+  rules={{ required: "Email is required" }}
+/>
+```

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

@@ -7,3 +7,10 @@ examples:
   - form_model_values: Model Values + Errors
   - form_loading: Loading
   - form_multi_column: Multi-Column Layout
+  react:
+  - form_defaults: Defaults
+  - form_validation: Validation and Error Messages
+  - form_default_values: Default Values
+  - form_model_values: Model Values + Errors
+  - form_loading: Loading
+  - form_multi_column: Multi-Column Layout

data/app/pb_kits/playbook/pb_form/form.rb

@@ -11,7 +11,7 @@ module Playbook
       prop :options, type: Playbook::Props::Base
       prop :validate, type: Playbook::Props::Boolean, default: false
 
-      def render_in(view_context, &block)
+      def render_in(view_context, **_, &block)
         view_context.pb_form_with(**form_options, &block)
       end
 

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

@@ -41,13 +41,8 @@
   },
   "globalProps": true,
   "usage": {
-    "react": {
-      "import": "import { Form } from 'playbook-ui'",
-      "example": "<Form></Form>"
-    },
     "rails": {
-      "import": null,
-      "example": "<%= pb_rails(\"form\", props: { text: \"Example\" }) %>"
+      "import": null
     }
   }
 }

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -63,6 +63,7 @@ class PbFormValidation extends PbEnhancedElement {
     if (!field?.matches?.(REQUIRED_FIELDS_SELECTOR)) return false
     if (field.closest('.pb_phone_number_input')) return false
     if (field.closest('.pb_time_picker')) return false
+    if (field.closest('.pb_typeahead_kit.react-select')) return false
     return true
   }
 

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -172,7 +172,7 @@
     border-top-right-radius: 0;
     border-right-color: transparent;
   }
-  & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
+  & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, & > [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
     }
@@ -196,9 +196,6 @@
   & > [class^=pb_selectable_card_icon_kit]:not(:last-child) {
     [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked)~ label {
       border-right-color: transparent;
-      &:hover {
-        border-right-color: $slate;
-      }
     }
   }
 

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

@@ -2,9 +2,12 @@
   "template": "<FormPill{{props}} />",
   "propTargets": {},
   "defaults": {
+    "size": "",
     "textTransform": "none",
     "color": "primary",
+    "icon": "",
     "wrapped": false,
+    "closeProps": {},
     "text": "This is a tag",
     "tabIndex": 0,
     "onClick": "() => alert('Click!')"

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

@@ -45,7 +45,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "textTransform": {
       "type": "enum",
@@ -102,7 +103,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "wrapped": {
       "type": "boolean",
@@ -116,7 +118,8 @@
       "type": "GenericObject",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": {}
     },
     "tabindex": {
       "platforms": [

data/app/pb_kits/playbook/pb_full_screen/_full_screen.scss

@@ -54,9 +54,15 @@
   flex-shrink: 0;
 }
 
+.fullscreen-content-inner {
+  box-sizing: border-box;
+}
+
 // Keep scroll on content (not the overlay) so the header stays put when sticky.
 // Without this, flex + overflow:auto on content pinned the header even when
 // stickyHeader was false.
+// Padding must stay on .fullscreen-content-inner — not this scroller — or
+// sticky descendants (Advanced Table header) sit below padding-top and leave a gap.
 .fullscreen-content-sticky {
   flex-shrink: 1;
   height: calc(100vh - 44px);

data/app/pb_kits/playbook/pb_full_screen/_full_screen.tsx

@@ -57,9 +57,16 @@ const FullScreenView = (props: FullScreenViewProps) => {
   const headerClasses = classnames("fullscreen-header", {
     "fullscreen-header-sticky": stickyHeader,
   })
-  const contentClasses = classnames("fullscreen-content", `p_${contentPadding}`, {
+  // Padding lives on an inner wrapper so sticky children (e.g. Advanced Table
+  // header) can pin flush to the top of the scrollport under the FS header.
+  // Padding on the overflow scroller itself leaves a gap equal to padding-top.
+  const contentClasses = classnames("fullscreen-content", {
     "fullscreen-content-sticky": stickyHeader,
   })
+  const contentInnerClasses = classnames(
+    "fullscreen-content-inner",
+    `p_${contentPadding}`,
+  )
   const isControlled = typeof controlledIsFullscreen === "boolean"
 
   const [internalIsFullscreen, setInternalIsFullscreen, toggleInternalFullscreen] = useFullscreen(false)
@@ -163,7 +170,9 @@ const FullScreenView = (props: FullScreenViewProps) => {
           >
             {defaultHeader}
             <div className={contentClasses}>
-              {children}
+              <div className={contentInnerClasses}>
+                {children}
+              </div>
             </div>
             <div
                 aria-hidden="true"

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_advanced_table_sticky_header.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import FullScreen from "../../pb_full_screen/_full_screen";
+import AdvancedTable from "../../pb_advanced_table/_advanced_table";
+import Button from "../../pb_button/_button";
+
+const columnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  },
+];
+
+const tableData = Array.from({ length: 40 }, (_, index) => ({
+  year: String(2000 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + (index % 50)}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + (index % 70)}%`,
+  graduatedStudents: String(19 + index),
+}));
+
+const FullScreenAdvancedTableStickyHeader = (props) => {
+  return (
+    <FullScreen
+        headerText="Fullscreen Table"
+        stickyHeader
+        trigger={({ onClick, isOpen }) => (
+          <Button
+              marginBottom="md"
+              onClick={onClick}
+              text={isOpen ? "Exit Fullscreen" : "Enter Fullscreen"}
+              {...props}
+          />
+        )}
+        {...props}
+    >
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          responsive="none"
+          tableData={tableData}
+          tableProps={{ sticky: true }}
+          {...props}
+      />
+    </FullScreen>
+  );
+};
+
+export default FullScreenAdvancedTableStickyHeader;

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_advanced_table_sticky_header.md

@@ -0,0 +1 @@
+Pair Fullscreen `stickyHeader` with Advanced Table `tableProps.sticky` so the fullscreen title bar and table column headers both stay visible while scrolling. Use `responsive="none"` on the table so sticky headers are not broken by a nested horizontal scroll container.

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

@@ -3,12 +3,12 @@
   "propTargets": {},
   "defaults": {
     "contentPadding": "lg",
+    "headerTextStyling": "title_4",
+    "stickyHeader": true,
     "escToExit": true,
     "headerText": "Enrollment Review",
-    "headerTextStyling": "title_4",
     "onClose": "() => console.log('Fullscreen closed')",
-    "onOpen": "() => console.log('Fullscreen opened')",
-    "stickyHeader": true
+    "onOpen": "() => console.log('Fullscreen opened')"
   },
   "groups": [
     {

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

@@ -9,6 +9,7 @@ examples:
   - full_screen_custom_trigger: Custom Trigger
   - full_screen_header_text_styling: Header Text Styling
   - full_screen_sticky_header: Sticky Header
+  - full_screen_advanced_table_sticky_header: Advanced Table Sticky Header
   - full_screen_content_padding: Content Padding
   - full_screen_table_and_filter: Complex Example
   

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

@@ -3,4 +3,5 @@ export { default as FullScreenCustomTrigger } from './_full_screen_custom_trigge
 export { default as FullScreenTableAndFilter } from './_full_screen_table_and_filter.jsx'
 export { default as FullScreenHeaderTextStyling } from './_full_screen_header_text_styling.jsx'
 export { default as FullScreenStickyHeader } from './_full_screen_sticky_header.jsx'
+export { default as FullScreenAdvancedTableStickyHeader } from './_full_screen_advanced_table_sticky_header.jsx'
 export { default as FullScreenContentPadding } from './_full_screen_content_padding.jsx'

data/app/pb_kits/playbook/pb_full_screen/full_screen.test.jsx

@@ -76,7 +76,8 @@ test('contentPadding is lg by default', () => {
 
   fireEvent.click(screen.getByText('Open'))
 
-  expect(document.querySelector('.fullscreen-content')).toHaveClass('p_lg')
+  expect(document.querySelector('.fullscreen-content-inner')).toHaveClass('p_lg')
+  expect(document.querySelector('.fullscreen-content')).not.toHaveClass('p_lg')
 })
 
 test('contentPadding can be customized', () => {
@@ -92,7 +93,8 @@ test('contentPadding can be customized', () => {
 
   fireEvent.click(screen.getByText('Open'))
 
-  expect(document.querySelector('.fullscreen-content')).toHaveClass('p_sm')
+  expect(document.querySelector('.fullscreen-content-inner')).toHaveClass('p_sm')
+  expect(document.querySelector('.fullscreen-content')).not.toHaveClass('p_sm')
 })
 
 test('headerText renders with title styling by default', () => {

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

@@ -20,7 +20,8 @@
         "md",
         "lg",
         "xl"
-      ]
+      ],
+      "default": "lg"
     },
     "headerText": {
       "type": "string",
@@ -36,7 +37,8 @@
       "values": [
         "title_4",
         "body"
-      ]
+      ],
+      "default": "title_4"
     },
     "isFullscreen": {
       "type": "boolean",
@@ -60,7 +62,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": true
     },
     "trigger": {
       "type": "function",
@@ -72,7 +75,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": true
     }
   },
   "globalProps": true,

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

@@ -2,11 +2,11 @@
   "template": "<Hashtag{{props}} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "newWindow": false,
     "type": "project",
     "text": "470297",
-    "url": "https://google.com",
-    "dark": false
+    "url": "https://google.com"
   },
   "groups": [
     {

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

@@ -11,7 +11,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "newWindow": {
       "type": "boolean",

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

@@ -12,7 +12,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "highlightedText": {
       "type": "array",

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import type { BorderPropValue } from '../utilities/globalProps'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
 export type IconSizes = "lg"
@@ -44,7 +45,7 @@ type IconOwnProps = {
   tabIndex?: number,
 }
 
-type IconProps = IconOwnProps & Omit<GlobalProps, 'border'>
+type IconProps = IconOwnProps & Omit<GlobalProps, 'border'> & GlobalEventProps
 
 const flipMap = {
   fa: {
@@ -233,6 +234,7 @@ const Icon = (props: IconProps) => {
   const ariaProps = buildAriaProps(normalizedAria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const eventProps = globalEventProps(props)
 
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
@@ -244,6 +246,7 @@ const Icon = (props: IconProps) => {
               ...ariaProps,
               ...dataProps,
               ...htmlProps,
+              ...eventProps,
               className: classes,
               id,
               ...(props.tabIndex !== undefined && { tabIndex }),
@@ -258,6 +261,7 @@ const Icon = (props: IconProps) => {
               {...ariaProps}
               {...dataProps}
               {...htmlProps}
+              {...eventProps}
               className={classesEmoji}
               id={id}
           >
@@ -272,6 +276,7 @@ const Icon = (props: IconProps) => {
               {...ariaProps}
               {...dataProps}
               {...htmlProps}
+              {...eventProps}
               className={classes}
               id={id}
           />

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

@@ -4,12 +4,12 @@
   "defaults": {
     "border": false,
     "fixedWidth": true,
+    "icon": "user",
     "inverse": false,
     "listItem": false,
     "pulse": false,
     "fontStyle": "far",
-    "spin": false,
-    "icon": "user"
+    "spin": false
   },
   "groups": [
     {

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

@@ -61,20 +61,31 @@
         "react",
         "rails"
       ],
-      "values": [
-        "horizontal",
-        "vertical",
-        "both",
-        "none"
-      ],
-      "default": null
+      "values": {
+        "react": [
+          "horizontal",
+          "vertical",
+          "both",
+          "none"
+        ],
+        "rails": [
+          "horizontal",
+          "vertical",
+          "both"
+        ]
+      },
+      "default": {
+        "react": "none",
+        "rails": null
+      }
     },
     "icon": {
       "type": "string | ReactSVGElement",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "inverse": {
       "type": "boolean",
@@ -98,11 +109,17 @@
         "react",
         "rails"
       ],
-      "values": [
-        "left",
-        "right",
-        "none"
-      ],
+      "values": {
+        "react": [
+          "left",
+          "right",
+          "none"
+        ],
+        "rails": [
+          "left",
+          "right"
+        ]
+      },
       "default": null
     },
     "pulse": {
@@ -184,6 +201,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Icon } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +27,7 @@ type IconCircleProps = {
     | "orange"
     | "green"
     | "lighter",
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const IconCircle = (props: IconCircleProps) => {
   const {
@@ -52,6 +53,7 @@ const IconCircle = (props: IconCircleProps) => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

@@ -2,10 +2,10 @@
   "template": "<IconCircle{{props}} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "size": "md",
     "variant": "default",
-    "icon": "rocket",
-    "dark": false
+    "icon": "rocket"
   },
   "groups": [
     {

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

@@ -11,7 +11,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "icon": {
       "type": "string",
@@ -66,6 +67,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { IconCircle } from 'playbook-ui'",

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

@@ -2,13 +2,14 @@
   "template": "<IconStatValue{{props}} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "orientation": "horizontal",
     "size": "md",
     "text": "Avg. session",
     "unit": "hrs",
+    "value": 1428,
     "variant": "default",
-    "icon": "chart-line",
-    "value": 1428
+    "icon": "chart-line"
   },
   "groups": [
     {

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

@@ -11,7 +11,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "icon": {
       "type": "string",
@@ -66,7 +67,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": 0
     },
     "variant": {
       "type": "enum",

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import classnames from 'classnames'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
-type ImageType = {
+type ImageProps = {
   alt?: string,
   aria?: {[key: string]: string},
   className?: string,
@@ -15,9 +16,9 @@ type ImageType = {
   rounded?: boolean,
   transition?: "blur" | "fade" | "scale",
   url?: string,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
-const Image = (props: ImageType): React.ReactElement => {
+const Image = (props: ImageProps): React.ReactElement => {
   const {
     alt = '',
     aria = {},
@@ -50,6 +51,7 @@ const Image = (props: ImageType): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         alt={alt}
         className={classes}
         id={id}