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 +4 -4
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +18 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +3 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +3 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +3 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +6 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f808aa33ef0e68b8c95a9d3ea964010b8fa3fad58b7c48efdf3775d858a76d81
|
4
|
+
data.tar.gz: d3eab0f73f5c727b4cfc26ce37de5a0445ad45a1c7d6c562cd382b2b048bee21
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f9ece497983d41b437fa824c5f29d9d6371e9085ad6dc773541396e52e5aca44c95f30b3968afa094c83950b2e40f7fc99d23fc80507096f51c09f31583435c7
|
7
|
+
data.tar.gz: 8db204d59c403bf39df2164b3e16f09569238b66ab572728d23826a9ce6333172ac745db7dcb0a832807e5050d402f753e0b67f2dfd22247b50e76bd76d92c6c
|
@@ -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
|
@@ -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
|
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.
|