playbook_ui 13.33.0.pre.alpha.PLAY1454formpillicons3309 → 13.33.0.pre.alpha.PLAY14143305

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  '../..'
+import { Flex, FlexItem, Title } from 'playbook-ui'
 
 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  '../..'
+import { Body, Flex, FlexItem, Title } from 'playbook-ui'
 
 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 "..";
+import { Button, FormGroup } from "playbook-ui";
 
 test("should render a div with a button child", () => {
   const testId = "primary-test"

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

@@ -16,9 +16,9 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 $space-sm/3;
+  padding: 0 calc($space-sm/3);
   height: $pb_form_pill_height;
-  border-radius: $pb_form_pill_height/2;
+  border-radius: calc($pb_form_pill_height/2);
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
@@ -52,12 +52,12 @@ $form_pill_colors: (
           color: $text_lt_default;
         }
         padding-left: $space-sm;
-        padding-right: $space-sm/2;
+        padding-right: calc($space-sm/2);
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: $space-sm/4;
-        padding-right: $space-sm/4;
+        padding-left: calc($space-sm/4);
+        padding-right: calc($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
@@ -89,10 +89,6 @@ $form_pill_colors: (
     outline: $primary solid 2px;
     outline-offset: -1px;
   }
-  .pb_form_pill_icon {
-    height: 12px !important;
-    width: 12px !important;
-  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -50,15 +50,4 @@ test('displays size variant', () => {
     )
     const kit = screen.getByTestId('formpill')
     expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
-});
-
-test('displays icon', () => {
-    render(
-        <FormPill            
-            data={{ testid: testId }}
-            icon={"test"}
-        />
-    )
-    const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
 });

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

@@ -1,4 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title'
@@ -21,7 +20,6 @@ type FormPillProps = {
   color?: "primary" | "neutral",
   data?: {[key: string]: string},
   tabIndex?: number,
-  icon?: string,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -43,12 +41,9 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     color = "primary",
     data = {},
     tabIndex,
-    icon = "",
   } = props
-
-  const iconClass = icon ? "_icon" : ""
   const css = classnames(
-    `pb_form_pill_kit_${color}${iconClass}`,
+    `pb_form_pill_kit_${color}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
@@ -65,60 +60,29 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         {...dataProps}
         {...htmlProps}
     >
-      {((name && !icon && !text) || (name && !icon && text)) && (
-        <>
-          <Avatar
-              imageUrl={avatarUrl}
-              name={name}
-              size="xs"
-              status={null}
-          />
-          <Title
-              className="pb_form_pill_text"
-              size={4}
-              text={name}
-          />
-        </>
-      )}
-      {((name && icon && !text) || (name && icon && text)) && (
-        <>
-          <Avatar
-              imageUrl={avatarUrl}
-              name={name}
-              size="xs"
-              status={null}
-          />
-          <Title
-              className="pb_form_pill_text"
-              size={4}
-              text={name}
-          />
-          <Icon
-              className="pb_form_pill_icon"
-              icon={icon}
-          />
-        </>
-      )}
-      {(!name && icon && text) && (
+        {name &&
         <>
-          <Icon
-              className="pb_form_pill_icon"
-              icon={icon}
-          />
-          <Title
-              className="pb_form_pill_tag"
-              size={4}
-              text={text}
-          />
+        <Avatar
+            imageUrl={avatarUrl}
+            name={name}
+            size="xs"
+            status={null}
+        />
+        <Title
+            className="pb_form_pill_text"
+            size={4}
+            text={name}
+        />
         </>
-      )}
-      {(!name && !icon && text) && (
+        }
+
+      {text &&
         <Title
             className="pb_form_pill_tag"
             size={4}
             text={text}
         />
-      )}
+      }
       <div
           className="pb_form_pill_close"
           onClick={onClick}

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

@@ -5,11 +5,10 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  - form_pill_icon: Form Pill Icon
+
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  - form_pill_icon: Form Pill Icon

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

@@ -2,4 +2,4 @@ export { default as FormPillUser } from './_form_pill_user.jsx'
 export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
-export { default as FormPillIcon } from './_form_pill_icon.jsx'
+

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

@@ -1,19 +1,12 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **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" }) %>
-    <% if object.icon.present? %>
-      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
-    <% end %>
-  <% elsif object.text.present? %>
-      <% if object.icon.present? %>
-        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
-      <% end %>
-      <% if object.text.present? %>
-        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-      <% end %>
-  <% end %>
-  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-    <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
-  <% end %>
-<% end %>
+      <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+        <% elsif object.text.present? %>
+          <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+            <% end %>
+
+              <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+                <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+                  <% end %>
+                    <% end %>

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

@@ -15,10 +15,9 @@ module Playbook
                    values: %w[primary neutral],
                    default: "primary"
       prop :tabindex
-      prop :icon
 
       def classname
-        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
       end
 
       def display_text
@@ -28,10 +27,6 @@ module Playbook
       def size_class
         size == "small" ? " small" : ""
       end
-
-      def icon_class
-        icon ? "icon" : nil
-      end
     end
   end
 end

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.scss";
-import typography from "../tokens/exports/_typography.scss";
+import defaultColors from "../tokens/exports/_colors.module.scss";
+import typography from "../tokens/exports/_typography.module.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 '../../'
+import { Gauge } from 'playbook-ui'
 
 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 "../..";
+} from "playbook-ui";
 
 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 '../../'
+import { Gauge } from 'playbook-ui'
 
 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 '../../'
+import { Gauge } from 'playbook-ui'
 
 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 '../../'
+import { Gauge } from 'playbook-ui'
 
 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 '../../'
+import { Gauge } from 'playbook-ui'
 
 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 '../../'
+import { Button, Gauge } from 'playbook-ui'
 
 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 '../../'
+import { Gauge } from 'playbook-ui'
 
 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 '../../'
+import { Flex, FlexItem, Gauge } from 'playbook-ui'
 
 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 '../../'
+import { Gauge } from 'playbook-ui'
 
 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 '../../'
+import { Gauge } from 'playbook-ui'
 
 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 '../../'
+import { Hashtag } from 'playbook-ui'
 
 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 '../../'
+import { Hashtag } from 'playbook-ui'
 
 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 "..";
+import { Hashtag } from "playbook-ui";
 
 
 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 "..";
+import { HomeAddressStreet } from "playbook-ui";
 
 
 const testId = "primary-test"

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon } from '../../'
+import { Icon } from 'playbook-ui'
 
 const config = {
   icon: (

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

@@ -54,7 +54,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: $size/2;
+      border-radius: calc($size/2);
       background: $silver;
       color: $text_lt_light;
       font-size: $size * 0.38;
@@ -68,7 +68,7 @@ $pb_icon_circle_sizes: (
   }
 
   @each $color_name, $color_value in $colors {
-    &[class*=_#{$color_name}] {
+    &[class*=_#{"" + $color_name}] {
       color: $color_value;
       background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
       &.dark {

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

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

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

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

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx

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

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx

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

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx

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

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -2,6 +2,6 @@
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: $space-xs/1.5;
+    margin-bottom: calc($space-xs/1.5);
   }
 }

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx

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

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { render, cleanup } from "../utilities/test-utils"
-import { Layout, Card } from ".."
+import { Layout, Card } from "playbook-ui"
 
 function LayoutTest(props) {
   return (

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

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

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

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

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx

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

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -1,9 +1,7 @@
-/* @flow */
-
 import React from 'react'
 import { noop } from 'lodash'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
-import Image from '../../pb_image/_image'
+import { Image } from 'playbook-ui'
 
 type SlideType = {
   alt?: string,

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -1,8 +1,6 @@
-/* @flow */
-
 import { noop } from 'lodash'
 import React, { useState } from 'react'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import { CircleIconButton } from 'playbook-ui'
 
 import Slide from './Slide'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import Image from '../../pb_image/_image'
+import { Image } from 'playbook-ui'
 
 type ThumbnailType = {
   active?: boolean,

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 import React, { useContext } from "react";
 import classnames from "classnames";
 import {
@@ -11,12 +10,7 @@ import {
 import { globalProps, GlobalProps } from "../../utilities/globalProps";
 import { LightboxContext } from "../_lightbox_context";
 
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
-import Caption from "../../pb_caption/_caption";
-import Flex from "../../pb_flex/_flex";
-import FlexItem from "../../pb_flex/_flex_item";
-import Title from "../../pb_title/_title";
-import Button from "../../pb_button/_button";
+import { CircleIconButton, Caption, Flex, FlexItem, Title, Button } from "playbook-ui";
 
 type LightboxHeaderProps = {
   aria?: { [key: string]: string };

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from '../../'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCompoundComponent = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image, Button, Body, FlexItem } from '../../'
+import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCurrentPhoto = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from "react";
-import { Flex, Image, Title, Pill } from "../../";
+import { Flex, Image, Title, Pill } from "playbook-ui";
 import Lightbox from "../_lightbox.tsx";
 
 const LightboxCustomHeader = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from '../../'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxDefault = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from '../../'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxMultiple = (props) => {