playbook_ui 12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413 → 12.13.0.pre.alpha.PLAY693tooltipwrongbg440

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eac850ebbc05e1ce91f38e6377564b32fa3ba241de3ff599b5e0084a39666223
-  data.tar.gz: 2ce42692684f6598b0c22d7e763ff9bd815044bd28ea806b659746d1f73ea098
+  metadata.gz: 18b2b312491b972cf09d3520048e4bcee3b3a54fc77823a96f99e4b8124d691e
+  data.tar.gz: 15984bc190a04b1a771106b3c0d487164c94a5565f9403946cba9f042f244c6e
 SHA512:
-  metadata.gz: 268d73b140d2e8aeb3086a4588b2a42c3f3c0dd26d7c4112b37583bcd85e9657fe59e6854042e2a8c9ca02bb139e4aef5aec926430d9da6f2b98c2c1b92d2d2e
-  data.tar.gz: f58ed28b37d12a8e3555f44612a907aabb5e60b81cba57c78c017bb86328c6d437d14999849106847bc5967f59f51daac1c3e5bca921f7e7f7958dffc1ee843a
+  metadata.gz: 93575b229a5e34b07acfa9efcdfa1a7c4abdc4d312a1ada00215312802a5a51c42b5d0a23c8ba12876bc102400e7f768202c8656145ff00bf724006a25eb28bd
+  data.tar.gz: fce5886dc11ec423b86399cfbb5879c3bdc8d9c5833d5a4cc4f6dcea84928396f00a80fa6832f44e91f9a63f7767a6a6975e1dbce541e6a6822ed3dcca05f345

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

@@ -78,6 +78,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     mode = 'single',
     name,
     onChange = () => { void 0 },
+    onClose,
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
@@ -95,9 +96,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+  const filteredProps = {...props}
+  delete filteredProps?.position
+
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    globalProps(props),
+    //@ts-ignore
+    globalProps(filteredProps),
     error ? 'error' : null,
     className
   )
@@ -117,8 +122,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       minDate,
       mode,
       onChange,
+      onClose,
       pickerId,
       plugins,
+      // @ts-ignore
       position,
       positionElement,
       selectionType,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -19,6 +19,7 @@ type DatePickerConfig = {
   hideIcon?: boolean;
   inLine?: boolean,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
+  onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
   selectionType?: "month" | "week" | "",
   showTimezone?: boolean,
   staticPosition: boolean,
@@ -41,6 +42,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     minDate,
     mode,
     onChange = () => {},
+    onClose = () => {},
     pickerId,
     plugins,
     position = "auto",
@@ -151,9 +153,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       window.addEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
     }],
-    onClose: [() => {
+    onClose: [(selectedDates, dateStr) => {
       window.removeEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
+      onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { DatePicker,LabelValue } from '../..'
+
+
+const DatePickerOnClose = (props) => {
+  const today = new Date()
+  const [dateString, setDateString] = useState(today.toLocaleDateString())
+  const [dateObj, setDateObj] = useState([today])
+
+  const handleOnClose = (selectedDates, dateStr) => {
+    setDateString(dateStr)
+    setDateObj(selectedDates)
+  }
+
+
+  return (
+    <div>
+        <DatePicker
+            defaultDate={dateString}
+            enableTime
+            marginBottom="lg"
+            onClose={handleOnClose}
+            pickerId="date-picker-on-close"
+            showTimezone
+            {...props}
+        />
+        <LabelValue
+            label="Date Object"
+            marginBottom="lg"
+            value={dateObj[0] ? dateObj[0].toString() : ''}
+            {...props}
+        />
+        <LabelValue
+            label="Date String"
+            value={dateString}
+            {...props}
+        />
+    </div>
+  )
+}
+
+export default DatePickerOnClose

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md

@@ -0,0 +1,3 @@
+The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
+
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

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

@@ -31,6 +31,7 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_on_change: onChange
+  - date_picker_on_close: onClose
   - date_picker_range: Range
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates

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

@@ -19,3 +19,4 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_flex/_flex.scss

@@ -2,6 +2,7 @@
 @import "../tokens/spacing";
 
 $gapSpaces:(
+  xxs:  $space_xxs,
   xs:   $space_xs,
   sm:   $space_sm,
   md:   $space_md,

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { Sizes } from '../types'
 
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
@@ -16,9 +17,9 @@ type FlexProps = {
   reverse?: boolean,
   vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
   align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
-  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
-  rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
-  columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
+  gap?: Sizes | "none",
+  rowGap?: Sizes| "none",
+  columnGap?: Sizes| "none",
   wrap?: boolean,
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("title", props: {size: 4, text: "Row"}) %>
 <br/>
 <div class="flex-doc-example">
-  <%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
+  <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
    <%40.times do |i|%>
     <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
    <% end %>

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx

@@ -14,7 +14,7 @@ const FlexGap = (props) => {
     <>
       <div className="flex-doc-example">
         <Flex
-            gap="xs"
+            gap="xxs"
             wrap
             {...props}
         >

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md

@@ -1,6 +1,6 @@
 ##### Prop
 
-*  `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xs | sm | md | lg | xl | none
+*  `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xxs | xs | sm | md | lg | xl | none
 
 - Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
 

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -25,15 +25,15 @@ module Playbook
                      deprecated: true
 
       prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xs sm md lg xl none],
+                 values: %w[xxs xs sm md lg xl none],
                  default: "none"
 
       prop :row_gap, type: Playbook::Props::Enum,
-                     values: %w[xs sm md lg xl none],
+                     values: %w[xxs xs sm md lg xl none],
                      default: "none"
 
       prop :column_gap, type: Playbook::Props::Enum,
-                        values: %w[xs sm md lg xl none],
+                        values: %w[xxs xs sm md lg xl none],
                         default: "none"
 
       prop :reverse, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -151,6 +151,10 @@ const Layout = (props: LayoutPropTypes) => {
   const nonSideChildren = layoutChildren.filter(
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
+
+  const filteredProps = {...props}
+  delete filteredProps?.position
+
   return (
     <div
         {...ariaProps}
@@ -159,7 +163,8 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
-        globalProps(props)
+        //@ts-ignore
+        globalProps(filteredProps)
       )}
     >
       {subComponentTags('Side')}

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -89,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const [itiInit, setItiInit] = useState<any>()
   const [error, setError] = useState('')
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
+  const [selectedData, setSelectedData] = useState()
 
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
@@ -121,10 +122,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     validateOnlyNumbers()
   }
 
+  const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
+    return { ...itiInit.getSelectedCountryData(), number: inputValue }
+  }
+
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
     validateTooLongNumber(itiInit)
-    onChange(evt)
+    const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
+    setSelectedData(phoneNumberData)
+    onChange(phoneNumberData)
     isValid(itiInit.isValidNumber())
   }
 
@@ -136,15 +143,21 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
-        separateDialCode: true,
-        preferredCountries,
-        allowDropdown: !disabled,
-        initialCountry,
-        onlyCountries,
-      }
+      separateDialCode: true,
+      preferredCountries,
+      allowDropdown: !disabled,
+      initialCountry,
+      onlyCountries,
+    }
     )
-    
-    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+
+    inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      validateTooLongNumber(telInputInit)
+      const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
+      setSelectedData(phoneNumberData)
+      onChange(phoneNumberData)
+    })
+
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
     inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
@@ -156,6 +169,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       <TextInput
         className={dropDownIsOpen ? 'dropdown_open' : ''}
         dark={dark}
+        data-phone-number={JSON.stringify(selectedData)}
         disabled={disabled}
         error={error}
         id={id}

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import classnames from "classnames";
+
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import Checkbox from "../pb_checkbox/_checkbox";
+import ListItem from "../pb_list/_list_item";
+import Radio from "../pb_radio/_radio";
+
+export type SelectableListItemProps = {
+  aria?: { [key: string]: string };
+  children: React.ReactNode[] | React.ReactNode;
+  checked?: boolean;
+  className?: string;
+  data?: object;
+  defaultChecked?: boolean;
+  id?: string;
+  label?: string;
+  text?: string;
+  name?: string;
+  value?: string;
+  variant?: string;
+  onChange: (arg: React.ChangeEvent<HTMLInputElement>  | null) => void;
+};
+
+const SelectableListItem = ({
+  aria = {},
+  checked = false,
+  children,
+  className,
+  data = {},
+  defaultChecked,
+  id,
+  label,
+  text = "",
+  name = "",
+  value = "",
+  variant = "checkbox",
+  onChange = () => {},
+  ...props
+}: SelectableListItemProps) => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_selectable_list_item_kit"),
+    globalProps(props),
+    className
+  );
+
+  const initialCheckedState = checked;
+  const [checkedState, setCheckedState] = useState(initialCheckedState);
+
+  const handleChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event);
+    setCheckedState(event.target.checked);
+  };
+
+  return (
+    <ListItem
+      {...props}
+      className={classnames(checkedState ? "checked_item" : "", className)}
+    >
+      <div {...ariaProps} {...dataProps} className={classes}>
+        {variant == "checkbox" && (
+          <>
+            <Checkbox
+              checked={checkedState}
+              id={id}
+              name={name}
+              onChange={handleChecked}
+              // eslint suppressor, text is needed to display on screen
+              //@ts-ignore
+              text={label || (text && false)}
+              type="checkbox"
+              value={value}
+              {...props}
+            />
+            {children}
+          </>
+        )}
+        {variant == "radio" && (
+          <>
+            <Radio
+              defaultChecked={defaultChecked}
+              id={id}
+              label={label}
+              name={name}
+              onChange={onChange}
+              //@ts-ignore
+              text={label}
+              type="radio"
+              value={value}
+              {...props}
+            />
+            {children}
+          </>
+        )}
+        {variant !== "checkbox" && variant !== "radio" && (
+          { children }
+        )}
+      </div>
+    </ListItem>
+  );
+};
+
+export default SelectableListItem;

data/app/pb_kits/playbook/pb_selectable_list/{_selectable_list.jsx → _selectable_list.tsx}

@@ -1,16 +1,16 @@
-/* @flow */
 import React, { useState } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { SelectableListItemProps } from './_item.js'
 
 import List from  '../pb_list/_list'
-import SelectableListItem from './_item.jsx'
+import SelectableListItem from './_item'
 
 type SelectableListProps = {
-  aria?: object,
-  children?: Node,
+  aria?: {[key: string]: string },
+  children?: React.ReactElement[],
   className?: string,
   data?: object,
   id?: string,
@@ -30,17 +30,18 @@ const SelectableList = (props: SelectableListProps) => {
   const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
   const dataProps = buildDataProps(data)
   const isRadio = props.variant === "radio"
-  const defaultCheckedRadioValue = children.filter(item => item.props.defaultChecked)[0]?.props?.value
+  const defaultCheckedRadioValue = children.filter((item: {props:SelectableListItemProps} ) => item.props.defaultChecked)[0]?.props?.value
+
   const [selectedRadioValue, setSelectedRadioValue] = useState(defaultCheckedRadioValue)
   
-  const onChangeRadioValue = ({ target }) => {
+  const onChangeRadioValue = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedRadioValue(target.value)
   }
 
   let selectableListItems = children
 
   if (isRadio) {
-    selectableListItems = children.map(({ props }) => {
+    selectableListItems = children.map(( {props}: {props:SelectableListItemProps} ) => {
       return (
         <SelectableListItem
             {...props}
@@ -51,6 +52,7 @@ const SelectableList = (props: SelectableListProps) => {
       )
     })
   }
+
   
   return (
     <div
@@ -59,13 +61,13 @@ const SelectableList = (props: SelectableListProps) => {
         className={classes}
         id={id}
     >
-      <List {...props}>
+      <List variant={props.variant}>
         {selectableListItems}
       </List>
     </div>
   )
 }
-
+ 
 SelectableList.Item = SelectableListItem
 
 export default SelectableList

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import SelectableList from './_selectable_list'
+
+const testId = "selectable-list-test"
+
+const SelectableListCheckbox = () => {
+    return (
+      <SelectableList 
+          data={{ testid: testId }} 
+          variant="checkbox">
+        <SelectableList.Item
+            label="Mild"
+            name="checkbox-name-1"
+            value="1"
+        />
+        <SelectableList.Item
+            checked
+            label="Medium"
+            name="checkbox-name-2"
+            value="2"
+        />
+      </SelectableList>
+    )
+}
+
+const SelectableListRadio = () => {
+    return (
+        <SelectableList
+            data={{ testid: testId }}
+            variant="radio">
+        <SelectableList.Item
+            label="Small"
+            name="radio"
+            value="1"
+        />
+        <SelectableList.Item
+            defaultChecked
+            label="Medium"
+            name="radio"
+            value="2"
+        />
+      </SelectableList>
+    )
+}
+
+
+test("classname renders as expected", () => {
+   render(<SelectableListCheckbox />)
+
+   const kit = screen.getByTestId("selectable-list-test")
+   expect(kit).toHaveClass("pb_selectable_list_kit")
+})
+
+test("renders variant checkbox", () => {
+    render(<SelectableListCheckbox />)
+    const kit = screen.getByTestId("selectable-list-test")
+    const checkbox = kit.querySelector(".pb_checkbox_kit")
+    expect(checkbox).toBeInTheDocument()
+})
+
+test("renders variant radio", () => {
+    render(<SelectableListRadio />)
+    const kit = screen.getByTestId("selectable-list-test")
+    const checkbox = kit.querySelector(".pb_radio_kit")
+    expect(checkbox).toBeInTheDocument()
+
+})

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -88,13 +88,18 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     &.show {
       opacity: 1;
       margin-bottom: $space_sm;
-      background-color: $white;
+      color: $white;
+      background-color: rgba($black, $opacity_9);
       &.fade_out {
         animation-name: fadeOut;
         animation-duration: 150ms;
         animation-timing-function: linear;
         animation-fill-mode: forwards;
       }
+      .arrow {
+        border-color: $black transparent transparent transparent;
+        opacity: $opacity_9;
+      }
     }
   }
 
@@ -109,12 +114,12 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       }
       //rails
       &.show {
-        color: $white;
-        background-color: rgba($black, $opacity_9);
+        color: $charcoal;
+        background-color: $white;
       }
-      .arrow {
-        border-color: $black transparent transparent transparent;
-        opacity: $opacity_9;
+      .arrow {        
+        border-color: $white transparent transparent transparent;
+        opacity: $opacity_10;
       }
       // react arrow
       .arrow_bg {

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -1,3 +1,16 @@
+$relative: relative !default;
+$absolute: absolute !default;
+$fixed: fixed !default;
+$sticky: sticky !default;
+$static: static !default;
+$position: (
+  relative: $relative,
+  absolute: $absolute,
+  fixed: $fixed,
+  sticky: $sticky,
+  static: $static
+);
+
 // z_index variables
 $z_1: 100 !default;
 $z_2: 200 !default;

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -1,3 +1,23 @@
+.position_relative {
+  position: relative;
+}
+
+.position_absolute {
+  position: absolute;
+}
+
+.position_fixed {
+  position: fixed;
+}
+
+.position_sticky {
+  position: sticky;
+}
+
+.position_static {
+  position: static;
+}
+
 .z_index_1 {
   z-index: 100;
 }

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -100,6 +100,10 @@ type Padding = {
   padding?: AllSizes,
 }
 
+type Position = {
+  position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
+}
+
 type Shadow = {
   shadow?: "none" | "deep" | "deeper" | "deepest",
 }
@@ -115,7 +119,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
-  Shadow & ZIndex
+  Position & Shadow & ZIndex
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -283,7 +287,12 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return order ? `flex_order_${order}` : ''
     }
-  }
+  }, 
+  positionProps: ({ position }: Position) => {
+    let css = ''
+    css += position && position !== 'static' ? `position_${position}` : ''
+    return css
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>

data/lib/playbook/classnames.rb

@@ -31,6 +31,7 @@ module Playbook
         flex_grow_props,
         flex_shrink_props,
         order_props,
+        position_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/kit_base.rb

@@ -19,6 +19,7 @@ require "playbook/flex"
 require "playbook/flex_grow"
 require "playbook/flex_shrink"
 require "playbook/order"
+require "playbook/position"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -43,6 +44,7 @@ module Playbook
     include Playbook::FlexGrow
     include Playbook::FlexShrink
     include Playbook::Order
+    include Playbook::Position
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/position.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Position
+    def self.included(base)
+      base.prop :position
+    end
+
+  private
+
+    def position_props
+      selected_props = position_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        value = send(k)
+        return nil unless position_values.include? value
+
+        "position_#{value}"
+      end.compact.join(" ")
+    end
+
+    def position_options
+      {
+        position: "position",
+      }
+    end
+
+    def position_values
+      %w[relative absolute fixed sticky]
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.12.0"
-  VERSION = "12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413"
+  PREVIOUS_VERSION = "12.13.0"
+  VERSION = "12.13.0.pre.alpha.PLAY693tooltipwrongbg440"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413
+  version: 12.13.0.pre.alpha.PLAY693tooltipwrongbg440
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-04-04 00:00:00.000000000 Z
+date: 2023-04-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -738,6 +738,8 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
@@ -1843,9 +1845,9 @@ files:
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.test.js
-- app/pb_kits/playbook/pb_selectable_list/_item.jsx
-- app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
+- app/pb_kits/playbook/pb_selectable_list/_item.tsx
 - app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx
 - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb
 - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx
 - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb
@@ -1854,6 +1856,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_list/docs/index.js
 - app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb
 - app/pb_kits/playbook/pb_selectable_list/selectable_list.rb
+- app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js
 - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb
 - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb
 - app/pb_kits/playbook/pb_source/_source.scss
@@ -2437,6 +2440,7 @@ files:
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb
+- lib/playbook/position.rb
 - lib/playbook/props.rb
 - lib/playbook/props/array.rb
 - lib/playbook/props/base.rb

data/app/pb_kits/playbook/pb_selectable_list/_item.jsx

@@ -1,106 +0,0 @@
-/* @flow */
-
-import React, { Node, useState } from 'react'
-import classnames from 'classnames'
-
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Checkbox from '../pb_checkbox/_checkbox'
-import ListItem from '../pb_list/_list_item'
-import Radio from '../pb_radio/_radio'
-
-type SelectableListItemProps = {
-  aria?: object,
-  children: array<Node> | Node,
-  checked?: boolean,
-  className?: string,
-  data?: object,
-  defaultChecked?: boolean,
-  id?: string,
-  label?: string,
-  text?: string,
-  name?: string,
-  value?: string,
-  variant?: string,
-  onChange: (boolean)=>void,
-}
-
-const SelectableListItem = ({
-  aria = {},
-  checked = false,
-  children,
-  className,
-  data = {},
-  defaultChecked,
-  id,
-  label,
-  text = '',
-  name = '',
-  value = '',
-  variant = 'checkbox',
-  onChange = () => {},
-  ...props
-}: SelectableListItemProps) => {
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_selectable_list_item_kit'),
-    globalProps(props),
-    className
-  )
-
-  const initialCheckedState = checked
-  const [checkedState, setCheckedState] = useState(initialCheckedState)
-
-  const handleChecked = (event) => {
-    onChange(event)
-    setCheckedState(event.target.checked)
-  }
-
-  return (
-    <ListItem 
-        {...props}
-        className={classnames(checkedState ? "checked_item" : "", className)}
-    >
-      <div
-          {...ariaProps}
-          {...dataProps}
-          className={classes}
-      >
-        <Choose>
-          <When condition={variant == 'checkbox'}>
-            <Checkbox
-                checked={checkedState}
-                id={id}
-                name={name}
-                onChange={handleChecked}
-                // eslint suppressor, text is needed to display on screen
-                text={label || (text && false)}
-                type="checkbox"
-                value={value}
-                {...props}
-            />
-            {children}
-          </When>
-          <When condition={variant == 'radio'}>
-            <Radio
-                defaultChecked={defaultChecked}
-                id={id}
-                label={label}
-                name={name}
-                onChange={onChange}
-                type="radio"
-                value={value}
-                {...props}
-            />
-            {children}
-          </When>
-          <Otherwise>{children}</Otherwise>
-        </Choose>
-      </div>
-    </ListItem>
-  )
-}
-
-export default SelectableListItem