playbook_ui_docs 16.12.0.pre.rc.3 → 16.12.0
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_advanced_table/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_card/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_playground.json +3 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_playground.json +2 -1
- data/app/pb_kits/playbook/pb_filter/docs/_playground.json +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_layout/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_list/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_loading_inline/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_playground.json +2 -2
- data/app/pb_kits/playbook/pb_section_separator/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_playground.json +5 -4
- data/app/pb_kits/playbook/pb_time_picker/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_time_range_inline/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +15 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +19 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +3 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_playground.json +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +7 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +11 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ba427c3b062c21d8d9c069066221ab68fa72de61d6937e3e313345d421029fb6
|
|
4
|
+
data.tar.gz: f66101660a3b7c039581e1a1ac4e247f74eefda6b40c95770a04cdfe412e14bf
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6e03d16db06b90940db5466fa385ec172802424ac7edb7448de36618349bb6a5902946ed4449ee9329d996ec1c76b10a1648886bb18242d7ddc68102ccab45fd
|
|
7
|
+
data.tar.gz: d991b121f6619562605b96921fad2dbd7f5fce98e96d115c0d52e46dbb692b590a80d700c7ac41aff143395f7c1eeb10bc439750f0d48d3041f78d8cec0b222e
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
"propTargets": {},
|
|
4
4
|
"defaults": {
|
|
5
5
|
"background": true,
|
|
6
|
+
"minWidth": "360px",
|
|
6
7
|
"placement": "bottom-start",
|
|
7
8
|
"double": false,
|
|
8
9
|
"filters": {
|
|
@@ -10,7 +11,6 @@
|
|
|
10
11
|
"City": "San Francisco"
|
|
11
12
|
},
|
|
12
13
|
"isCollapsed": false,
|
|
13
|
-
"minWidth": "360px",
|
|
14
14
|
"onCollapse": "() => {}",
|
|
15
15
|
"onSortChange": "() => {}",
|
|
16
16
|
"popoverProps": {},
|
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
"template": "<SkeletonLoading{{props}} />",
|
|
3
3
|
"propTargets": {},
|
|
4
4
|
"defaults": {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
5
|
+
"height": "16px",
|
|
6
|
+
"width": "100%",
|
|
7
7
|
"borderRadius": "sm",
|
|
8
8
|
"gap": "xxs",
|
|
9
|
-
"
|
|
10
|
-
"
|
|
9
|
+
"stack": 1,
|
|
10
|
+
"color": "default",
|
|
11
|
+
"dark": false
|
|
11
12
|
},
|
|
12
13
|
"groups": [
|
|
13
14
|
{
|
|
@@ -63,3 +63,18 @@
|
|
|
63
63
|
}) %>
|
|
64
64
|
|
|
65
65
|
<br>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("timestamp", props: {
|
|
68
|
+
timestamp: DateTime.now,
|
|
69
|
+
show_date: false,
|
|
70
|
+
show_timezone: true,
|
|
71
|
+
timezone: "Eastern Time (US & Canada)",
|
|
72
|
+
}) %>
|
|
73
|
+
|
|
74
|
+
<br>
|
|
75
|
+
|
|
76
|
+
<%= pb_rails("timestamp", props: {
|
|
77
|
+
timestamp: DateTime.now,
|
|
78
|
+
show_timezone: true,
|
|
79
|
+
timezone: "Pacific Time (US & Canada)",
|
|
80
|
+
}) %>
|
|
@@ -85,6 +85,25 @@ const TimestampTimezones = (props) => {
|
|
|
85
85
|
timezone="Asia/Hong_Kong"
|
|
86
86
|
{...props}
|
|
87
87
|
/>
|
|
88
|
+
|
|
89
|
+
<br />
|
|
90
|
+
|
|
91
|
+
<Timestamp
|
|
92
|
+
showDate={false}
|
|
93
|
+
showTimezone
|
|
94
|
+
timestamp={todaysDate}
|
|
95
|
+
timezone="Eastern Time (US & Canada)"
|
|
96
|
+
{...props}
|
|
97
|
+
/>
|
|
98
|
+
|
|
99
|
+
<br />
|
|
100
|
+
|
|
101
|
+
<Timestamp
|
|
102
|
+
showTimezone
|
|
103
|
+
timestamp={todaysDate}
|
|
104
|
+
timezone="Pacific Time (US & Canada)"
|
|
105
|
+
{...props}
|
|
106
|
+
/>
|
|
88
107
|
</div>
|
|
89
108
|
)
|
|
90
109
|
}
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
The `showTimezone`/`show_timezone` prop can be used to show the timezone as well. This is set to false by default. **NOTE**: This prop must be used in conjunction with the `timezone` prop to specify which timezone to display.
|
|
1
|
+
The `showTimezone`/`show_timezone` prop can be used to show the timezone as well. This is set to false by default. **NOTE**: This prop must be used in conjunction with the `timezone` prop to specify which timezone to display.
|
|
2
|
+
|
|
3
|
+
The `timezone` prop accepts both IANA timezone identifiers (e.g. `America/New_York`) and ActiveSupport timezone names (e.g. `Eastern Time (US & Canada)`).
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Products", name: :foo, pills: true }) %>
|
|
11
11
|
|
|
12
12
|
<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
|
|
13
|
+
<%= pb_rails("button", props: {id: "set-pills", text: "Restore Default Options", variant: "secondary"}) %>
|
|
13
14
|
|
|
14
15
|
<!-- This section is an example of the available JavaScript event hooks -->
|
|
15
16
|
<%= javascript_tag defer: "defer" do %>
|
|
@@ -28,4 +29,10 @@
|
|
|
28
29
|
document.querySelector('#clear-pills').addEventListener('click', function() {
|
|
29
30
|
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
|
|
30
31
|
})
|
|
32
|
+
|
|
33
|
+
document.querySelector('#set-pills').addEventListener('click', function() {
|
|
34
|
+
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:set', {
|
|
35
|
+
detail: [{ label: 'Windows', value: '#FFA500' }]
|
|
36
|
+
}))
|
|
37
|
+
})
|
|
31
38
|
<% end %>
|
|
@@ -8,6 +8,8 @@ You can also pass `default_options` which will populate the initial pill selecti
|
|
|
8
8
|
|
|
9
9
|
`default_options: [{ label: 'Windows', value: '#FFA500' }]`
|
|
10
10
|
|
|
11
|
+
When present, the kit root gets `data-default-value` (JSON of `{ label, value }` only) for restore-after-clear via `:set`. Extra option fields are omitted; if serialization fails, the attribute is left off so the kit still mounts.
|
|
12
|
+
|
|
11
13
|
#### Rails: Subscribing to JS Events
|
|
12
14
|
|
|
13
15
|
JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
|
|
@@ -21,4 +23,12 @@ This kit utilizes a default `id` prop named `react-select-input`. It is **highly
|
|
|
21
23
|
|
|
22
24
|
The same rule regarding the `id` prop applies to publishing JS events. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
|
|
23
25
|
|
|
24
|
-
`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.
|
|
26
|
+
`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.
|
|
27
|
+
|
|
28
|
+
`pb-typeahead-kit-typeahead-pills-example1:set` event to set options without treating it as a user click (no `result-option-select`). Pass `detail` as `[{ label, value }, ...]` (or a single object for single-select):
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:set', {
|
|
32
|
+
detail: [{ label: 'Windows', value: '#FFA500' }]
|
|
33
|
+
}))
|
|
34
|
+
```
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.12.0
|
|
4
|
+
version: 16.12.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-07-
|
|
12
|
+
date: 2026-07-29 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|