playbook_ui 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4304 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4305

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2ecc1c466ffb02f3bc53b3e5237a09734fa63537829c7a4602ea17c2cf54f8d4
-  data.tar.gz: 90a09dc18273b805231bc2657bb1d4cb953329a2e56bc8018002fbf31f65bb71
+  metadata.gz: 31ad89e3fa840597a7d38316aea7fcdd57bf7c4c1352e762d2845fc689346231
+  data.tar.gz: 519831d474fdc0187abeadbdc328f4653fdaf566195596ca5f5c600be3214d1d
 SHA512:
-  metadata.gz: 991aee43ea52beb462030837fff91e73869d23cc1121188427c880b67a77db574b8ff9b56686e054e66f744afe5f6d2a71bf55c29d761073e478280d7e70dff7
-  data.tar.gz: ec959956157c06abfd37e1fb04e118c012c067229045251faf52202c40bb205924702991409a7de939e016d8c8507ae37682ccd694c2cd63c89c8c0f4e122072
+  metadata.gz: a0538a8f59b5c77c623501feb8f0b75a5cb39aa3238debd67ca27ec09f3ddbd59bb4562c14fd54edd6bf3fdd3ca86a570ecf4d71a998bcc68e6b7992be2731e7
+  data.tar.gz: 9f7217f4ef982eb0e30e0f96687e8dfd0f281267397698e576d5a3af4462b07c2bab5a11877057936d8f829c3df83e6f6d60ea903ecdf13c416d4d56a552aeb2

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

@@ -26,6 +26,7 @@ type CurrencyProps = {
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
   unstyled?: boolean,
+  commaSeparator?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -53,6 +54,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variant = 'default',
     dark = false,
     unstyled = false,
+    commaSeparator = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
@@ -74,7 +76,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)
@@ -88,12 +90,20 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
-    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
+  const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
-    getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
-    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
+  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
 
   return (
     <div

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

@@ -43,6 +43,9 @@ 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
@@ -65,7 +68,7 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : whole_value,
+          text: abbreviate ? abbreviated_value : formatted_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -96,28 +99,38 @@ module Playbook
     private
 
       def whole_value
-        return amount if decimals == "matching"
-
-        amount.split(".").first.to_s
+        value = amount.split(".").first
+        if comma_separator
+          number_with_delimiter(value.gsub(",", ""))
+        else
+          value
+        end
       end
 
-      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]
+      def decimal_value
+        amount.split(".")[1] || "00"
       end
 
       def units_element
         return "" if decimals == "matching" && !abbreviate && !unit
 
-        _, decimal_part = amount.split(".")
-        if unit.nil? && abbreviate == false
-          decimal_part.nil? ? ".00" : ".#{decimal_part}"
+        if unit.nil? && !abbreviate
+          if decimals == "matching"
+            ""
+          else
+            ".#{decimal_value}"
+          end
         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"
@@ -132,6 +145,20 @@ 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,3 +61,38 @@ 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/_currency_comma_separator.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("currency", props: {
+  amount: '1234567.89',
+  comma_separator: true,
+  size: 'lg',
+  emphasized: false,
+  decimals: 'matching',
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+import Currency from "../_currency"
+
+const CurrencyCommaSeparator = (props) => {
+  return (
+    <Currency
+        amount='1234567.89'
+        commaSeparator
+        decimals="matching"
+        emphasized={false}
+        size="lg"
+        {...props}
+    />
+  )
+}
+
+export default CurrencyCommaSeparator

data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md

@@ -0,0 +1,3 @@
+The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator. 
+
+**NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.

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

@@ -8,7 +8,8 @@ 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
@@ -17,6 +18,7 @@ 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,3 +5,4 @@ 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;
 }
 
-const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
+const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props, ref) => {
     const {
         aria = {},
         autocomplete = false,
@@ -260,7 +260,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
                             <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
-                                        <Dropdown.Option key={option.id}
+                                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                                        <ForwardedDropdown.Option key={option.id}
                                             option={option}
                                         />
                                     ))}
@@ -278,11 +279,12 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
             </DropdownContext.Provider>
         </div>
     )
-}) as DropdownComponent
+}
 
-Dropdown.displayName = "Dropdown";
-Dropdown.Option = DropdownOption;
-Dropdown.Trigger = DropdownTrigger;
-Dropdown.Container = DropdownContainer;
+const ForwardedDropdown = forwardRef(Dropdown) as DropdownComponent;
+ForwardedDropdown.displayName = "Dropdown";
+ForwardedDropdown.Option = DropdownOption;
+ForwardedDropdown.Trigger = DropdownTrigger;
+ForwardedDropdown.Container = DropdownContainer;
 
-export default Dropdown;
+export default ForwardedDropdown;

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;
       }
     }

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

@@ -3,7 +3,6 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
-import Tooltip from '../pb_tooltip/_tooltip'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
@@ -63,30 +62,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
-  const renderTitle = (content: string, className: string) => {
-    const titleComponent = (
-      <Title
-          className={className}
-          size={4}
-          text={content}
-          truncate={props.truncate}
-      />
-    )
-    if (props.truncate) {
-      return (
-        <Tooltip
-            interaction
-            placement="top"
-            position="fixed"
-            text={content}
-        >
-          {titleComponent}
-        </Tooltip>
-      )
-    }
-    return titleComponent
-  }
-
   return (
     <div className={css}
         id={id}
@@ -102,7 +77,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          {renderTitle(name, "pb_form_pill_text")}
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+              truncate={props.truncate}
+          />
         </>
       )}
       {((name && icon && !text) || (name && icon && text)) && (
@@ -113,7 +93,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          {renderTitle(name, "pb_form_pill_text")}
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+              truncate={props.truncate}
+          />
           <Icon
               className="pb_form_pill_icon"
               color={color}
@@ -128,10 +113,22 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               color={color}
               icon={icon}
           />
-          {renderTitle(text, "pb_form_pill_tag")}
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+              truncate={props.truncate}
+          />
         </>
       )}
-      {(!name && !icon && text) && renderTitle(text, "pb_form_pill_tag")}
+      {(!name && !icon && text) && (
+        <Title
+            className="pb_form_pill_tag"
+            size={4}
+            text={text}
+            truncate={props.truncate}
+        />
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}
@@ -146,5 +143,4 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     </div>
   )
 }
-
 export default FormPill

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -13,28 +13,7 @@
     id: "typeahead-form-pill",
     is_multi: true,
     options: names,
-    label: "Truncation Within Typeahead",
+    label: "Names",
     pills: true,
     truncate: 1,
 }) %>
-
-<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
-<%= pb_rails("card", props: { max_width: "xs" })  do %>
-  <%= pb_rails("form_pill", props: {
-      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
-      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-      tabindex: 0,
-      truncate: 1,
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      icon: "badge-check",
-      text: "icon and a very long tag to show truncation",
-      tabindex: 0,
-      truncate: 1,
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      text: "form pill with a very long tag to show truncation",
-      tabindex: 0,
-      truncate: 1,
-  }) %>
-<% end %>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,34 +15,11 @@ const FormPillTruncatedText = (props) => {
       <Typeahead
           htmlOptions={{ style: { maxWidth: "240px" }}}
           isMulti
-          label="Truncation Within Typeahead"
+          label="Names"
           options={names}
           truncate={1}
           {...props}
       />
-      <Caption text="Form Pill Truncation"/>
-      <Card maxWidth="xs">
-        <FormPill
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
-            onClick={() => alert('Click!')}
-            tabIndex={0}
-            truncate={1}
-        />
-        <FormPill
-            icon="badge-check"
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="icon and a very long tag to show truncation"
-            truncate={1}
-        />
-        <FormPill
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="form pill with a very long tag to show truncation"
-            truncate={1}
-        />
-      </Card>
     </>
   )
 }

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

@@ -1 +1 @@
-For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,51 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
-    <% element_id = "pill_#{object.name.parameterize}" %>
-    <div>
-      <%= pb_rails("title", props: { 
-        classname: "pb_form_pill_text #{object.truncate ? "truncate_#{object.truncate}" : ""}",
-        id: element_id,
-        size: 4, 
-        text: object.name,
-      }) %>
-      <% if object.truncate %>
-        <%= pb_rails("tooltip", props: {
-          position: "top",
-          tooltip_id: "tooltip-#{element_id}",
-          trigger_element_selector: "##{element_id}"
-        }) do %>
-          <%= object.name %>
-        <% end %>
-      <% end %>
-    </div>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
     <% if object.icon.present? %>
       <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
-    <% if object.icon.present? %>
-      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
-    <% end %>
-    <% element_id = "pill_#{object.text.parameterize}" %>
-    <div>
-      <%= pb_rails("title", props: { 
-        classname: "pb_form_pill_tag #{object.truncate ? "truncate_#{object.truncate}" : ""}",
-        id: element_id,
-        size: 4, 
-        text: object.text
-      }) %>
-      <% if object.truncate %>
-        <%= pb_rails("tooltip", props: {
-          position: "top",
-          tooltip_id: "tooltip-#{element_id}",
-          trigger_element_selector: "##{element_id}"
-        }) do %>
-          <%= object.text %>
-        <% end %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
       <% end %>
-    </div>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
     <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
-<% end %>
+<% end %>