playbook_ui 14.7.0.pre.alpha.spacingquickchange4482 → 14.7.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb4670689518bf254b63ee24477971a5e2c1666b7f452199ad898551857bd62a
-  data.tar.gz: d334c3d12c391703d725f9a608c454087732ed3beda3cdca6e5b0bbb000dde49
+  metadata.gz: 656e9e66e2df384c9f3d9ad833d269551418aa20f70c3e8cb4b8b017ce1b2db1
+  data.tar.gz: 28c337d7bd834f0d8448010014dc8bbbab8162f02ee5afe95cd8caacc250aee6
 SHA512:
-  metadata.gz: '05496ee6555f50603e6fec1676da0f40c0fc2de7d90869409cd06b2de2d7e7a70896d6129480363fc6f908b22e6413406bbe29177a468480daca64af5f0fae5d'
-  data.tar.gz: bb61330ca3b6dc7340b0773eb0fcb3c7ad5312413c61d82f0ef6b070e7b8db8c044ec504c6ad67358135c8b16888c7615da8793114c715e4da8482879ccee752
+  metadata.gz: 6578a809aafafb0bbe3be5e2ad11701e14dc359fb34d4157153a1909fc6d06ca9b3ac9c98461a7205bd9f3565d51fa626b64500fcea13b55d79302c9e011f7b0
+  data.tar.gz: 598e947939ac29bdc05f48871d9a63d41295836bc44cf225a3374a1c72c6f92e13c9e684b26d26ba9d04095b50a126dac0d79f4e322c54470021efbe51b29ce5

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -29,7 +30,6 @@
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_draggable/draggable';
-@import 'pb_drawer/drawer';
 @import 'pb_dropdown/dropdown';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
@@ -54,7 +54,6 @@
 @import 'pb_legend/legend';
 @import 'pb_lightbox/lightbox';
 @import 'pb_line_graph/line_graph';
-@import 'pb_link/link';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
 @import 'pb_map/map';
@@ -84,7 +83,6 @@
 @import 'pb_selectable_card_icon/selectable_card_icon';
 @import 'pb_selectable_icon/selectable_icon';
 @import 'pb_selectable_list/selectable_list';
-@import 'pb_skeleton_loading/skeleton_loading';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';
@@ -108,6 +106,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import 'pb_drawer/drawer';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -16,7 +16,6 @@ interface CustomCellProps {
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   row: Row<GenericObject>
   value?: string
-  customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
 } 
 
 export const CustomCell = ({
@@ -24,7 +23,6 @@ export const CustomCell = ({
   onRowToggleClick,
   row,
   value,
-  customRenderer,
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
@@ -63,12 +61,7 @@ export const CustomCell = ({
           </button>
         ) : null}
         <FlexItem paddingLeft={renderButton? "none" : "xs"}>
-          {row.depth === 0 ? (
-            customRenderer ? customRenderer(row, getValue()) : getValue()
-           ) :(
-            customRenderer ? customRenderer(row, value) : value
-           )
-           }
+          {row.depth === 0 ? getValue() : value}
         </FlexItem>
       </Flex>
     </div>

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -90,8 +90,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const columnHelper = createColumnHelper()
 
-  //Create cells for columns, with customization for first column
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
+  //Create cells for first columns
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,16 +101,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    if (index === 0) {
+    // Use customRenderer if provided, otherwise default rendering
+    if (customRenderer) {
+      return customRenderer(row, getValue())
+    }
+
       switch (row.depth) {
         case 0: {
           return (
-                <CustomCell
-                    customRenderer={customRenderer}
-                    getValue={getValue}
-                    onRowToggleClick={onRowToggleClick}
-                    row={row}
-                />
+            <CustomCell
+                getValue={getValue}
+                onRowToggleClick={onRowToggleClick}
+                row={row}
+            />
           )
         }
         default: {
@@ -119,7 +122,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const accessorValue = rowData[depthAccessor]
           return accessorValue ? (
             <CustomCell
-                customRenderer={customRenderer}
                 onRowToggleClick={onRowToggleClick}
                 row={row} 
                 value={accessorValue} 
@@ -130,13 +132,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         }
       }
     }
-    return customRenderer
-    ? customRenderer(row, getValue())
-    : getValue()
-    }
+
     return columnCells
   }
-//Create column array in format needed by Tanstack
+
+  //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
       columnDefinitions.map((column, index) => {
@@ -147,12 +147,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         }),
       }
 
-  if (column.cellAccessors || column.customRenderer) {
-    columnStructure.cell = createCellFunction(
-      column.cellAccessors,
-      column.customRenderer,
-      index
-    )
+  // Use the custom renderer if provided, EXCEPT for the first column
+  if (index !== 0) {
+    if (column.cellAccessors || column.customRenderer) {
+      columnStructure.cell = createCellFunction(
+        column.cellAccessors,
+        column.customRenderer
+      )
+    }
+  } else {
+    // For the first column, apply createCellFunction without customRenderer
+    if (column.cellAccessors) {
+      columnStructure.cell = createCellFunction(column.cellAccessors)
+    }
   }
 
   return columnStructure

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable, Pill } from "playbook-ui"
+import { AdvancedTable } from "playbook-ui"
 
 const MOCK_DATA = [
   {
@@ -88,28 +88,6 @@ const columnDefinitions = [
   },
 ]
 
-const columnDefinitionsCustomRenderer = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    accessor: "newEnrollments",
-    label: "New Enrollments",
-    customRenderer: (row, value) => (
-      <Pill text={value} 
-          variant="success"    
-      />
-    ),
-  },
-  {
-    accessor: "scheduledMeetings",
-    label: "Scheduled Meetings",
-  },
-]
-
-
 const subRowHeaders = ["Quarter"]
 
 const testId = "advanced_table"
@@ -485,17 +463,3 @@ test("responsive none prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })
-
-test("customRenderer prop functions as expected", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitionsCustomRenderer}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const pill = kit.querySelector(".pb_pill_kit_success_lowercase")
-  expect(pill).toBeInTheDocument()
-})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {
@@ -8,18 +8,7 @@ const AdvancedTableCustomCell = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-      customRenderer: (row, value) => (
-        <Flex>
-          <Title size={4}
-              text={value} 
-          />
-          <Badge dark
-              marginLeft="xxs"
-              text={row.original.newEnrollments > 20 ? "High" : "Low"}
-              variant="neutral"
-          />
-        </Flex>
-      ), 
+
     },
     {
       accessor: "newEnrollments",

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -109,9 +109,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   // coerce to array
   const cardChildren = React.Children.toArray(children)
   const dynamicInlineProps = globalInlineProps(props);
-  const { style: htmlStyle = {}, ...restHtmlProps } = htmlProps as { style?: React.CSSProperties };
-  const mergedStyles: React.CSSProperties = { ...htmlStyle, ...dynamicInlineProps };
-
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -127,7 +124,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'
-  
+
   return (
     <>
     {
@@ -138,9 +135,9 @@ const Card = (props: CardPropTypes): React.ReactElement => {
         <Tag
             {...ariaProps}
             {...dataProps}
+            {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
-            {...restHtmlProps}
-            style={mergedStyles} 
+            style={dynamicInlineProps}
         >
           {subComponentTags('Header')}
           {
@@ -167,9 +164,9 @@ const Card = (props: CardPropTypes): React.ReactElement => {
           <Tag
               {...ariaProps}
               {...dataProps}
+              {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
-              {...restHtmlProps}
-              style={mergedStyles} 
+              style={dynamicInlineProps}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -28,7 +28,8 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
-  border-width: $pb_card_border_width * 2;
+  border-width: $pb_card_border_width;
+  outline: 1px solid $border_color;
 }
 
 @mixin pb_card_selected_dark {

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>  
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -26,7 +26,6 @@ type CurrencyProps = {
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
   unstyled?: boolean,
-  commaSeparator?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -54,7 +53,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variant = 'default',
     dark = false,
     unstyled = false,
-    commaSeparator = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
@@ -76,7 +74,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     className
   )
 
-  const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', {
+  const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
     notation: 'compact',
     maximumFractionDigits: 1,
   }).format(input)
@@ -90,20 +88,12 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
-  const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
+    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
-  const formatAmount = (amount: string) => {
-    if (!commaSeparator) return amount;
-    
-    const [wholePart, decimalPart] = amount.split('.');
-    const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
-    return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
-  }
-
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
-  const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
-  const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
+    getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
+    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
   return (
     <div

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -43,9 +43,6 @@ module Playbook
       prop :unstyled, type: Playbook::Props::Boolean,
                       default: false
 
-      prop :comma_separator, type: Playbook::Props::Boolean,
-                             default: false
-
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -68,7 +65,7 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : formatted_amount,
+          text: abbreviate ? abbreviated_value : whole_value,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -99,38 +96,28 @@ module Playbook
     private
 
       def whole_value
-        value = amount.split(".").first
-        if comma_separator
-          number_with_delimiter(value.gsub(",", ""))
-        else
-          value
-        end
+        return amount if decimals == "matching"
+
+        amount.split(".").first.to_s
       end
 
-      def decimal_value
-        amount.split(".")[1] || "00"
+      def abbreviated_value(index = 0..-2)
+        value = amount.split(".").first.split(",").join("")
+        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
+        abbreviated_num[index]
       end
 
       def units_element
         return "" if decimals == "matching" && !abbreviate && !unit
 
-        if unit.nil? && !abbreviate
-          if decimals == "matching"
-            ""
-          else
-            ".#{decimal_value}"
-          end
+        _, decimal_part = amount.split(".")
+        if unit.nil? && abbreviate == false
+          decimal_part.nil? ? ".00" : ".#{decimal_part}"
         else
           abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
         end
       end
 
-      def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.gsub(",", "").to_i
-        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
-        abbreviated_num[index]
-      end
-
       def size_value
         case size
         when "lg"
@@ -145,20 +132,6 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
-
-      def formatted_amount
-        return abbreviated_value if abbreviate
-
-        if decimals == "matching"
-          if comma_separator
-            number_with_delimiter(amount.gsub(",", ""))
-          else
-            amount
-          end
-        else
-          whole_value
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -61,38 +61,3 @@ test('decimals default prop returns decimals as body text', () => {
   expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320')
   expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20')
 })
-
-
-test('commaSeparator prop returns comma separated amount', () => {
-  render(
-    <Currency 
-        amount="1234567890"
-        commaSeparator
-        data={{ testid: 'comma-test' }}
-    />
-  )
-  expect(screen.getByTestId('comma-test')).toHaveTextContent('1,234,567,890')
-})
-
-test('commaSeparator prop returns comma separated amount with decimals', () => {
-  render(
-    <Currency 
-        amount="1234567890.12"
-        commaSeparator
-        data={{ testid: 'comma-test-decimals' }}
-    />
-  )
-  expect(screen.getByTestId('comma-test-decimals')).toHaveTextContent('1,234,567,890.12')
-})
-
-test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
-  render(
-    <Currency 
-        amount="1234567890.12"
-        commaSeparator
-        data={{ testid: 'comma-test-decimals-matching' }}
-        decimals="matching"
-    />
-  )
-  expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
-})

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

@@ -8,8 +8,7 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-  - currency_comma_separator: Comma Separator
-  
+
   react:
   - currency_variants: Variants
   - currency_size: Size
@@ -18,7 +17,6 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-  - currency_comma_separator: Comma Separator
 
   swift:
   - currency_size_swift: Size

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

@@ -5,4 +5,3 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
-export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -28,8 +28,5 @@
         [class^=pb_title_kit] {
             color: $text_dk_default !important;
         }
-        [class^=pb_body_kit], [class^=pb_caption_kit] {
-            color: $text_dk_light !important;
-        }
     }
 }

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

@@ -8,10 +8,4 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_multiple_containers: Dragging Across Multiple Containers
   
-  rails:
-  - draggable_default_rails: Default
-  - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_cards_rails: Draggable with Cards
-
-
   

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -9,7 +9,7 @@
 
 @import "./scss_partials/dropdown_animation";
 
-[class*="pb_dropdown"] {
+.pb_dropdown {
   .dropdown_wrapper {
     [class*="dropdown_trigger_wrapper"] {
       @include pb_body;
@@ -131,7 +131,7 @@
     }
   }
 
-  &[class*="separators_hidden"] {
+  &.separators_hidden {
     .dropdown_wrapper {
       .pb_dropdown_container {
 
@@ -142,7 +142,7 @@
     }
   }
 
-  &[class*="subtle"] {
+  &.subtle {
     .dropdown_wrapper {
       .pb_dropdown_container {
         
@@ -178,7 +178,7 @@
       }
     }
   
-    &[class*="separators_hidden"] {
+    &.separators_hidden {
       .dropdown_wrapper {
         .pb_dropdown_container {
           [class*="pb_dropdown_option"]:first-child {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -47,7 +47,7 @@ interface DropdownComponent
     Container: typeof DropdownContainer;
 }
 
-let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
+const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const {
         aria = {},
         autocomplete = false,
@@ -74,8 +74,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const htmlProps = buildHtmlProps(htmlOptions);
     const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
-        buildCss("pb_dropdown", variant, separatorsClass),
+        buildCss("pb_dropdown"),
         globalProps(props),
+        variant,
+        separatorsClass,
         className
     );
 
@@ -260,7 +262,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                             <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
-                                        <DropdownOption key={option.id}
+                                        <Dropdown.Option key={option.id}
                                             option={option}
                                         />
                                     ))}
@@ -278,12 +280,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             </DropdownContext.Provider>
         </div>
     )
-}
+}) as DropdownComponent
 
-Dropdown = forwardRef(Dropdown) as unknown as DropdownComponent;
-(Dropdown as DropdownComponent).displayName = "Dropdown";
-(Dropdown as DropdownComponent).Option = DropdownOption;
-(Dropdown as DropdownComponent).Trigger = DropdownTrigger;
-(Dropdown as DropdownComponent).Container = DropdownContainer;
+Dropdown.displayName = "Dropdown";
+Dropdown.Option = DropdownOption;
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Container = DropdownContainer;
 
 export default Dropdown;

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -24,7 +24,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_dropdown", variant, separators_class)
+        generate_classname("pb_dropdown", variant, separators_class, separator: " ")
       end
 
     private
@@ -38,7 +38,7 @@ module Playbook
       end
 
       def separators_class
-        separators ? nil : "separators_hidden"
+        separators ? "" : "separators_hidden"
       end
 
       def options_with_blank

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -50,7 +50,7 @@ test('generated default kit and classname', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_dropdown_default')
+  expect(kit).toHaveClass('pb_dropdown')
 })
 
 test('generated default Trigger and Container when none passed in', () => {

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

@@ -142,9 +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_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
-    + div .pb_form_pill_text, + div .pb_form_pill_tag {
+    + .pb_form_pill_text, + .pb_form_pill_tag {
       padding-left: 0;
     }
   }
@@ -171,9 +169,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_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
-      + div .pb_form_pill_text, + div .pb_form_pill_tag {
+      + .pb_form_pill_text, + .pb_form_pill_tag {
         padding-left: 0;
       }
     }