playbook_ui_docs 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4304 → 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4312

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: eef872c9b0a985e86fa14a17aa2fb56c44b9bed9918b4b2aa8b5e126aa656c0b
4
- data.tar.gz: e368afc0f7fbc0e27d9188024e35162f747f8993191505db301f515f4178a9ad
3
+ metadata.gz: f808aa33ef0e68b8c95a9d3ea964010b8fa3fad58b7c48efdf3775d858a76d81
4
+ data.tar.gz: d3eab0f73f5c727b4cfc26ce37de5a0445ad45a1c7d6c562cd382b2b048bee21
5
5
  SHA512:
6
- metadata.gz: 9469be68bf7e05a478a2247bbe01d49595c20a4012877410d8038bb82b700d10f7db72d9f0218d6a4adce12af8994477c86065334ddc9f95db323974900fd8c5
7
- data.tar.gz: 7f12d0c389539a5eabacacf7a8fbc96a6ebb94b5b206bb04c271ec1bc8fab86f7e501a52f28d6eb9d95e3607d10c81b3dfa3eaa3e8c3dd1babd300ec9a1f618b
6
+ metadata.gz: f9ece497983d41b437fa824c5f29d9d6371e9085ad6dc773541396e52e5aca44c95f30b3968afa094c83950b2e40f7fc99d23fc80507096f51c09f31583435c7
7
+ data.tar.gz: 8db204d59c403bf39df2164b3e16f09569238b66ab572728d23826a9ce6333172ac745db7dcb0a832807e5050d402f753e0b67f2dfd22247b50e76bd76d92c6c
@@ -0,0 +1,7 @@
1
+ <%= pb_rails("currency", props: {
2
+ amount: '1234567.89',
3
+ comma_separator: true,
4
+ size: 'lg',
5
+ emphasized: false,
6
+ decimals: 'matching',
7
+ }) %>
@@ -0,0 +1,18 @@
1
+ import React from "react"
2
+
3
+ import Currency from "../_currency"
4
+
5
+ const CurrencyCommaSeparator = (props) => {
6
+ return (
7
+ <Currency
8
+ amount='1234567.89'
9
+ commaSeparator
10
+ decimals="matching"
11
+ emphasized={false}
12
+ size="lg"
13
+ {...props}
14
+ />
15
+ )
16
+ }
17
+
18
+ export default CurrencyCommaSeparator
@@ -0,0 +1,3 @@
1
+ The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator.
2
+
3
+ **NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.
@@ -8,7 +8,8 @@ examples:
8
8
  - currency_abbreviated: Abbreviate Larger Amounts
9
9
  - currency_matching_decimals: Matching Decimals
10
10
  - currency_unstyled: Unstyled
11
-
11
+ - currency_comma_separator: Comma Separator
12
+
12
13
  react:
13
14
  - currency_variants: Variants
14
15
  - currency_size: Size
@@ -17,6 +18,7 @@ examples:
17
18
  - currency_abbreviated: Abbreviate Larger Amounts
18
19
  - currency_matching_decimals: Matching Decimals
19
20
  - currency_unstyled: Unstyled
21
+ - currency_comma_separator: Comma Separator
20
22
 
21
23
  swift:
22
24
  - currency_size_swift: Size
@@ -5,3 +5,4 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
5
5
  export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
6
6
  export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
7
7
  export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
8
+ export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
@@ -25,15 +25,17 @@
25
25
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
26
26
  tabindex: 0,
27
27
  truncate: 1,
28
+ id: "truncation-1"
28
29
  }) %>
29
30
  <%= pb_rails("form_pill", props: {
30
31
  icon: "badge-check",
31
32
  text: "icon and a very long tag to show truncation",
32
33
  tabindex: 0,
33
34
  truncate: 1,
35
+ id: "truncation-2"
34
36
  }) %>
35
37
  <%= pb_rails("form_pill", props: {
36
- text: "form pill with a very long tag to show truncation",
38
+ text: "form pill long tag no tooltip show truncation",
37
39
  tabindex: 0,
38
40
  truncate: 1,
39
41
  }) %>
@@ -0,0 +1,3 @@
1
+ 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.
2
+
3
+ __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.
@@ -0,0 +1 @@
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.