playbook_ui 13.32.0.pre.alpha.PLAY14143297 → 13.32.0.pre.alpha.play1416movealiaslogic3239

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -4,7 +4,7 @@ import {
   screen,
   fireEvent,
 } from "../utilities/test-utils";
-import { Button, Filter, Flex, Select, TextInput } from "playbook-ui";
+import { Button, Filter, Flex, Select, TextInput } from "..";
 
 function FilterTest(props) {
   const SortingChangeCallback = (sortOptions) => {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, waitFor } from '../utilities/test-utils'
 
-import { FixedConfirmationToast } from 'playbook-ui'
+import { FixedConfirmationToast } from '../'
 
 beforeEach(() => {
     // Silences error logs within the test suite.

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import { Flex, FlexItem, Title } from  '../..'
 
 const FlexAlign = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  'playbook-ui'
+import { Flex, FlexItem, Title } from  '../../'
 
 const FlexDefault = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem } from 'playbook-ui'
+import { Flex, FlexItem } from  '../../'
 
 const FlexGap = (props) => {
   const count = () => {

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import { Flex, FlexItem, Title } from  '../..'
 
 const FlexInline = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import { Flex, FlexItem, Title } from  '../..'
 
 const FlexItemAlignSelf = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import { Flex, FlexItem, Title } from  '../..'
 
 const FlexItemExample = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import { Flex, FlexItem, Title } from  '../..'
 
 const FlexJustify = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import { Flex, FlexItem, Title } from  '../..'
 
 const FlexReverse = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import { Flex, FlexItem, Title } from  '../..'
 
 const FlexSpacing = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Flex, FlexItem, Title } from 'playbook-ui'
+import { Body, Flex, FlexItem, Title } from  '../..'
 
 const FlexWrap = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_group/form_group.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from "../utilities/test-utils";
 
-import { Button, FormGroup } from "playbook-ui";
+import { Button, FormGroup } from "..";
 
 test("should render a div with a button child", () => {
   const testId = "primary-test"

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -8,7 +8,6 @@ $selector: ".pb_form_pill";
 $pb_form_pill_height: 37px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
-  neutral: map-get($status_color_text, "neutral"),
 );
 
 
@@ -16,79 +15,42 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 calc($space-sm/3);
+  padding: 0 $space-sm/3;
   height: $pb_form_pill_height;
-  border-radius: calc($pb_form_pill_height/2);
+  border-radius: $pb_form_pill_height/2;
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
-      background-color: mix($color_value, $card_light, 10%);
-      @if ($color_name == "neutral") {
-        background-color: $white;
-        border: 1px solid $border_light;
-      }
+      background-color: rgba($color_value, $opacity-1);
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
         &:hover {
-          background-color: mix($color_value, $card_light, 20%);
-          @if ($color_name == "neutral") {
-            background-color: mix($neutral, $card_light, 20%);
-            border: 1px solid $border_light;
-          }
-        }
-        &:active {
-          background-color: mix($color_value, $card_light, 30%);
-          @if ($color_name == "neutral") {
-            background-color: mix($neutral, $card_light, 30%);
-          }
+          background-color: rgba($color_value, $opacity-2);
         }
       }
       #{$selector}_text {
         color: $color_value;
-        @if ($color_name == "neutral") {
-          color: $text_lt_default;
-        }
         padding-left: $space-sm;
-        padding-right: calc($space-sm/2);
+        padding-right: $space-sm/4;
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: calc($space-sm/4);
-        padding-right: calc($space-sm/4);
+        padding-left: $space-sm/2;
+        padding-right: $space-sm/4;
         display: flex;
         align-items: center;
-        // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
-        // before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
-        height: 27px;
-        border-radius: 70px;
+        height: 100%;
         cursor: pointer;
-        &:hover {
-          background-color: mix($color_value, $card_light, 40%);
-          @if ($color_name == "neutral") {
-            background-color: mix($neutral, $card_light, 60%);
-          }
-        }
       }
       #{$selector}_tag {
         color: $color_value;
         padding-left: $space-sm;
-        @if ($color_name == "neutral") {
-          color: $text_lt_default;
-        }
       }
     }
   }
-  &:focus {
-    outline: $primary solid 2px;
-    outline-offset: -1px;
-  }
-  &:focus-visible {
-    outline: $primary solid 2px;
-    outline-offset: -1px;
-  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;
@@ -108,71 +70,6 @@ $form_pill_colors: (
       &::before { line-height: 21px; }
     }
   }
-  &.dark {
-    @each $color_name, $color_value in $form_pill_colors {
-      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info. 
-      // Primary and Neutral are exceptions to the general rule in the handoff 
-      &[class*=_#{$color_name}]  {
-      //   background-color: mix($color_value, $card_dark, 10%);
-        // .pb_form_pill_tag {
-        //   color: $color_name;
-        // }
-        // .pb_form_pill_close {
-        //   color: $color_name;
-        //   &:hover {
-        //     background-color: mix($color_value, $card_dark, 40%);
-        //   }
-        // }
-        // &:hover {
-        //   background-color: mix($color_value, $card_dark, 20%);
-        // }
-        // &:active {
-        //   background-color: mix($color_value, $card_dark, 30%);
-        // }
-        @if ($color_name == "neutral") {
-          background-color: transparent;
-          border: 1px solid $border_dark;
-          .pb_form_pill_text, .pb_form_pill_tag {
-            color: $text_dk_default;
-          }
-          .pb_form_pill_close {
-            color: $text_dk_default;
-            &:hover {
-              background-color: mix($neutral, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($white, $card_dark, 10%);
-          }
-          &:active {
-            background-color: mix($white, $card_dark, 20%);
-          }
-          &:focus {
-            border: 1px solid $primary;
-          }
-        }
-        @if ($color_name == "primary") {
-          background-color: mix($active_dark, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag {
-            color: $active_dark;
-          }
-          .pb_form_pill_close {
-            color: $active_dark;
-            &:hover {
-              background-color: mix($active_dark, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($active_dark, $card_dark, 20px);
-          }
-          &:active {
-            background-color: mix($active_dark, $card_dark, 30%);
-          }
-        }
-      }
-    }
-  }
-
   &[class*=lowercase] {
     text-transform: lowercase;
   }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -1,10 +1,11 @@
+/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
@@ -17,9 +18,6 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
-  color?: "primary" | "neutral",
-  data?: {[key: string]: string},
-  tabIndex?: number,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -38,26 +36,20 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
-    color = "primary",
-    data = {},
-    tabIndex,
   } = props
   const css = classnames(
-    `pb_form_pill_kit_${color}`,
+    `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
   )
 
-  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <div className={css}
         id={id}
-        tabIndex={tabIndex}
-        {...dataProps}
         {...htmlProps}
     >
         {name &&

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb

@@ -1,5 +1 @@
-<%= pb_rails("form_pill", props: {
-    text_transform: "lowercase" ,
-    text: "THIS IS A TAG",
-    tabindex: 0,
-}) %>
+<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx

@@ -6,7 +6,6 @@ const FormPillExample = (props) => {
     <div>
       <FormPill
           onClick={() => alert('Click!')}
-          tabIndex={0}
           text="THIS IS A TAG"
           textTransform="lowercase"
           {...props}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -2,7 +2,6 @@
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    size: "small",
-   tabindex: 0,
 }) %>
 
 <br />
@@ -11,5 +10,4 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    size: "small",
-   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -9,7 +9,6 @@ const FormPillSize = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           size="small"
-          tabIndex={0}
           {...props}
       />
       <br />
@@ -17,7 +16,6 @@ const FormPillSize = (props) => {
       <FormPill
           name="Anna Black"
           size="small"
-          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb

@@ -1,4 +1 @@
-<%= pb_rails("form_pill", props: {
-    text: "this is a tag",
-    tabindex: 0,
-}) %>
+<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx

@@ -6,9 +6,8 @@ const FormPillDefault = (props) => {
     <div>
       <FormPill
           onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
+alert('Click!')
+}}
           text="this is a tag"
           {...props}
       />

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -1,7 +1,6 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-   tabindex: 0,
 }) %>
 
 <br />
@@ -9,5 +8,4 @@
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
-   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -9,7 +9,6 @@ const FormPillDefault = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           onClick={() => alert('Click!')}
-          tabIndex={0}
           {...props}
       />
       <br />
@@ -17,7 +16,6 @@ const FormPillDefault = (props) => {
       <FormPill
           name="Anna Black"
           onClick={() => alert('Click!')}
-          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -11,13 +11,9 @@ module Playbook
       prop :text_transform, type: Playbook::Props::Enum,
                             values: %w[none lowercase],
                             default: "none"
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary neutral],
-                   default: "primary"
-      prop :tabindex
 
       def classname
-        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", "primary", name, text, text_transform)
       end
 
       def display_text

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -7,8 +7,8 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import highchartsMore from "highcharts/highcharts-more";
 import solidGauge from "highcharts/modules/solid-gauge";
-import defaultColors from "../tokens/exports/_colors.module.scss";
-import typography from "../tokens/exports/_typography.module.scss";
+import defaultColors from "../tokens/exports/_colors.scss";
+import typography from "../tokens/exports/_typography.scss";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [
   { name: 'Name', value: 67 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -8,7 +8,7 @@ import {
   SectionSeparator,
   Body,
   Caption,
-} from "playbook-ui";
+} from "../..";
 
 const data = [{ name: "Name", value: 10 }];
 

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [
   { name: 'Name', value: 45 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [
   { name: 'Participants', value: 84 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [
   { name: 'Capacity', value: 75 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const GaugeHeight = (props) => (
   <div>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Gauge } from 'playbook-ui'
+import { Button, Gauge } from '../../'
 
 const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [{
   name: 'Rating', value: 4.5,

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Gauge } from 'playbook-ui'
+import { Flex, FlexItem, Gauge } from '../../'
 
 const GaugeSizing = (props) => (
   <div>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [
   { name: 'Score', value: 780 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data1 = [
   { name: 'Data Used', value: 32 },

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Hashtag } from 'playbook-ui'
+import { Hashtag } from '../../'
 
 const HashtagDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Hashtag } from 'playbook-ui'
+import { Hashtag } from '../../'
 
 const HashtagLink = (props) => {
   return (

data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js

@@ -2,7 +2,7 @@
 import React from 'react'
 import { render, screen, cleanup } from "../utilities/test-utils";
 
-import { Hashtag } from "playbook-ui";
+import { Hashtag } from "..";
 
 
 const testId = "primary-test"

data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen, cleanup } from "../utilities/test-utils";
 
-import { HomeAddressStreet } from "playbook-ui";
+import { HomeAddressStreet } from "..";
 
 
 const testId = "primary-test"