playbook_ui 14.5.0.pre.alpha.psych4support3941 → 14.5.0.pre.alpha.20241007playbookwebsiteaddrdbms4036

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +9 -1
  3. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
  4. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
  5. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  6. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  7. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  8. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +195 -228
  9. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +5 -0
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +105 -0
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +1 -0
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +106 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +1 -0
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -0
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +149 -0
  18. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -1
  19. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +3 -1
  20. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
  21. data/dist/chunks/{_typeahead-BYw0HEgO.js → _typeahead-CT2ByCBK.js} +1 -1
  22. data/dist/chunks/{_weekday_stacked-DumiyWjh.js → _weekday_stacked-Bwdy1TtH.js} +1 -1
  23. data/dist/chunks/vendor.js +1 -1
  24. data/dist/playbook-doc.js +1 -1
  25. data/dist/playbook-rails-react-bindings.js +1 -1
  26. data/dist/playbook-rails.js +1 -1
  27. data/lib/playbook/version.rb +1 -1
  28. metadata +13 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 68369e36929721ec45f47ea96b446fb8724945893b925fd1763963d14f79179e
4
- data.tar.gz: cfe0ca500c66348ff8376677f689382862a58c42b55f857f9fcb01f4f91c347d
3
+ metadata.gz: 1c9d08fec85ee5acbc34292a8fe9c2554c5e77a0da8e39d8aa8c901d7e911c05
4
+ data.tar.gz: 91c6c9fa38bfcd8910cabf5df1742689a327464084f5692b722f33d3576af112
5
5
  SHA512:
6
- metadata.gz: 72b405313fb0b71c456795c7531e6bcd000858195acfd693fb929fb8e1ec14badce9e096f80d1beeafe1c67eeb3b1ddedf3ed1f0b2048ed4cc4b59ec8229a122
7
- data.tar.gz: ff4bc17405a8c2ecd4a7d74c6f8f75e6e0fe194f3232ba67552e42d6c3c202976a008d0d6f58de059aff99f351c90b2b4ba9865d44c86f1451a8f44f541ea5df
6
+ metadata.gz: c0d2bfbd37af33531f7638d2f1e7e72ebe1f0bcedb5ec8f0b7df81431110a14754ed7c4d73ee19a3bb0f500e40f9e83be46ea6bf9e82d9fe186e4fca9a9818b0
7
+ data.tar.gz: c617f6acf17b65fbed0633c84baa9fbc240bc549d30633aa89b004734137a48632a47300e64b7d5660d4b71b86e05d68ae5cac13bc00f8de47e59ece1c655567
@@ -47,9 +47,13 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
47
47
 
48
48
  const iconClass = icon ? "_icon" : ""
49
49
  const closeIconSize = size === "small" ? "xs" : "sm"
50
+
51
+ const filteredProps: FormPillProps = {...props}
52
+ delete filteredProps.truncate
53
+
50
54
  const css = classnames(
51
55
  `pb_form_pill_kit_${color}${iconClass}`,
52
- globalProps(props),
56
+ globalProps(filteredProps),
53
57
  className,
54
58
  size === 'small' ? 'small' : null,
55
59
  textTransform,
@@ -77,6 +81,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
77
81
  className="pb_form_pill_text"
78
82
  size={4}
79
83
  text={name}
84
+ truncate={props.truncate}
80
85
  />
81
86
  </>
82
87
  )}
@@ -92,6 +97,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
92
97
  className="pb_form_pill_text"
93
98
  size={4}
94
99
  text={name}
100
+ truncate={props.truncate}
95
101
  />
96
102
  <Icon
97
103
  className="pb_form_pill_icon"
@@ -111,6 +117,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
111
117
  className="pb_form_pill_tag"
112
118
  size={4}
113
119
  text={text}
120
+ truncate={props.truncate}
114
121
  />
115
122
  </>
116
123
  )}
@@ -119,6 +126,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
119
126
  className="pb_form_pill_tag"
120
127
  size={4}
121
128
  text={text}
129
+ truncate={props.truncate}
122
130
  />
123
131
  )}
124
132
  <div
@@ -0,0 +1,19 @@
1
+ <%
2
+ names = [
3
+ { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
4
+ { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
5
+ { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
6
+ { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
7
+ { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
8
+ ]
9
+ %>
10
+
11
+ <%= pb_rails("typeahead", props: {
12
+ html_options: { style: { maxWidth: "240px" }},
13
+ id: "typeahead-form-pill",
14
+ is_multi: true,
15
+ options: names,
16
+ label: "Names",
17
+ pills: true,
18
+ truncate: 1,
19
+ }) %>
@@ -0,0 +1,27 @@
1
+ import React from 'react'
2
+ import Typeahead from '../../pb_typeahead/_typeahead'
3
+
4
+ const names = [
5
+ { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
6
+ { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
7
+ { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
8
+ { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
9
+ { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
10
+ ]
11
+
12
+ const FormPillTruncatedText = (props) => {
13
+ return (
14
+ <>
15
+ <Typeahead
16
+ htmlOptions={{ style: { maxWidth: "240px" }}}
17
+ isMulti
18
+ label="Names"
19
+ options={names}
20
+ truncate={1}
21
+ {...props}
22
+ />
23
+ </>
24
+ )
25
+ }
26
+
27
+ export default FormPillTruncatedText
@@ -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.
@@ -3,6 +3,7 @@ examples:
3
3
  rails:
4
4
  - form_pill_user: Form Pill User
5
5
  - form_pill_size: Form Pill Size
6
+ - form_pill_truncated_text: Truncated Text
6
7
  - form_pill_tag: Form Pill Tag
7
8
  - form_pill_example: Example
8
9
  - form_pill_icon: Form Pill Icon
@@ -11,6 +12,7 @@ examples:
11
12
  react:
12
13
  - form_pill_user: Form Pill User
13
14
  - form_pill_size: Form Pill Size
15
+ - form_pill_truncated_text: Truncated Text
14
16
  - form_pill_tag: Form Pill Tag
15
17
  - form_pill_example: Example
16
18
  - form_pill_icon: Form Pill Icon
@@ -4,3 +4,4 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
4
4
  export { default as FormPillExample } from './_form_pill_example.jsx'
5
5
  export { default as FormPillIcon } from './_form_pill_icon.jsx'
6
6
  export { default as FormPillColors } from './_form_pill_colors.jsx'
7
+ export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'