playbook_ui_docs 14.3.2.pre.alpha.pbntr523enablekitsforradiofix3809 → 14.3.2.pre.alpha.play1472newicons3773

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  4. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  5. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
  6. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
  7. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
  8. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
  9. data/app/pb_kits/playbook/pb_radio/docs/example.yml +0 -2
  10. data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -1
  11. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
  12. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
  13. data/dist/playbook-doc.js +1 -1
  14. metadata +2 -18
  15. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb +0 -117
  16. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +0 -227
  17. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md +0 -1
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +0 -72
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +0 -91
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md +0 -1
  21. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md +0 -1
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.html.erb +0 -73
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.jsx +0 -86
  24. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +0 -48
  25. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +0 -59
  26. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md +0 -1
  27. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb +0 -31
  28. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +0 -26
  29. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md +0 -1
  30. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md +0 -1
@@ -1,86 +0,0 @@
1
- import React from 'react'
2
-
3
- import MultipleUsersStacked from '../_multiple_users_stacked'
4
-
5
- const MultipleUsersStackedBubble = (props) => {
6
- return (
7
- <div>
8
- <MultipleUsersStacked
9
- users={[
10
- {
11
- name: 'Patrick Welch',
12
- imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
13
- },
14
- ]}
15
- variant="bubble"
16
- {...props}
17
- />
18
- <br />
19
- <br />
20
- <MultipleUsersStacked
21
- users={[
22
- {
23
- name: 'Patrick Welch',
24
- imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
25
- },
26
- {
27
- name: 'Lucille Sanchez',
28
- imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
29
- },
30
- ]}
31
- variant="bubble"
32
- {...props}
33
- />
34
- <br />
35
- <br />
36
- <MultipleUsersStacked
37
- users={[
38
- {
39
- name: 'Patrick Welch',
40
- imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
41
- },
42
- {
43
- name: 'Lucille Sanchez',
44
- imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
45
- },
46
- {
47
- name: 'Beverly Reyes',
48
- imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
49
- },
50
- ]}
51
- variant="bubble"
52
- {...props}
53
- />
54
- <br />
55
- <br />
56
- <MultipleUsersStacked
57
- users={[
58
- {
59
- name: 'Patrick Welch',
60
- imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
61
- },
62
- {
63
- name: 'Lucille Sanchez',
64
- imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
65
- },
66
- {
67
- name: 'Beverly Reyes',
68
- imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
69
- },
70
- {
71
- name: 'Keith Craig',
72
- imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
73
- },
74
- {
75
- name: 'Alicia Cooper',
76
- imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
77
- },
78
- ]}
79
- variant="bubble"
80
- {...props}
81
- />
82
- </div>
83
- )
84
- }
85
-
86
- export default MultipleUsersStackedBubble
@@ -1,48 +0,0 @@
1
- <%
2
- options = [
3
- { label: "Orange", value: "Orange" },
4
- { label: "Red", value: "Red" },
5
- { label: "Green", value: "Green" },
6
- { label: "Blue", value: "Blue" },
7
- ]
8
- %>
9
-
10
- <%= pb_rails("radio", props: {
11
- custom_children: true,
12
- label: "Select",
13
- name: "Group1",
14
- value: "Select",
15
- }) do %>
16
- <%= pb_rails("select", props: {
17
- min_width: "xs",
18
- options: options,
19
- }) %>
20
- <% end %>
21
-
22
- <%= pb_rails("radio", props: {
23
- custom_children: true,
24
- label: "Typeahead",
25
- name: "Group1",
26
- value: "Typeahead",
27
- }) do %>
28
- <%= pb_rails("typeahead", props: {
29
- id: "typeahead-radio",
30
- is_multi: false,
31
- min_width: "xs",
32
- options: options,
33
- placeholder: "Select...",
34
- })
35
- %>
36
- <% end %>
37
-
38
- <%= pb_rails("radio", props: {
39
- custom_children: true,
40
- label: "Typography",
41
- name: "Group1",
42
- value: "Typography",
43
- }) do %>
44
- <%= pb_rails("title", props: {
45
- text: "Custom Typography",
46
- })
47
- %>
48
- <% end %>
@@ -1,59 +0,0 @@
1
- import React from 'react'
2
- import Radio from '../_radio'
3
- import Select from '../../pb_select/_select'
4
- import Typeahead from '../../pb_typeahead/_typeahead'
5
- import Title from '../../pb_title/_title'
6
-
7
- const RadioChildren = (props) => {
8
-
9
-
10
- const options = [
11
- { label: 'Orange', value: 'Orange' },
12
- { label: 'Red', value: 'Red' },
13
- { label: 'Green', value: 'Green' },
14
- { label: 'Blue', value: 'Blue' },
15
- ]
16
-
17
- return (
18
- <div>
19
- <Radio
20
- customChildren
21
- label="Select"
22
- name="Group1"
23
- tabIndex={0}
24
- value="Select"
25
- {...props}
26
- >
27
- <Select
28
- minWidth="xs"
29
- options={options}
30
- />
31
- </Radio>
32
- <Radio
33
- customChildren
34
- label="Typeahead"
35
- name="Group1"
36
- tabIndex={0}
37
- value="Typeahead"
38
- {...props}
39
- >
40
- <Typeahead
41
- minWidth="xs"
42
- options={options}
43
- />
44
- </Radio>
45
- <br />
46
- <Radio
47
- customChildren
48
- defaultChecked={false}
49
- label="Typography"
50
- name="Group1"
51
- value="Typography"
52
- {...props}
53
- >
54
- <Title text="Custom Typography" />
55
- </Radio>
56
- </div>
57
- )
58
- }
59
- export default RadioChildren
@@ -1 +0,0 @@
1
- Use the `custom_children` prop to enable the use of kits instead of text labels.
@@ -1,31 +0,0 @@
1
- <%
2
- options = [
3
- { label: 'Windows', value: '#FFA500' },
4
- { label: 'Siding', value: '#FF0000' },
5
- { label: 'Doors', value: '#00FF00' },
6
- { label: 'Roofs', value: '#0000FF' },
7
- ]
8
- %>
9
-
10
- <%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
11
-
12
- <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
13
-
14
- <!-- This section is an example of the available JavaScript event hooks -->
15
- <%= javascript_tag defer: "defer" do %>
16
- document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
17
- console.log('Option selected')
18
- console.dir(event.detail)
19
- })
20
- document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
21
- console.log('Option removed')
22
- console.dir(event.detail)
23
- })
24
- document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
25
- console.log('All options cleared')
26
- })
27
-
28
- document.querySelector('#clear-pills').addEventListener('click', function() {
29
- document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
30
- })
31
- <% end %>
@@ -1,26 +0,0 @@
1
- import React from 'react'
2
- import { Typeahead } from 'playbook-ui'
3
-
4
- const options = [
5
- { label: 'Windows', value: '#FFA500' },
6
- { label: 'Siding', value: '#FF0000' },
7
- { label: 'Doors', value: '#00FF00' },
8
- { label: 'Roofs', value: '#0000FF' },
9
- ]
10
-
11
- const TypeaheadWithPills = (props) => {
12
- return (
13
- <>
14
- <Typeahead
15
- isMulti
16
- label="Colors"
17
- options={options}
18
- pillColor="neutral"
19
- placeholder=""
20
- {...props}
21
- />
22
- </>
23
- )
24
- }
25
-
26
- export default TypeaheadWithPills
@@ -1 +0,0 @@
1
- Change the form pill color by passing the optional `pill_color` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.
@@ -1 +0,0 @@
1
- Change the form pill color by passing the optional `pillColor` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.