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

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: 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'