playbook_ui 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

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

@@ -1,10 +1,5 @@
 import React from 'react'
-
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const FilterNoBackground = (props) => {
   const options = [

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

@@ -1,9 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const FilterNoSort = (props) => {
   const options = [

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

@@ -1,9 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const FilterOnly = (props) => {
   const options = [

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

@@ -1,10 +1,5 @@
 import React from 'react'
-
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

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

@@ -1,9 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const FilterPopoverProps = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -7,7 +7,7 @@ $pb_pill_height: 25px;
 
 
 $confirmation_toast_colors: (
-  neutral:        $text_lt_light,
+  neutral:        $neutral,
   success:        $success,
   error:          $error,
   tip:          transparent,
@@ -87,7 +87,7 @@ $confirmation_toast_colors: (
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
+        -webkit-box-orient: vertical; 
         white-space: normal;
         text-align: left;
       }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,5 @@
 import React from 'react'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+import { Body, Flex, FlexItem, Title } from 'playbook-ui'
 
 const FlexWrap = (props) => {
   return (

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -25,7 +25,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -24,7 +24,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
@@ -32,10 +32,10 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
 

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

@@ -23,13 +23,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
     font-size: $font_small !important;
   }
-
-  &[class*=wrapped] {
-    height: max-content;
-    padding-top: $space-xxs;
-    padding-bottom: $space-xxs;
-  }
-
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: mix($color_value, $card_light, 10%);
@@ -149,7 +142,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag,
+    + .pb_form_pill_text, + .pb_form_pill_tag, 
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
     + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
@@ -178,7 +171,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag,
+      + .pb_form_pill_text, + .pb_form_pill_tag, 
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
       + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;

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

@@ -22,7 +22,6 @@ type FormPillProps = {
   data?: {[key: string]: string},
   tabIndex?: number,
   icon?: string,
-  wrapped?: boolean,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -39,7 +38,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     onClick = () => undefined,
     avatarUrl,
     closeProps = {},
-    wrapped,
     size = '',
     textTransform = 'none',
     color = "primary",
@@ -50,7 +48,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
-  const wrappedClass = wrapped ? "wrapped" : ""
 
   const filteredProps: FormPillProps = {...props}
   delete filteredProps.truncate
@@ -58,7 +55,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(filteredProps),
-    wrappedClass,
     className,
     size === 'small' ? 'small' : null,
     textTransform,

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

@@ -1,7 +1,5 @@
 import React from 'react'
-
-import FormPill from '../../pb_form_pill/_form_pill'
-import Title from '../../pb_title/_title'
+import { FormPill, Title } from 'playbook-ui'
 
 const FormPillColors = (props) => {
   return (

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

@@ -1,9 +1,5 @@
 import React from 'react'
-
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import FormPill from '../../pb_form_pill/_form_pill'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

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

@@ -4,7 +4,6 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
-  - form_pill_wrapped: Wrapped Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -14,7 +13,6 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
-  - form_pill_wrapped: Wrapped Text
   - 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

@@ -5,4 +5,3 @@ export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
 export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
-export { default as FormPillWrapped } from './_form_pill_wrapped.jsx'

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

@@ -16,11 +16,9 @@ module Playbook
                    default: "primary"
       prop :tabindex
       prop :icon
-      prop :wrapped, type: Playbook::Props::Boolean,
-                     default: false
 
       def classname
-        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform, wrapped_class)
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
       end
 
       def display_text
@@ -38,10 +36,6 @@ module Playbook
       def close_icon_size
         size == "small" ? "xs" : "sm"
       end
-
-      def wrapped_class
-        wrapped ? "wrapped" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import GanttChart from '../../pb_gantt_chart/_gantt_chart'
+import { GanttChart } from "playbook-ui";
 
 const mockOptions = {
   title: {

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

@@ -13,7 +13,7 @@ import typography from "../tokens/exports/_typography.module.scss";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
-import { merge } from '../utilities/object' 
+import { merge } from 'lodash'
 
 type GaugeProps = {
   aria: { [key: string]: string };

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

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

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

@@ -1,13 +1,14 @@
 import React from "react";
-
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import Body from '../../pb_body/_body'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Title from '../../pb_title/_title'
+import {
+  Title,
+  Card,
+  Gauge,
+  Flex,
+  FlexItem,
+  SectionSeparator,
+  Body,
+  Caption,
+} 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 '../../pb_gauge/_gauge'
+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 '../../pb_gauge/_gauge'
+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 '../../pb_gauge/_gauge'
+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 '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const GaugeHeight = (props) => (
   <div>

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

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-
-import Button from '../../pb_button/_button'
-import Gauge from '../../pb_gauge/_gauge'
+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 '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const data = [{
   name: 'Rating', value: 4.5,

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

@@ -1,8 +1,5 @@
 import React from 'react'
-
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
+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 '../../pb_gauge/_gauge'
+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 '../../pb_gauge/_gauge'
+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 '../../pb_hashtag/_hashtag'
+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 '../../pb_hashtag/_hashtag'
+import { Hashtag } from 'playbook-ui'
 
 const HashtagLink = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,17 +1,10 @@
 @import "../tokens/colors";
 
-$additional_colors: (
-  "light": $text_lt_light,
-  "lighter": $text_lt_lighter,
-  "link": $primary
-);
-
 // All the merges below create $icon_colors, a map of all color tokens in colors.scss
 $merge_kits1: map-merge($status_colors, $category_colors);
 $merge_kits2: map-merge($merge_kits1, $product_colors);
 $merge_kits3: map-merge($merge_kits2, $text_colors);
-$merge_kits4: map-merge($merge_kits3, $data_colors);
-$icon_colors: map-merge($merge_kits4, $additional_colors);
+$icon_colors: map-merge($merge_kits3, $data_colors);
 
 .pb_custom_icon, .pb_icon_kit {
   @each $color_name, $color_value in $icon_colors {

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb

@@ -1,11 +1,5 @@
-<%= pb_rails("flex", props: { margin_bottom: "sm" }) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", size: "2x" }) %>
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
     <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
-<% end %>
-
-<%= pb_rails("flex", props: {}) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "light", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "lighter", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "link", size: "2x" }) %>
-<% end %>
+<% end %>

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

@@ -1,57 +1,32 @@
 import React from "react"
 import Icon from "../_icon"
-import Flex from "../../pb_flex/_flex"
 
 const IconDefault = (props) => {
   return (
-    <div>
-      <Flex marginBottom="sm">
-        <Icon
-            color="primary"
-            fixedWidth
-            icon="user"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="data_4"
-            fixedWidth
-            icon="recycle"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="product_5_background"
-            fixedWidth
-            icon="product-roofing"
-            size="2x"
-            {...props}
-        />
-      </Flex>
-
-      <Flex>
-        <Icon
-            color="light"
-            fixedWidth
-            icon="user"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="lighter"
-            fixedWidth
-            icon="recycle"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="link"
-            fixedWidth
-            icon="product-roofing"
-            size="2x"
-            {...props}
-        />
-      </Flex>
+    <div style={{ display: "flex", flexDirection: "column"}}>
+      <Icon
+          color="primary"
+          fixedWidth
+          icon="user"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="data_4"
+          fixedWidth
+          icon="recycle"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="product_5_background"
+          fixedWidth
+          icon="product-roofing"
+          size="2x"
+          {...props}
+      />
     </div>
   )
 }

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

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

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -49,7 +49,7 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          borderRadius="xs"
+          borderRadius="lg"
           htmlType={htmlType}
           link={link}
           newWindow={newWindow}