playbook_ui 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896 → 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936
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 +4 -4
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +0 -2
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +21 -10
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx +92 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +3 -75
- data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb +15 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb +37 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +72 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +73 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_collapsible/index.js +16 -6
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +61 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +11 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +32 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +17 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +19 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +10 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +17 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +39 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +39 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +15 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +78 -0
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +4 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +5 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +6 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb} +11 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb} +13 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb} +13 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +2 -8
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +2 -6
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +2 -12
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +23 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +7 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +22 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +62 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +8 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +1 -1
- data/app/pb_kits/playbook/pb_select/_select.scss +8 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +19 -0
- data/dist/menu.yml +2 -2
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/forms/builder/phone_number_field.rb +12 -0
- data/lib/playbook/forms/builder.rb +1 -0
- data/lib/playbook/version.rb +1 -1
- metadata +40 -6
- /data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb} +0 -0
@@ -10,18 +10,12 @@
|
|
10
10
|
padding:"none",
|
11
11
|
cursor: "pointer"
|
12
12
|
}) do %>
|
13
|
-
|
14
|
-
align: "center",
|
15
|
-
classname:"dropdown_option_wrapper",
|
16
|
-
justify: "between",
|
17
|
-
padding_x:"sm",
|
18
|
-
padding_y:"xxs",
|
19
|
-
}) do %>
|
13
|
+
<div class="dropdown_option_wrapper">
|
20
14
|
<% if content.present? %>
|
21
15
|
<%= content.presence %>
|
22
16
|
<% else %>
|
23
17
|
<%= pb_rails("body", props: {text: object.option[:label]}) %>
|
24
18
|
<% end %>
|
25
|
-
|
19
|
+
</div>
|
26
20
|
<% end %>
|
27
21
|
<% end %>
|
@@ -3,19 +3,15 @@
|
|
3
3
|
module Playbook
|
4
4
|
module PbDropdown
|
5
5
|
class DropdownOption < Playbook::KitBase
|
6
|
-
prop :option, type: Playbook::Props::
|
6
|
+
prop :option, type: Playbook::Props::HashProp
|
7
7
|
prop :id, type: Playbook::Props::String
|
8
8
|
|
9
9
|
def data
|
10
10
|
Hash(prop(:data)).merge("dropdown_option_label": option)
|
11
11
|
end
|
12
12
|
|
13
|
-
def padding_helper
|
14
|
-
" p_xs"
|
15
|
-
end
|
16
|
-
|
17
13
|
def classname
|
18
|
-
generate_classname("pb_dropdown_option", "list")
|
14
|
+
generate_classname("pb_dropdown_option", "list")
|
19
15
|
end
|
20
16
|
end
|
21
17
|
end
|
@@ -10,7 +10,6 @@ import { globalProps, GlobalProps } from "../../utilities/globalProps";
|
|
10
10
|
|
11
11
|
import DropdownContext from "../context";
|
12
12
|
|
13
|
-
import Flex from "../../pb_flex/_flex";
|
14
13
|
import Body from "../../pb_body/_body";
|
15
14
|
import ListItem from "../../pb_list/_list_item";
|
16
15
|
import { GenericObject } from "../../types";
|
@@ -39,7 +38,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
|
|
39
38
|
id,
|
40
39
|
key,
|
41
40
|
option,
|
42
|
-
padding = "xs",
|
43
41
|
} = props;
|
44
42
|
|
45
43
|
const {
|
@@ -77,7 +75,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
|
|
77
75
|
selectedClass,
|
78
76
|
focusedClass,
|
79
77
|
),
|
80
|
-
globalProps(props
|
78
|
+
globalProps(props),
|
81
79
|
className
|
82
80
|
);
|
83
81
|
|
@@ -98,20 +96,12 @@ const DropdownOption = (props: DropdownOptionProps) => {
|
|
98
96
|
key={option.label}
|
99
97
|
padding="none"
|
100
98
|
>
|
101
|
-
<Flex
|
102
|
-
align="center"
|
103
|
-
className="dropdown_option_wrapper"
|
104
|
-
justify="between"
|
105
|
-
paddingX="sm"
|
106
|
-
paddingY="xxs"
|
107
|
-
>
|
108
99
|
{children ?
|
109
|
-
|
100
|
+
<div className="dropdown_option_wrapper">{children}</div> :
|
110
101
|
<Body dark={dark}
|
111
102
|
text={option.label}
|
112
103
|
/>
|
113
104
|
}
|
114
|
-
</Flex>
|
115
105
|
</ListItem>
|
116
106
|
</div>
|
117
107
|
);
|
@@ -0,0 +1,23 @@
|
|
1
|
+

|
2
|
+
|
3
|
+
```swift
|
4
|
+
VStack(alignment: .leading) {
|
5
|
+
PBToast(
|
6
|
+
text: message,
|
7
|
+
variant: .success,
|
8
|
+
actionView: .custom(AnyView(Text("Undo").pbFont(.title4, color: .white))),
|
9
|
+
dismissAction: closeToast
|
10
|
+
)
|
11
|
+
PBToast(
|
12
|
+
variant: .custom(nil, .pbPrimary),
|
13
|
+
actionView: .custom(
|
14
|
+
AnyView(
|
15
|
+
HStack {
|
16
|
+
Text("Undo action").pbFont(.caption, color: .white)
|
17
|
+
PBButton(variant: .primary, title: "Undo").disabled(true)
|
18
|
+
}
|
19
|
+
)),
|
20
|
+
dismissAction: closeToast
|
21
|
+
)
|
22
|
+
}
|
23
|
+
```
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
```swift
|
2
|
+
VStack(alignment: .leading) {
|
3
|
+
PBToast(text: "Error Message", variant: .error, actionView: .default, dismissAction: closeToast)
|
4
|
+
PBToast(text: "Items Successfully Moved", variant: .success, actionView: .default, dismissAction: closeToast)
|
5
|
+
PBToast(text: "Scan to Assign Selected Items", variant: .neutral, actionView: .default, dismissAction: closeToast)
|
6
|
+
}
|
7
|
+
```
|
@@ -0,0 +1,9 @@
|
|
1
|
+

|
2
|
+
|
3
|
+
```swift
|
4
|
+
VStack(alignment: .leading) {
|
5
|
+
PBToast(text: "Error Message", variant: .error, dismissAction: closeToast)
|
6
|
+
PBToast(text: "Items Successfully Moved", variant: .success, dismissAction: closeToast)
|
7
|
+
PBToast(text: "Scan to Assign Selected Items", variant: .neutral, dismissAction: closeToast)
|
8
|
+
}
|
9
|
+
```
|
@@ -0,0 +1,22 @@
|
|
1
|
+
```swift
|
2
|
+
HStack {
|
3
|
+
PBButton(variant: .secondary, title: "Top Center") {
|
4
|
+
position = .top
|
5
|
+
toastView = PBToast(
|
6
|
+
text: "Top Center",
|
7
|
+
variant: .neutral,
|
8
|
+
actionView: .withTimer(3),
|
9
|
+
dismissAction: closeToast
|
10
|
+
)
|
11
|
+
}
|
12
|
+
PBButton(variant: .secondary, title: "Bottom Center") {
|
13
|
+
position = .bottom
|
14
|
+
toastView = PBToast(
|
15
|
+
text: "Bottom Center",
|
16
|
+
variant: .neutral,
|
17
|
+
actionView: .withTimer(2),
|
18
|
+
dismissAction: closeToast
|
19
|
+
)
|
20
|
+
}
|
21
|
+
}
|
22
|
+
```
|
@@ -0,0 +1,62 @@
|
|
1
|
+
```swift
|
2
|
+
GridRow {
|
3
|
+
PBButton(variant: .secondary, title: "Top Left") {
|
4
|
+
position = .topLeft
|
5
|
+
toastView = PBToast(
|
6
|
+
text: "Top Left",
|
7
|
+
variant: .neutral,
|
8
|
+
actionView: .default,
|
9
|
+
dismissAction: closeToast
|
10
|
+
)
|
11
|
+
}
|
12
|
+
PBButton(variant: .secondary, title: "Top Right") {
|
13
|
+
position = .topRight
|
14
|
+
toastView = PBToast(
|
15
|
+
text: "Top Right",
|
16
|
+
variant: .neutral,
|
17
|
+
actionView: .default,
|
18
|
+
dismissAction: closeToast
|
19
|
+
)
|
20
|
+
}
|
21
|
+
}
|
22
|
+
GridRow {
|
23
|
+
PBButton(variant: .secondary, title: "Top Center") {
|
24
|
+
position = .top
|
25
|
+
toastView = PBToast(
|
26
|
+
text: "Top Center",
|
27
|
+
variant: .neutral,
|
28
|
+
actionView: .default,
|
29
|
+
dismissAction: closeToast
|
30
|
+
)
|
31
|
+
}
|
32
|
+
PBButton(variant: .secondary, title: "Bottom Center") {
|
33
|
+
position = .bottom
|
34
|
+
toastView = PBToast(
|
35
|
+
text: "Bottom Center",
|
36
|
+
variant: .custom(.user, .status(.neutral)),
|
37
|
+
actionView: .default,
|
38
|
+
dismissAction: closeToast
|
39
|
+
)
|
40
|
+
}
|
41
|
+
}
|
42
|
+
GridRow {
|
43
|
+
PBButton(variant: .secondary, title: "Bottom Left") {
|
44
|
+
position = .bottomLeft
|
45
|
+
toastView = PBToast(
|
46
|
+
text: "Bottom Left",
|
47
|
+
variant: .custom(.user, .status(.neutral)),
|
48
|
+
actionView: .default,
|
49
|
+
dismissAction: closeToast
|
50
|
+
)
|
51
|
+
}
|
52
|
+
PBButton(variant: .secondary, title: "Bottom Right") {
|
53
|
+
position = .bottomRight
|
54
|
+
toastView = PBToast(
|
55
|
+
text: "Bottom Right",
|
56
|
+
variant: .custom(.user, .status(.neutral)),
|
57
|
+
actionView: .default,
|
58
|
+
dismissAction: closeToast
|
59
|
+
)
|
60
|
+
}
|
61
|
+
}
|
62
|
+
```
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md
ADDED
@@ -0,0 +1,8 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **text** | `String` |`Value for the toast message` | `nil` | |
|
5
|
+
| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` | `error`, `success`,
|
6
|
+
`neutral`, `custom()` |
|
7
|
+
| **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
|
8
|
+
| **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` | | |
|
@@ -14,3 +14,12 @@ examples:
|
|
14
14
|
- fixed_confirmation_toast_positions: Click to Show Positions
|
15
15
|
- fixed_confirmation_toast_auto_close: Click to Show Auto Close
|
16
16
|
- fixed_confirmation_toast_children: Children
|
17
|
+
|
18
|
+
swift:
|
19
|
+
- fixed_confirmation_toast_default_swift: Default
|
20
|
+
- fixed_confirmation_toast_multi_line_swift: Multi Line
|
21
|
+
#- fixed_confirmation_toast_close_swift: Click to Close
|
22
|
+
#- fixed_confirmation_toast_positions_swift: Click to Show Positions
|
23
|
+
- fixed_confirmation_toast_children_swift: Children
|
24
|
+
#- fixed_confirmation_toast_dismiss_with_timer_swift: Timer
|
25
|
+
- fixed_confirmation_toast_props_swift: ""
|
@@ -16,7 +16,7 @@
|
|
16
16
|
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
17
17
|
<%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
|
18
18
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
19
|
-
<%= form.
|
19
|
+
<%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
|
20
20
|
<%= form.email_field :example_email_field, props: { label: true } %>
|
21
21
|
<%= form.number_field :example_number_field, props: { label: true } %>
|
22
22
|
<%= form.search_field :example_search_field, props: { label: true } %>
|
@@ -15,7 +15,7 @@
|
|
15
15
|
|
16
16
|
<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
|
17
17
|
<%= form.text_field :example_text_field, props: { label: true, required: true } %>
|
18
|
-
<%= form.
|
18
|
+
<%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
|
19
19
|
<%= form.email_field :example_email_field, props: { label: true, required: true } %>
|
20
20
|
<%= form.number_field :example_number_field, props: { label: true, required: true } %>
|
21
21
|
<%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
|
@@ -102,6 +102,9 @@
|
|
102
102
|
pointer-events: none;
|
103
103
|
}
|
104
104
|
&.inline {
|
105
|
+
svg {
|
106
|
+
right: 6px;
|
107
|
+
}
|
105
108
|
@mixin active_arrow_style {
|
106
109
|
svg {
|
107
110
|
color: $primary !important;
|
@@ -130,6 +133,7 @@
|
|
130
133
|
box-shadow: none;
|
131
134
|
border-color: transparent;
|
132
135
|
padding: 4px 8px;
|
136
|
+
padding-right: $space_lg;
|
133
137
|
border-radius: 4px;
|
134
138
|
option {
|
135
139
|
background-color: $white;
|
@@ -213,6 +217,9 @@
|
|
213
217
|
}
|
214
218
|
}
|
215
219
|
&.inline {
|
220
|
+
svg {
|
221
|
+
right: 6px;
|
222
|
+
}
|
216
223
|
&:not(:hover) {
|
217
224
|
svg {
|
218
225
|
display: none;
|
@@ -233,6 +240,7 @@
|
|
233
240
|
border-color: transparent;
|
234
241
|
background: transparent;
|
235
242
|
padding: 4px 8px;
|
243
|
+
padding-right: $space_lg;
|
236
244
|
border-radius: 4px;
|
237
245
|
option {
|
238
246
|
background-color: $white;
|
@@ -76,6 +76,25 @@
|
|
76
76
|
.text_input {
|
77
77
|
border-color: $error_dark;
|
78
78
|
}
|
79
|
+
[class*=pb_body_kit_negative] {
|
80
|
+
color: $error_dark;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
.text_input_wrapper_add_on {
|
84
|
+
.add-on {
|
85
|
+
&-right {
|
86
|
+
.add-on-card {
|
87
|
+
border: 1px solid $error_dark;
|
88
|
+
border-left: 0;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
&-left {
|
92
|
+
.add-on-card {
|
93
|
+
border: 1px solid $error_dark;
|
94
|
+
border-right: 0;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
}
|
79
98
|
}
|
80
99
|
}
|
81
100
|
}
|
data/dist/menu.yml
CHANGED
@@ -255,9 +255,9 @@ kits:
|
|
255
255
|
description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
|
256
256
|
status: "stable"
|
257
257
|
- name: dropdown
|
258
|
-
platforms: *
|
258
|
+
platforms: *web
|
259
259
|
description: ""
|
260
|
-
status: "
|
260
|
+
status: "stable"
|
261
261
|
- name: "multi_level_select"
|
262
262
|
platforms: *web
|
263
263
|
description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
|