playbook_ui_docs 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4296 → 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4312

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 87c3d7169a7c4cf6e6b1e9203fce5ab752490b9a1bab6121b1b403588225d90f
-  data.tar.gz: c3ea63edafb3de4c566e90fbbd93d58eefcba1f4e67bfd3b04d7a69871a4a130
+  metadata.gz: f808aa33ef0e68b8c95a9d3ea964010b8fa3fad58b7c48efdf3775d858a76d81
+  data.tar.gz: d3eab0f73f5c727b4cfc26ce37de5a0445ad45a1c7d6c562cd382b2b048bee21
 SHA512:
-  metadata.gz: 27791a0cf5c845c980a5fd90c2305fe6913661280778b5cdf974ab0933de4d1d1d30cf07f8bac9e7d4fdcdef4c65c40039de4cea5fa822103ab206b7d6d28a7b
-  data.tar.gz: d92d59e521d15f105edaa7cfffc04b96e30e81550cc7faab5a2953ff297444c70d6e4fae6e6276db9a7b8e5b836edce67977d799d1c6dcb20c55ce625aa66180
+  metadata.gz: f9ece497983d41b437fa824c5f29d9d6371e9085ad6dc773541396e52e5aca44c95f30b3968afa094c83950b2e40f7fc99d23fc80507096f51c09f31583435c7
+  data.tar.gz: 8db204d59c403bf39df2164b3e16f09569238b66ab572728d23826a9ce6333172ac745db7dcb0a832807e5050d402f753e0b67f2dfd22247b50e76bd76d92c6c

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_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -25,15 +25,17 @@
       avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
       tabindex: 0,
       truncate: 1,
+      id: "truncation-1"
   }) %>
   <%= pb_rails("form_pill", props: {
       icon: "badge-check",
       text: "icon and a very long tag to show truncation",
       tabindex: 0,
       truncate: 1,
+      id: "truncation-2"
   }) %>
   <%= pb_rails("form_pill", props: {
-      text: "form pill with a very long tag to show truncation",
+      text: "form pill long tag no tooltip show truncation",
       tabindex: 0,
       truncate: 1,
   }) %>

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

@@ -0,0 +1,3 @@
+For Form 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.
+
+__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

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

@@ -0,0 +1 @@
+For Form 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.