playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4316 → 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 845eb3cdd33a7fef9c5af145bcf680907b6c74d5126bba69805acf33f3ff6a48
-  data.tar.gz: 18d01e30a45050069d838577a03df29a892c7ebe042ca8a252ed68b665fd7c56
+  metadata.gz: '0896cae36211162e8819470663f9dedb1716254cd40cb3a59c20caafd4d23b2d'
+  data.tar.gz: 713356bd680806bce64921cdcdd51e74e562b79b9cee92bff6b7d2ef4602e436
 SHA512:
-  metadata.gz: 06afa342868f031819a728684e905aaeb09445e855ac28938e3b746deb93e37bc0b0ff22f6d133d9b80f005c420cb3e500b3081f12e688844238658ba8ded457
-  data.tar.gz: '08f62a0749684bc633d09aed01b768aae32d2569fa0ee13224647bce0152ccce9016931104990822e12218c46e955cee0b81baafec0897c710407a979b7007b1'
+  metadata.gz: 41b0df84cd4c1c54944f10026c6fb846bf9cff9016a376750c904321c40b0f7f16a4bf7372078f5d8a8d1f2048766c0726aabf89da3c0db5e79a2f41ecdb62b9
+  data.tar.gz: 92d6d3a078efc32f7de1cff32648381ac14d1bf74ff33ea749ca9fd50d61f5991a2a5a4a9661fb2c50688c6df4880ee34f78dd631882e973abec6b43d805d7a4

data/app/pb_kits/playbook/_playbook.scss

@@ -30,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';
@@ -55,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';
@@ -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_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_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,
@@ -260,7 +260,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 +278,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_selectable_card/_selectable_card.scss

@@ -129,7 +129,7 @@ $pb_selectable_paddings: (
     }
   }
 
-  &.display_input {
+  &[class*=_display_input] {
     input[type="checkbox"],
     input[type="radio"] {
       &:checked {

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -66,8 +66,8 @@ const SelectableCard = (props: SelectableCardProps) => {
       'checked': checked,
       'disabled': disabled,
       'enabled': !disabled,
+      'display_input': variant === 'displayInput',
     }),
-  variant === 'displayInput' ? 'display_input' : '',
   { error },
   dark ? 'dark' : '',
   className

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -25,7 +25,7 @@ module Playbook
 
       def classname
         [
-          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class) + display_input_class,
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class, display_input_class),
           error_class,
           dark_props,
         ].compact.join(" ")
@@ -81,7 +81,7 @@ module Playbook
       end
 
       def display_input_class
-        variant == "display_input" ? " display_input" : ""
+        variant == "display_input" ? "display_input" : nil
       end
     end
   end

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

@@ -1,5 +1,3 @@
-@import "../tokens/colors";
-
 $font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
@@ -53,36 +51,3 @@ $boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
 $lighter:       300 !default;
-
-/* Link Colors */
-$pb_link_colors: (
-  default:        $primary_action,
-  body:           $text_lt_default,
-  muted:          $text_lt_light,
-  destructive:    $error,
-);
-
-$pb_link_hover_colors: (
-  default:        $text_lt_default,
-  body:           $primary_action,
-  muted:          $text_lt_default,
-  destructive:    $text_lt_default,
-);
-
-$pb_dark_link_colors: (
-  default:        $active_dark,
-  body:           $text_dk_default,
-  muted:          $text_dk_light,
-  destructive:    $error_dark,
-);
-
-$pb_dark_link_hover_colors: (
-  default:        $text_dk_default,
-  body:           $active_dark,
-  muted:          $text_dk_default,
-  destructive:    $text_dk_default,
-);
-
-@mixin pb_link($color: $primary_action) {
-  color: $color;
-}