playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,91 @@
+{
+  "template": "<FormGroup{{props}}>\n{{children}}\n</FormGroup>",
+  "wrapper": "const FormGroupPlayground = () => {\n  const [formFields, setFormFields] = useState({\n    firstName: \"Jane\",\n    middleInitial: \"Q\",\n    lastName: \"Doe\",\n    search: \"\",\n    eventName: \"Planning session\",\n    animal: \"cat\"\n  })\n\n  const handleFieldChange = ({ target }) => {\n    setFormFields({ ...formFields, [target.name]: target.value })\n  }\n\n  const handleAnimalChange = ({ target }) => {\n    setFormFields({ ...formFields, animal: target.value })\n  }\n\n  return {{component}}\n}\n\n<FormGroupPlayground />",
+  "externalImports": ["import React, { useState } from 'react'"],
+  "children": {
+    "editable": true,
+    "default": "<TextInput\n    id=\"first-name\"\n    label=\"First Name\"\n    name=\"firstName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter first name\"\n    value={formFields.firstName}\n/>\n<TextInput\n    id=\"middle-initial\"\n    label=\"Middle Initial\"\n    name=\"middleInitial\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter middle initial\"\n    value={formFields.middleInitial}\n/>\n<TextInput\n    id=\"last-name\"\n    label=\"Last Name\"\n    name=\"lastName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter last name\"\n    value={formFields.lastName}\n/>"
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": ["fullWidth"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Text Inputs",
+      "props": {},
+      "children": "<TextInput\n    id=\"first-name\"\n    label=\"First Name\"\n    name=\"firstName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter first name\"\n    value={formFields.firstName}\n/>\n<TextInput\n    id=\"middle-initial\"\n    label=\"Middle Initial\"\n    name=\"middleInitial\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter middle initial\"\n    value={formFields.middleInitial}\n/>\n<TextInput\n    id=\"last-name\"\n    label=\"Last Name\"\n    name=\"lastName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter last name\"\n    value={formFields.lastName}\n/>"
+    },
+    {
+      "name": "Full Width",
+      "props": {
+        "fullWidth": true
+      },
+      "children": "<TextInput\n    id=\"first-name-full-width\"\n    label=\"First Name\"\n    name=\"firstName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter first name\"\n    value={formFields.firstName}\n/>\n<TextInput\n    id=\"middle-initial-full-width\"\n    label=\"Middle Initial\"\n    name=\"middleInitial\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter middle initial\"\n    value={formFields.middleInitial}\n/>\n<TextInput\n    id=\"last-name-full-width\"\n    label=\"Last Name\"\n    name=\"lastName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter last name\"\n    value={formFields.lastName}\n/>"
+    },
+    {
+      "name": "Search Button",
+      "props": {},
+      "children": "<TextInput\n    id=\"search-with-action\"\n    label=\"Search\"\n    name=\"search\"\n    onChange={handleFieldChange}\n    placeholder=\"Search\"\n    value={formFields.search}\n/>\n<Button\n    onClick={() => alert(\"Button clicked!\")}\n    text=\"Submit\"\n    variant=\"secondary\"\n/>"
+    },
+    {
+      "name": "Select",
+      "props": {},
+      "children": "<TextInput\n    id=\"artist-name\"\n    name=\"artistName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter Artist Name\"\n    value={formFields.artistName || \"\"}\n/>\n<Select\n    blankSelection=\"Genre\"\n    name=\"genre\"\n    options={[\n      { value: \"Country\" },\n      { value: \"Pop\" },\n      { value: \"Rock\" },\n      { value: \"Hip-Hop/Rap\" }\n    ]}\n/>"
+    },
+    {
+      "name": "Date Picker",
+      "props": {},
+      "children": "<TextInput\n    id=\"event-name\"\n    label=\"Event\"\n    name=\"eventName\"\n    onChange={handleFieldChange}\n    placeholder=\"Event Name\"\n    value={formFields.eventName}\n/>\n<DatePicker\n    label=\"Event Date\"\n    pickerId=\"form-group-event-date\"\n/>"
+    },
+    {
+      "name": "Typeahead Action",
+      "props": {},
+      "children": "<Typeahead\n    id=\"products\"\n    label=\"Products\"\n    options={[\n      { label: \"Windows\", value: \"windows\" },\n      { label: \"Roof\", value: \"roof\" },\n      { label: \"Siding\", value: \"siding\" },\n      { label: \"Doors\", value: \"doors\" }\n    ]}\n/>\n<Button\n    onClick={() => alert(\"Product added!\")}\n    text=\"Add\"\n    variant=\"secondary\"\n/>"
+    },
+    {
+      "name": "Selectable Cards",
+      "props": {},
+      "children": "<SelectableCard\n    checked={formFields.animal === \"cat\"}\n    inputId=\"cat-option\"\n    multi={false}\n    name=\"animal\"\n    onChange={handleAnimalChange}\n    value=\"cat\"\n>\n  Cat\n</SelectableCard>\n<SelectableCard\n    checked={formFields.animal === \"dog\"}\n    inputId=\"dog-option\"\n    multi={false}\n    name=\"animal\"\n    onChange={handleAnimalChange}\n    value=\"dog\"\n>\n  Dog\n</SelectableCard>"
+    }
+  ],
+  "hints": {
+    "text_inputs": {
+      "presetName": "Text Inputs",
+      "message": "Text Inputs uses state-backed child inputs so the playground fields stay editable.",
+      "type": "info"
+    },
+    "full_width": {
+      "presetName": "Full Width",
+      "message": "Full Width applies fullWidth to the FormGroup while leaving each child input editable.",
+      "type": "info"
+    },
+    "search_button": {
+      "presetName": "Search Button",
+      "message": "Search Button pairs a controlled text field with an action button in the same group.",
+      "type": "info"
+    },
+    "select": {
+      "presetName": "Select",
+      "message": "Select shows mixed children inside the group, with the options array kept directly in editable children.",
+      "type": "info"
+    },
+    "date_picker": {
+      "presetName": "Date Picker",
+      "message": "Date Picker combines a text input with a picker child, including the pickerId required by the kit.",
+      "type": "info"
+    },
+    "typeahead_action": {
+      "presetName": "Typeahead Action",
+      "message": "Typeahead Action mirrors the docs pattern of a searchable Typeahead plus an adjacent button.",
+      "type": "info"
+    },
+    "selectable_cards": {
+      "presetName": "Selectable Cards",
+      "message": "Selectable Cards keeps both card options in children so each option can be edited together.",
+      "type": "info"
+    }
+  }
+}

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

@@ -4,33 +4,174 @@
   "defaults": {
     "textTransform": "none",
     "color": "primary",
-    "wrapped": false
+    "wrapped": false,
+    "text": "This is a tag",
+    "tabIndex": 0,
+    "onClick": "() => alert('Click!')"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
         "text",
         "name",
-        "onClick",
-        "avatar",
-        "avatarUrl",
+        "icon",
+        "avatarUrl"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "color",
         "size",
         "textTransform",
-        "color",
-        "tabIndex",
-        "icon",
-        "wrapped",
-        "closeProps"
+        "wrapped"
+      ]
+    },
+    {
+      "name": "Interaction",
+      "props": [
+        "tabIndex"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Tag",
+      "props": {
+        "text": "this is a tag",
+        "name": "",
+        "icon": ""
+      }
+    },
+    {
+      "name": "Lowercase",
+      "props": {
+        "text": "THIS IS A TAG",
+        "textTransform": "lowercase",
+        "name": "",
+        "icon": ""
+      }
+    },
+    {
+      "name": "Icon and tag",
+      "props": {
+        "text": "icon and tag",
+        "icon": "badge-check",
+        "name": ""
+      }
+    },
+    {
+      "name": "User",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": ""
+      }
+    },
+    {
+      "name": "User with avatar",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+      }
+    },
+    {
+      "name": "Small user",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": "",
+        "size": "small"
+      }
+    },
+    {
+      "name": "Wrapped tag",
+      "props": {
+        "text": "form pill with a very long tag to show wrapped text",
+        "name": "",
+        "icon": "",
+        "wrapped": true
+      }
+    },
+    {
+      "name": "Wrapped user",
+      "props": {
+        "text": "",
+        "name": "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+        "icon": "",
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "wrapped": true
+      }
+    },
+    {
+      "name": "Success",
+      "props": {
+        "text": "Success",
+        "color": "success",
+        "name": "",
+        "icon": ""
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "avatarUrl": {
+      "requires": "name"
+    }
+  },
+  "hints": {
+    "close_button": {
+      "when": {},
+      "message": "The close icon calls onClick; wire it in app code to remove the pill from your form.",
+      "type": "info"
+    },
+    "wrapped_text": {
+      "when": {
+        "wrapped": true
+      },
+      "message": "Wrapped pills expand to multiple lines instead of truncating long labels.",
+      "type": "info"
+    },
+    "user_with_avatar": {
+      "when": {
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+      },
+      "message": "The avatar is displayed when the avatarUrl is set. Name is required for avatar display.",
+      "type": "info"
+    },
+    "user_without_avatar": {
+      "when": {
+        "avatarUrl": ""
+      },
+      "message": "The name is displayed when the avatarUrl is not set.",
+      "type": "info"
+    },
+    "lowercase": {
+      "when": {
+        "textTransform": "lowercase"
+      },
+      "message": "The text is displayed in lowercase when the textTransform is set to lowercase.",
+      "type": "info"
+    },
+    "success": {
+      "when": {
+        "color": "success"
+      },
+      "message": "The pill is displayed in success color when the color is set to success. See the color variants section for more information on colors available.",
+      "type": "info"
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "hiddenProps": [
+    "onClick",
+    "closeProps",
+    "avatar"
+  ]
 }

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

@@ -0,0 +1,147 @@
+{
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "defaults": {
+    "text": "This is a tag",
+    "color": "primary",
+    "textTransform": "none",
+    "wrapped": false,
+    "tabIndex": 0,
+    "onClick": "() => alert('Click!')"
+  },
+  "hiddenProps": ["onClick", "closeProps", "avatar"],
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text", "name", "icon", "avatarUrl"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["color", "size", "textTransform", "wrapped"]
+    },
+    {
+      "name": "Interaction",
+      "props": ["tabIndex"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Tag",
+      "props": {
+        "text": "this is a tag",
+        "name": "",
+        "icon": ""
+      }
+    },
+    {
+      "name": "Lowercase",
+      "props": {
+        "text": "THIS IS A TAG",
+        "textTransform": "lowercase",
+        "name": "",
+        "icon": ""
+      }
+    },
+    {
+      "name": "Icon and tag",
+      "props": {
+        "text": "icon and tag",
+        "icon": "badge-check",
+        "name": ""
+      }
+    },
+    {
+      "name": "User",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": ""
+      }
+    },
+    {
+      "name": "User with avatar",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+      }
+    },
+    {
+      "name": "Small user",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": "",
+        "size": "small"
+      }
+    },
+    {
+      "name": "Wrapped tag",
+      "props": {
+        "text": "form pill with a very long tag to show wrapped text",
+        "name": "",
+        "icon": "",
+        "wrapped": true
+      }
+    },
+    {
+      "name": "Wrapped user",
+      "props": {
+        "text": "",
+        "name": "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+        "icon": "",
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "wrapped": true
+      }
+    },
+    {
+      "name": "Success",
+      "props": {
+        "text": "Success",
+        "color": "success",
+        "name": "",
+        "icon": ""
+      }
+    }
+  ],
+  "conditionals": {
+    "avatarUrl": { "requires": "name" }
+  },
+  "hints": {
+    "close_button": {
+      "when": {},
+      "message": "The close icon calls onClick; wire it in app code to remove the pill from your form.",
+      "type": "info"
+    },
+    "wrapped_text": {
+      "when": { "wrapped": true },
+      "message": "Wrapped pills expand to multiple lines instead of truncating long labels.",
+      "type": "info"
+    },
+    "user_with_avatar": {
+      "when": { "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg" },
+      "message": "The avatar is displayed when the avatarUrl is set. Name is required for avatar display.",
+      "type": "info"
+    },
+    "user_without_avatar": {
+      "when": { "avatarUrl": "" },
+      "message": "The name is displayed when the avatarUrl is not set.",
+      "type": "info"
+    },
+    "lowercase": {
+      "when": { "textTransform": "lowercase" },
+      "message": "The text is displayed in lowercase when the textTransform is set to lowercase.",
+      "type": "info"
+    },
+    "success": {
+      "when": { "color": "success" },
+      "message": "The pill is displayed in success color when the color is set to success. See the color variants section for more information on colors available.",
+      "type": "info"
+    }
+  }
+}

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

@@ -22,7 +22,7 @@
       ]
     },
     "onClick": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]

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

@@ -0,0 +1,77 @@
+@import "../tokens/colors";
+@import "../tokens/positioning";
+
+.pb_full_screen_kit {
+  .fullscreen-close-button {
+    align-items: center;
+    background: none;
+    border: none;
+    color: $text_lt_light;
+    cursor: pointer;
+    display: flex;
+    padding: 2px 0;
+
+    &:hover {
+      color: $primary;
+    }
+
+    &:focus-visible {
+      border-radius: 4px;
+      outline: 2px solid $primary;
+      outline-offset: 2px;
+    }
+  }
+}
+
+.fullscreen-overlay {
+  background-color: $bg_light;
+  box-sizing: border-box;
+  height: 100vh;
+  left: 0;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: $z_max;
+}
+
+.fullscreen-header {
+  background-color: $white;
+  box-sizing: border-box;
+  width: 100%;
+  z-index: $z_10;
+}
+
+.fullscreen-header-sticky {
+  position: sticky;
+  top: 0;
+}
+
+.fullscreen-content {
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.fullscreen-content-sticky {
+  height: calc(100vh - 44px);
+}
+// Dark mode support
+.dark {
+  .pb_full_screen_view {
+    .fullscreen-close-button {
+      color: $text_dk_light;
+
+      &:hover {
+        color: $primary;
+      }
+    }
+  }
+
+  .fullscreen-overlay {
+    background-color: $bg_dark;
+  }
+
+  .fullscreen-header {
+    background-color: $bg_dark_card;
+  }
+}

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

@@ -0,0 +1,183 @@
+import React, { useEffect } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import useFullscreen from './useFullScreen'
+
+import Flex from '../pb_flex/_flex'
+import Icon from '../pb_icon/_icon'
+import Title from '../pb_title/_title'
+import Body from '../pb_body/_body'
+
+
+type FullScreenViewProps = {
+  aria?: { [key: string]: string },
+  children: React.ReactNode,
+  className?: string,
+  data?: { [key: string]: string },
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void) },
+  id?: string,
+  contentPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl"
+  headerText?: string
+  headerTextStyling?: "title_4" | "body"
+  isFullscreen?: boolean
+  onOpen?: () => void
+  onClose?: () => void
+  stickyHeader?: boolean
+  trigger?: (props: { onClick: () => void; isOpen: boolean }) => React.ReactNode
+  escToExit?: boolean
+
+}
+
+const FullScreenView = (props: FullScreenViewProps) => {
+  const {
+  aria = {},
+  children,
+  className,
+  contentPadding = "lg",
+  data = {},
+  htmlOptions = {},
+  id,
+  headerText,
+  headerTextStyling = "title_4",
+  isFullscreen: controlledIsFullscreen,
+  onOpen,
+  onClose,
+  stickyHeader = true,
+  trigger,
+  escToExit = true,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(buildCss('pb_full_screen_kit'), globalProps(props), className)
+  const headerClasses = classnames("fullscreen-header", {
+    "fullscreen-header-sticky": stickyHeader,
+  })
+  const contentClasses = classnames("fullscreen-content", `p_${contentPadding}`, {
+    "fullscreen-content-sticky": stickyHeader,
+  })
+  const isControlled = typeof controlledIsFullscreen === "boolean"
+
+  const [internalIsFullscreen, setInternalIsFullscreen, toggleInternalFullscreen] = useFullscreen(false)
+
+  const isFullscreen = isControlled ? controlledIsFullscreen : internalIsFullscreen
+  const enter = () => {
+    if (!isControlled) {
+      setInternalIsFullscreen(true)
+      onOpen?.()
+    } else {
+      onOpen?.()
+    }
+  }
+  const exit = () => {
+    if (!isControlled) {
+      setInternalIsFullscreen(false)
+      onClose?.()
+    } else {
+      onClose?.()
+    }
+  }
+  const toggle = () => {
+    if (isControlled) {
+      if (isFullscreen) {
+        onClose?.()
+      } else {
+        onOpen?.()
+      }
+    } else {
+      toggleInternalFullscreen()
+      if (isFullscreen) {
+        onClose?.()
+      } else {
+        onOpen?.()
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!escToExit || !isFullscreen) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        exit()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [escToExit, isFullscreen, isControlled, onClose])
+
+  const defaultHeader = (
+    <div className={headerClasses}>
+      <Flex
+          align="center"
+          justify="between"
+          paddingLeft="sm"
+          paddingRight="xxs"
+          paddingY="xs"
+      >
+        {headerText && (
+          headerTextStyling === "title_4" ? (
+          <Title
+              size={4}
+              text={headerText}
+          />
+          ) : (
+            <Body text={headerText} />
+          )
+        )}
+        <button
+            className="fullscreen-close-button"
+            onClick={toggle}
+        >
+          <Icon
+              color="link"
+              fixedWidth
+              icon="close"
+              paddingX="xs"
+              paddingY="xxs"
+              size="lg"
+          />
+        </button>
+      </Flex>
+    </div>
+  )
+
+  const renderTrigger = () => {
+    if (!trigger) return null
+    return trigger({ onClick: toggle, isOpen: isFullscreen })
+  }
+
+  const renderContent = () => {
+    if (isFullscreen) {
+      return (
+        <div className="fullscreen-overlay">
+          {defaultHeader}
+          <div className={contentClasses}>
+            {children}
+          </div>
+        </div>
+      )
+    }
+    return children
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      {renderTrigger()}
+      {renderContent()}
+    </div>
+  )
+}
+
+export default FullScreenView