playbook_ui 14.6.0.pre.alpha.PBNTR5554223 → 14.6.0.pre.alpha.dropdownclassfix4224

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 00b10f6b6dc5d613f9eaea588e3ea97f5d4045cebe40f1f26252eecb1feb7fc7
-  data.tar.gz: 9340cc23fb8ef18ec04416f0ec585b47a925b1f92bb1dd28db98ca15f2c3ab93
+  metadata.gz: 2e7c742a82f9119f7c8e916e4388b5a87f0e7431177be7231df60646ce5a59bf
+  data.tar.gz: 81bcbb4679a6e6a9ed7c208c21675b13843c41a7b054e30bd33cbcd6b45b2f17
 SHA512:
-  metadata.gz: 839f0192c8d7db7090c6ea683470f1f57eed6b6b9949fb3b2c0d4febddd3ea6780acf437928f3933c9574d15f64ac4c492f8edc7f2b413771ff09111db8820b3
-  data.tar.gz: 8a1ae795effa6c4a5fe482748cdab3c7f6ce0526c764e3273ca33fafd60916ed612cb5b2e406005460c6d5a6c55c18a2389f3fb70428be04981fd35db8473a86
+  metadata.gz: a7bb3a7149a85030b1b7539917f1044127f68b928d008a8f1701bcfb7ddfd64ad01ea43498a10e90d758932adeb94c79751113cd6b2af7bc20d924a5200a43bf
+  data.tar.gz: dd64a6e5791947eb1f3965be88fc881646bd4bf3569e153ab8b2d226ebb374d653401667ad8650fe5146c8f5bd31e70001b3e68b6c74de2e59c33135137dc986

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.scss

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

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

@@ -74,10 +74,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const htmlProps = buildHtmlProps(htmlOptions);
     const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
-        buildCss("pb_dropdown"),
+        buildCss("pb_dropdown", variant, separatorsClass),
         globalProps(props),
-        variant,
-        separatorsClass,
         className
     );
 

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, separator: " ")
+        generate_classname("pb_dropdown", variant, separators_class)
       end
 
     private
@@ -38,7 +38,7 @@ module Playbook
       end
 
       def separators_class
-        separators ? "" : "separators_hidden"
+        separators ? nil : "separators_hidden"
       end
 
       def options_with_blank