playbook_ui 14.6.0.pre.alpha.PBNTR5554223 → 14.6.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4222

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 00b10f6b6dc5d613f9eaea588e3ea97f5d4045cebe40f1f26252eecb1feb7fc7
-  data.tar.gz: 9340cc23fb8ef18ec04416f0ec585b47a925b1f92bb1dd28db98ca15f2c3ab93
+  metadata.gz: d63cd70fa0e0f14b032f5ecf9797821a9d220c73c30daa8b3c930835621e4375
+  data.tar.gz: '0983801b52c3b009e241a4bacf55ae0184d7a50e4ce54279bae09ba8bee19414'
 SHA512:
-  metadata.gz: 839f0192c8d7db7090c6ea683470f1f57eed6b6b9949fb3b2c0d4febddd3ea6780acf437928f3933c9574d15f64ac4c492f8edc7f2b413771ff09111db8820b3
-  data.tar.gz: 8a1ae795effa6c4a5fe482748cdab3c7f6ce0526c764e3273ca33fafd60916ed612cb5b2e406005460c6d5a6c55c18a2389f3fb70428be04981fd35db8473a86
+  metadata.gz: 3c179daad11db77a567d9964a4ff9cdb90efab24cdb88b7b8059579ef9592146d0deaa03e02765cd817e5730527e280796387f516974325ee80e644ae29f04da
+  data.tar.gz: 8e2b6701b47d392cda459d528dfbde3ff3c0703a6a5152fe73b77506013b5055d5f6e95c0bf41617b4b0dd8b03fbf666292573e99f4624386aff58deb6971ec8

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

@@ -28,8 +28,7 @@ $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;
-  outline: 1px solid $border_color;
+  border-width: $pb_card_border_width * 2;
 }
 
 @mixin pb_card_selected_dark {

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

@@ -10,6 +10,24 @@
 $pb_selectable_card_indicator_size: 22px;
 $pb_selectable_card_border: 2px;
 
+$pb_selectable_space_classes: (
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+$pb_selectable_paddings: (
+  p: "padding",
+  pr: "padding-right",
+  pl: "padding-left",
+  pt: "padding-top",
+  pb: "padding-bottom",
+  px: ("padding-left", "padding-right"),
+  py: ("padding-top", "padding-bottom")
+);
+
 [class^=pb_selectable_card_kit] {
   display: block;
   margin-bottom: 0;
@@ -28,7 +46,6 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -74,6 +91,7 @@ $pb_selectable_card_border: 2px;
 
         position: relative;
         @include pb_card_selected;
+        padding: calc(#{$space_sm} - 1px);
         transition-property: none;
         transition-duration: 0s;
 
@@ -88,6 +106,54 @@ $pb_selectable_card_border: 2px;
           background-color: $royal;
         }
       }
+
+      // Selected card has 1px more border
+      // Remove 1px so content does not "jump"
+      @each $position_name,
+      $position in $pb_selectable_paddings {
+        @each $space_name,
+        $space in $pb_selectable_space_classes {
+          ~ label.#{$position_name}_#{$space_name} {
+            @if type-of($position)=="list" {
+              @each $coordinate in $position {
+                #{$coordinate}: calc(#{$space} - 1px) !important;
+              }
+            }
+
+            @else {
+              #{$position}: calc(#{$space} - 1px) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[class*=_display_input] {
+    input[type="checkbox"],
+    input[type="radio"] {
+      &:checked {
+        ~label {
+          border-width: $pb_card_border_width;
+          outline: 1px solid $primary;
+        }
+
+      }
+    }
+
+    > label {
+      outline: 1px solid transparent;
+      padding: $space_sm;
+    }
+
+    &.dark {
+      input[type="checkbox"],
+      input[type="radio"] {
+        &:checked ~ label {
+          border-width: $pb_card_border_width;
+          outline: 1px solid $primary;
+        }
+      }
     }
   }
 

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

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

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -25,7 +25,7 @@
           <% end %>
           <div class="separator"></div>
           <div class="psuedo_separator"></div>
-          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

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),
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class, display_input_class),
           error_class,
           dark_props,
         ].compact.join(" ")
@@ -79,6 +79,10 @@ module Playbook
       def error_class
         error ? "error" : nil
       end
+
+      def display_input_class
+        variant == "display_input" ? "display_input" : nil
+      end
     end
   end
 end