playbook_ui_docs 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4312 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4303

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: f808aa33ef0e68b8c95a9d3ea964010b8fa3fad58b7c48efdf3775d858a76d81
4
- data.tar.gz: d3eab0f73f5c727b4cfc26ce37de5a0445ad45a1c7d6c562cd382b2b048bee21
3
+ metadata.gz: 1dd2f6af9d892eab350567c44c36ababc550c9aeaec01f766f9a49eda400958f
4
+ data.tar.gz: 41ec0205e2ac88daf9c92f785945f948454ffd67fd015ded4897b313fd922642
5
5
  SHA512:
6
- metadata.gz: f9ece497983d41b437fa824c5f29d9d6371e9085ad6dc773541396e52e5aca44c95f30b3968afa094c83950b2e40f7fc99d23fc80507096f51c09f31583435c7
7
- data.tar.gz: 8db204d59c403bf39df2164b3e16f09569238b66ab572728d23826a9ce6333172ac745db7dcb0a832807e5050d402f753e0b67f2dfd22247b50e76bd76d92c6c
6
+ metadata.gz: 5f7e87f6f4c1939df9b409900aaef182ba17040394ab2d9e53667f5dd701840d73d0451246dc594cf36ecea414d248b4b2266d76dadcf0e7d531e84c003d6af1
7
+ data.tar.gz: 5bfbc2a21865f865edf290dc214cfa2385c7da1a7fd64f732a887337cd6f04c140e3f346b5553aa93c31f32bf5951a2cd07973e418e49e71ddfbb1bbc956522a
@@ -8,8 +8,7 @@ examples:
8
8
  - currency_abbreviated: Abbreviate Larger Amounts
9
9
  - currency_matching_decimals: Matching Decimals
10
10
  - currency_unstyled: Unstyled
11
- - currency_comma_separator: Comma Separator
12
-
11
+
13
12
  react:
14
13
  - currency_variants: Variants
15
14
  - currency_size: Size
@@ -18,7 +17,6 @@ examples:
18
17
  - currency_abbreviated: Abbreviate Larger Amounts
19
18
  - currency_matching_decimals: Matching Decimals
20
19
  - currency_unstyled: Unstyled
21
- - currency_comma_separator: Comma Separator
22
20
 
23
21
  swift:
24
22
  - currency_size_swift: Size
@@ -5,4 +5,3 @@ 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'
@@ -13,30 +13,7 @@
13
13
  id: "typeahead-form-pill",
14
14
  is_multi: true,
15
15
  options: names,
16
- label: "Truncation Within Typeahead",
16
+ label: "Names",
17
17
  pills: true,
18
18
  truncate: 1,
19
19
  }) %>
20
-
21
- <%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
22
- <%= pb_rails("card", props: { max_width: "xs" }) do %>
23
- <%= pb_rails("form_pill", props: {
24
- name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
25
- avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
26
- tabindex: 0,
27
- truncate: 1,
28
- id: "truncation-1"
29
- }) %>
30
- <%= pb_rails("form_pill", props: {
31
- icon: "badge-check",
32
- text: "icon and a very long tag to show truncation",
33
- tabindex: 0,
34
- truncate: 1,
35
- id: "truncation-2"
36
- }) %>
37
- <%= pb_rails("form_pill", props: {
38
- text: "form pill long tag no tooltip show truncation",
39
- tabindex: 0,
40
- truncate: 1,
41
- }) %>
42
- <% end %>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
2
+ import Typeahead from '../../pb_typeahead/_typeahead'
3
3
 
4
4
  const names = [
5
5
  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,34 +15,11 @@ const FormPillTruncatedText = (props) => {
15
15
  <Typeahead
16
16
  htmlOptions={{ style: { maxWidth: "240px" }}}
17
17
  isMulti
18
- label="Truncation Within Typeahead"
18
+ label="Names"
19
19
  options={names}
20
20
  truncate={1}
21
21
  {...props}
22
22
  />
23
- <Caption text="Form Pill Truncation"/>
24
- <Card maxWidth="xs">
25
- <FormPill
26
- avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
27
- name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
28
- onClick={() => alert('Click!')}
29
- tabIndex={0}
30
- truncate={1}
31
- />
32
- <FormPill
33
- icon="badge-check"
34
- onClick={() => {alert('Click!')}}
35
- tabIndex={0}
36
- text="icon and a very long tag to show truncation"
37
- truncate={1}
38
- />
39
- <FormPill
40
- onClick={() => {alert('Click!')}}
41
- tabIndex={0}
42
- text="form pill with a very long tag to show truncation"
43
- truncate={1}
44
- />
45
- </Card>
46
23
  </>
47
24
  )
48
25
  }
@@ -0,0 +1 @@
1
+ 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.