playbook_ui_docs 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4316 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 204e38037baf3f4ac2ea2e308c63c923cc17458e5d7193932f151ba85e6a2538
4
- data.tar.gz: e0dfa0eac4a6d628063db065e64562093c6b7f9d8fc9d815b9553852895028db
3
+ metadata.gz: 4fa90c698cd24c29959cf0f38b1e9e4151129d5377098f12d40f675656b295c6
4
+ data.tar.gz: 8c1ddadce4e3f95a44224eec0736a6f09bbce1a24d1d729888ec27f137d47e1e
5
5
  SHA512:
6
- metadata.gz: f2bde74862802106998a5b77bdd96f7e855382927de19a3777c7fe579c3188d7d55ec5738e203338ea39f5ab702122a5736940a115e2f62b1c85ecd181659c1e
7
- data.tar.gz: 8ad97bf1569a7b029281cede62e49a8a9cfcb2771c352d0d16f6a5a8cf5734ddff6219b2107099d85d59d9676371c1dfb825e90357988e2d57de2abc08ad199a
6
+ metadata.gz: bf91282d845229239f7675c4f4976627086a9b708a6bafebaa78c6db39a5f8cc620fd5e14a995ba6f5bf1a01d50fc87f86f9cd6a4f1a31a91cd68a436862299a
7
+ data.tar.gz: e1bf87c40f11c7dbb3a7fa0c06150212e862b7357598d7a0eef1191f6806e0efbc1023f1f3a54dadb41e6daec2f87e8417b096952623f59b539519fc3e7ab2d9
@@ -13,7 +13,30 @@
13
13
  id: "typeahead-form-pill",
14
14
  is_multi: true,
15
15
  options: names,
16
- label: "Names",
16
+ label: "Truncation Within Typeahead",
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 Typeahead from '../../pb_typeahead/_typeahead'
2
+ import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
3
3
 
4
4
  const names = [
5
5
  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
15
15
  <Typeahead
16
16
  htmlOptions={{ style: { maxWidth: "240px" }}}
17
17
  isMulti
18
- label="Names"
18
+ label="Truncation Within Typeahead"
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>
23
46
  </>
24
47
  )
25
48
  }
@@ -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.
@@ -0,0 +1,43 @@
1
+ <%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
2
+ <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
3
+
4
+ <% item.label do %>
5
+ <%= pb_rails("timeline/label") do %>
6
+ <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
7
+ <% end %>
8
+ <% end %>
9
+
10
+ <% item.step do %>
11
+ <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
12
+ <% end %>
13
+
14
+ <% item.detail do %>
15
+ <%= pb_rails("title_detail", props: {
16
+ title: "Jackson Heights",
17
+ detail: "37-27 74th Street"
18
+ }) %>
19
+ <% end %>
20
+ <% end %>
21
+ <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
22
+
23
+ <% item.step do %>
24
+ <%= pb_rails("timeline/step") do %>
25
+ <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
26
+ <% end %>
27
+ <% end %>
28
+
29
+ <% item.detail do %>
30
+ <%= pb_rails("title_detail", props: {
31
+ title: "Greenpoint",
32
+ detail: "81 Gate St Brooklyn"
33
+ }) %>
34
+ <% end %>
35
+ <% end %>
36
+
37
+ <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
38
+ <%= pb_rails("title_detail", props: {
39
+ title: "Society Hill",
40
+ detail: "72 E St Astoria"
41
+ }) %>
42
+ <% end %>
43
+ <% end %>
@@ -0,0 +1,68 @@
1
+ import React from 'react'
2
+
3
+ import Timeline from '../_timeline'
4
+ import Title from '../../pb_title/_title'
5
+ import Pill from '../../pb_pill/_pill'
6
+
7
+ import TitleDetail from '../../pb_title_detail/_title_detail'
8
+
9
+ const TimelineWithChildren = (props) => (
10
+ <div>
11
+ <Timeline orientation="horizontal"
12
+ showDate
13
+ {...props}
14
+ >
15
+ <Timeline.Item lineStyle="solid"
16
+ {...props}
17
+ >
18
+ <Timeline.Label>
19
+ <Title size={2}
20
+ text='Any Kit Here'
21
+ />
22
+ </Timeline.Label>
23
+ <Timeline.Step icon="user"
24
+ iconColor="royal"
25
+ />
26
+ <Timeline.Detail>
27
+ <TitleDetail detail="37-27 74th Street"
28
+ title="Jackson Heights"
29
+ {...props}
30
+ />
31
+ </Timeline.Detail>
32
+ </Timeline.Item>
33
+
34
+ <Timeline.Item lineStyle="dotted"
35
+ {...props}
36
+ >
37
+ <Timeline.Step>
38
+ <Pill text="Any Kit"
39
+ variant="success"
40
+ />
41
+ </Timeline.Step>
42
+ <Timeline.Detail>
43
+ <TitleDetail detail="81 Gate St Brooklyn"
44
+ title="Greenpoint"
45
+ {...props}
46
+ />
47
+ </Timeline.Detail>
48
+ </Timeline.Item>
49
+
50
+ <Timeline.Item lineStyle="solid"
51
+ {...props}
52
+ >
53
+ <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
54
+ <Timeline.Step icon="map-marker-alt"
55
+ iconColor="purple"
56
+ />
57
+ <Timeline.Detail>
58
+ <TitleDetail detail="72 E St Astoria"
59
+ title="Society Hill"
60
+ {...props}
61
+ />
62
+ </Timeline.Detail>
63
+ </Timeline.Item>
64
+ </Timeline>
65
+ </div>
66
+ )
67
+
68
+ export default TimelineWithChildren
@@ -0,0 +1,2 @@
1
+ Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.
2
+
@@ -4,10 +4,11 @@ examples:
4
4
  - timeline_default: Default
5
5
  - timeline_vertical: Vertical
6
6
  - timeline_with_date: With Date
7
+ - timeline_with_children: With Children
7
8
 
8
9
 
9
10
  react:
10
11
  - timeline_default: Default
11
12
  - timeline_vertical: Vertical
12
13
  - timeline_with_date: With Date
13
-
14
+ - timeline_with_children: With Children
@@ -1,3 +1,4 @@
1
1
  export { default as TimelineDefault } from './_timeline_default.jsx'
2
2
  export { default as TimelineVertical } from './_timeline_vertical.jsx'
3
3
  export { default as TimelineWithDate } from './_timeline_with_date.jsx'
4
+ export { default as TimelineWithChildren } from './_timeline_with_children.jsx'