playbook_ui 11.19.0.pre.typeahead1 → 11.20.0.pre.alpha.focus1

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

@@ -0,0 +1,6 @@
+@mixin focus {
+  &:focus-visible {
+    outline: $focus_color solid 2px;
+    outline-offset: 2px;
+  }
+}

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

@@ -94,11 +94,13 @@ $hover_colors: (
 );
 
 /* Focus colors -----------------------*/
+$focus_color:         $primary;
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
-  focus_input_dark:         $focus_input_dark
+  focus_input_dark:         $focus_input_dark,
+  focus_color:              $focus_color
 );
 
 /* Border colors ----------------------*/

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.18.0"
-  VERSION = "11.19.0.pre.typeahead1"
+  PREVIOUS_VERSION = "11.20.0"
+  VERSION = "11.20.0.pre.alpha.focus1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.19.0.pre.typeahead1
+  version: 11.20.0.pre.alpha.focus1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-11 00:00:00.000000000 Z
+date: 2023-01-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -397,6 +397,9 @@ files:
 - app/pb_kits/playbook/pb_body/docs/_body_light.html.erb
 - app/pb_kits/playbook/pb_body/docs/_body_light.jsx
 - app/pb_kits/playbook/pb_body/docs/_body_light.md
+- app/pb_kits/playbook/pb_body/docs/_body_styled.html.erb
+- app/pb_kits/playbook/pb_body/docs/_body_styled.jsx
+- app/pb_kits/playbook/pb_body/docs/_body_styled.md
 - app/pb_kits/playbook/pb_body/docs/_description.md
 - app/pb_kits/playbook/pb_body/docs/_footer.md
 - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -887,6 +890,7 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
@@ -1336,9 +1340,9 @@ files:
 - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
 - app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
 - app/pb_kits/playbook/pb_line_graph/line_graph.rb
-- app/pb_kits/playbook/pb_list/_list.jsx
 - app/pb_kits/playbook/pb_list/_list.scss
-- app/pb_kits/playbook/pb_list/_list_item.jsx
+- app/pb_kits/playbook/pb_list/_list.tsx
+- app/pb_kits/playbook/pb_list/_list_item.tsx
 - app/pb_kits/playbook/pb_list/_list_mixin.scss
 - app/pb_kits/playbook/pb_list/docs/_description.md
 - app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb
@@ -1533,8 +1537,8 @@ files:
 - app/pb_kits/playbook/pb_pill/docs/index.js
 - app/pb_kits/playbook/pb_pill/pill.html.erb
 - app/pb_kits/playbook/pb_pill/pill.rb
-- app/pb_kits/playbook/pb_popover/_popover.jsx
 - app/pb_kits/playbook/pb_popover/_popover.scss
+- app/pb_kits/playbook/pb_popover/_popover.tsx
 - app/pb_kits/playbook/pb_popover/docs/_description.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
@@ -1549,9 +1553,10 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx
 - app/pb_kits/playbook/pb_popover/docs/example.yml
 - app/pb_kits/playbook/pb_popover/docs/index.js
-- app/pb_kits/playbook/pb_popover/index.js
+- app/pb_kits/playbook/pb_popover/index.ts
 - app/pb_kits/playbook/pb_popover/popover.html.erb
 - app/pb_kits/playbook/pb_popover/popover.rb
+- app/pb_kits/playbook/pb_popover/popover.test.js
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss
 - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
@@ -1698,8 +1703,8 @@ files:
 - app/pb_kits/playbook/pb_select/select.html.erb
 - app/pb_kits/playbook/pb_select/select.rb
 - app/pb_kits/playbook/pb_select/select.test.js
-- app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx
 - app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss
+- app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx
 - app/pb_kits/playbook/pb_selectable_card/docs/_description.md
 - app/pb_kits/playbook/pb_selectable_card/docs/_footer.md
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.html.erb
@@ -1724,6 +1729,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_card/docs/index.js
 - app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb
 - app/pb_kits/playbook/pb_selectable_card/selectable_card.rb
+- app/pb_kits/playbook/pb_selectable_card/selectable_card.test.js
 - app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx
 - app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.html.erb
@@ -1737,8 +1743,8 @@ files:
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js
 - app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb
 - app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb
-- app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx
 - app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss
+- app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb
@@ -1748,6 +1754,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_icon/docs/index.js
 - 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/_selectable_list.scss
@@ -2228,6 +2235,7 @@ files:
 - app/pb_kits/playbook/playbook-doc.js
 - app/pb_kits/playbook/playbook-rails-react-bindings.js
 - app/pb_kits/playbook/playbook-rails.js
+- app/pb_kits/playbook/tokens/_accessibility.scss
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -1,98 +0,0 @@
-/* @flow */
-
-import React, { type Node } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-type ListProps = {
-  aria?: object,
-  borderless: boolean,
-  className?: string,
-  children: array<Node> | Node,
-  dark: boolean,
-  data?: object,
-  id?: string,
-  layout: "" | "left" | "right",
-  ordered: boolean,
-  role?: string,
-  tabIndex?: string,
-  text?: string,
-  size?: string,
-  variant?: string,
-  xpadding: boolean,
-}
-
-const List = (props: ListProps) => {
-  const {
-    aria = {},
-    borderless = false,
-    children,
-    className,
-    dark = false,
-    data = {},
-    id,
-    layout = '',
-    ordered = false,
-    role,
-    size = '',
-    tabIndex,
-    xpadding = false,
-    variant,
-    text,
-  } = props
-
-  const layoutClass = {
-    left: 'layout_left',
-    right: 'layout_right',
-    default: '',
-  }
-
-  const childrenWithProps = React.Children.map(children, (child) => {
-    return React.cloneElement(child, { text, variant })
-  })
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_list_kit', layoutClass[layout], size, {
-      dark: dark,
-      borderless: borderless,
-      ordered: ordered,
-      xpadding: xpadding,
-    }),
-    globalProps(props),
-    className
-  )
-
-  return (
-    <div
-        className={classes}
-    >
-      <If condition={ordered}>
-        <ol
-            {...ariaProps}
-            {...dataProps}
-            className={className}
-            id={id}
-            role={role}
-            tabIndex={tabIndex}
-        >
-          {childrenWithProps}
-        </ol>
-        <Else />
-        <ul
-            {...ariaProps}
-            {...dataProps}
-            className={className}
-            id={id}
-            role={role}
-            tabIndex={tabIndex}
-        >
-          {childrenWithProps}
-        </ul>
-      </If>
-    </div>
-  )
-}
-
-export default List

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -1,227 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-// @flow
-
-import React, {useEffect} from "react";
-import ReactDOM from "react-dom";
-
-import {
-  Popper,
-  Manager as PopperManager,
-  PopperProps,
-  Reference as PopperReference,
-} from "react-popper";
-
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-  noop,
-} from "../utilities/props";
-
-import classnames from "classnames";
-import { globalProps } from "../utilities/globalProps";
-
-type PbPopoverProps = {
-  aria?: object,
-  className?: string,
-  closeOnClick?: "outside" | "inside",
-  data?: object,
-  id?: String,
-  offset?: boolean,
-  reference: PopperReference,
-  show?: boolean,
-  shouldClosePopover?: () => boolean,
-} & PopperProps;
-
-// Prop enabled default modifiers here
-// https://popper.js.org/docs/v2/modifiers
-
-const POPOVER_MODIFIERS = {
-  offset: {
-    //https://popper.js.org/docs/v2/modifiers/offset/
-    enabled: true,
-    name: "offset",
-    options: {
-      offset: [0, 20],
-    },
-    phase: "main",
-  },
-};
-
-const popoverModifiers = ({ modifiers, offset }) => {
-  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
-};
-
-const Popover = (props: PbPopoverProps) => {
-  const {
-    aria = {},
-    className,
-    children,
-    data = {},
-    id,
-    modifiers,
-    offset,
-    placement,
-    referenceElement,
-    zIndex,
-    maxHeight,
-    maxWidth,
-    minHeight,
-    minWidth,
-  } = props;
-
-  const popoverSpacing =
-    globalProps(props).includes("dark") || !globalProps(props)
-      ? "p_sm"
-      : globalProps(props);
-  const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
-  const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
-  const widthHeightStyles = () => {
-    return Object.assign(
-      {},
-      maxHeight ? { maxHeight: maxHeight } : {},
-      maxWidth ? { maxWidth: maxWidth } : {},
-      minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {}
-    );
-  };
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const classes = classnames(
-    buildCss("pb_popover_kit"),
-    globalProps(props),
-    className
-  );
-
-  return (
-    <Popper
-        modifiers={popoverModifiers({ modifiers, offset })}
-        placement={placement}
-        referenceElement={referenceElement}
-    >
-      {({ placement, ref, style }) => {
-        return (
-          <div
-              {...ariaProps}
-              {...dataProps}
-              className={classes}
-              data-placement={placement}
-              id={id}
-              ref={ref}
-              style={Object.assign({}, style, zIndexStyle)}
-          >
-            <div
-                className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
-            >
-              <div
-                  className={classnames(
-                  "pb_popover_body",
-                  popoverSpacing,
-                  overflowHandling
-                )}
-                  style={widthHeightStyles()}
-              >
-                {children}
-              </div>
-            </div>
-          </div>
-        );
-      }}
-    </Popper>
-  );
-};
-
-const PbReactPopover = (props: PbPopoverProps) => {
-  const {
-    className,
-    children,
-    modifiers = [],
-    offset = false,
-    placement = "left",
-    portal = "body",
-    reference,
-    referenceElement,
-    show = false,
-    usePortal = true,
-    zIndex,
-    maxHeight,
-    maxWidth,
-    minHeight,
-    minWidth,
-  } = props;
-
-  useEffect(() => {
-    const { closeOnClick, shouldClosePopover = noop } = props
-
-    if (!closeOnClick) return
-
-    document.body.addEventListener('click', ({ target }) => {
-      const targetIsPopover =
-        target.closest('[class^=pb_popover_tooltip]') !== null
-      const targetIsReference =
-        target.closest('.pb_popover_reference_wrapper') !== null
-
-      switch (closeOnClick) {
-        case 'outside':
-          if (!targetIsPopover || targetIsReference) {
-            shouldClosePopover(true)
-          }
-          break
-        case 'inside':
-          if (targetIsPopover || targetIsReference) {
-            shouldClosePopover(true)
-          }
-          break
-        case 'any':
-          shouldClosePopover(true)
-          break
-      }
-    }, { capture: true })
-  }, [])
-
-  const popoverComponent = (
-    <Popover
-        className={className}
-        maxHeight={maxHeight}
-        maxWidth={maxWidth}
-        minHeight={minHeight}
-        minWidth={minWidth}
-        modifiers={modifiers}
-        offset={offset}
-        placement={placement}
-        referenceElement={referenceElement}
-        zIndex={zIndex}
-        {...props}
-    >
-      {children}
-    </Popover>
-  );
-
-  return (
-    <PopperManager>
-      <If condition={reference && !referenceElement}>
-        <PopperReference>
-          {({ ref }) => (
-            <span className="pb_popover_reference_wrapper"
-                ref={ref}
-            >
-              <reference.type {...reference.props} />
-            </span>
-          )}
-        </PopperReference>
-      </If>
-      <If condition={show}>
-        <If condition={usePortal}>
-          {ReactDOM.createPortal(
-            popoverComponent,
-            document.querySelector(portal)
-          )}
-          <Else />
-          {popoverComponent}
-        </If>
-      </If>
-    </PopperManager>
-  );
-};
-
-export default PbReactPopover;