playbook_ui_docs 13.31.0.pre.alpha.PLAY10863204 → 13.31.0.pre.alpha.play1262iconstyles3171
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_date_year_stacked/docs/_date_year_stacked_default.jsx +1 -4
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +19 -14
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +3 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +3 -7
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +5 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md +5 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -9
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +2 -2
- data/dist/menu.yml +472 -566
- data/dist/playbook-doc.js +4 -4
- 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: 7d0b9fae97f9358c52a1e11ba8377d8484d7702a3a02eeeba8ce562102f7bc23
|
4
|
+
data.tar.gz: 6a8639c6df0740925f58c74079674bcf554a3d198fa85707f42785fcb9449649
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2766a508872341289243ec5752d7dab8f32123dd07ab0bcb6cc1939e53ee9265f21585f6a990870926096303dc317282db7100edad23fca8c66ca8c40bb7699b
|
7
|
+
data.tar.gz: 5d4a67a748bbd75ba7961d803394ec3b356cce3e23e4a664594ac8c778c7efd3fd8841ffc8831c25ab8974515ed38803af5fd9d92a908e24012f2446feb35ff9
|
@@ -4,10 +4,7 @@ import { DateYearStacked } from '../../'
|
|
4
4
|
const DateYearStackedDefault = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
|
-
<DateYearStacked
|
8
|
-
date={new Date()}
|
9
|
-
{...props}
|
10
|
-
/>
|
7
|
+
<DateYearStacked date={new Date()} />
|
11
8
|
<DateYearStacked
|
12
9
|
align="center"
|
13
10
|
date={new Date()}
|
@@ -1,19 +1,23 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import {
|
2
|
+
import { SelectableList, Draggable, DraggableProvider } from "../../";
|
3
3
|
|
4
4
|
// Initial items to be dragged
|
5
5
|
const data = [
|
6
6
|
{
|
7
|
-
id: "
|
8
|
-
|
7
|
+
id: "1",
|
8
|
+
text: "Task 1",
|
9
9
|
},
|
10
10
|
{
|
11
|
-
id: "
|
12
|
-
|
11
|
+
id: "2",
|
12
|
+
text: "Task 2",
|
13
13
|
},
|
14
14
|
{
|
15
|
-
id: "
|
16
|
-
|
15
|
+
id: "3",
|
16
|
+
text: "Task 3",
|
17
|
+
},
|
18
|
+
{
|
19
|
+
id: "4",
|
20
|
+
text: "Task 4",
|
17
21
|
},
|
18
22
|
];
|
19
23
|
|
@@ -26,19 +30,20 @@ const DraggableDefault = (props) => {
|
|
26
30
|
onReorder={(items) => setInitialState(items)}
|
27
31
|
>
|
28
32
|
<Draggable.Container {...props}>
|
29
|
-
|
30
|
-
{initialState.map(({ id,
|
33
|
+
<SelectableList variant="checkbox">
|
34
|
+
{initialState.map(({ id, text }) => (
|
31
35
|
<Draggable.Item dragId={id}
|
32
36
|
key={id}
|
33
37
|
>
|
34
|
-
<
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
+
<SelectableList.Item
|
39
|
+
label={text}
|
40
|
+
name={id}
|
41
|
+
value={id}
|
42
|
+
{...props}
|
38
43
|
/>
|
39
44
|
</Draggable.Item>
|
40
45
|
))}
|
41
|
-
|
46
|
+
</SelectableList>
|
42
47
|
</Draggable.Container>
|
43
48
|
</DraggableProvider>
|
44
49
|
</>
|
@@ -1,6 +1,4 @@
|
|
1
|
-
|
1
|
+
To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
|
2
2
|
|
3
|
-
`
|
4
|
-
|
5
|
-
`Draggable.Container` = This specifies the container within which items can be dropped.
|
6
|
-
`Draggable.Item` = This specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.
|
3
|
+
The `Draggable.Container` specifies the container within which items can be dropped.
|
4
|
+
The `Draggable.Item` specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.
|
@@ -1,9 +1,5 @@
|
|
1
|
-
For a simplified version of the Draggable API for the Card kit,
|
2
|
-
|
3
|
-
Use `DraggableProvider` and manage state as shown.
|
4
|
-
|
5
|
-
`Draggable.Container` creates the container within which the cards can be dragged and dropped.
|
6
|
-
|
7
|
-
The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
|
1
|
+
For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the Card kit.
|
8
2
|
|
3
|
+
In addition to the above `dragId` is a REQUIRED prop to be passedd to the Card kit when implementing dragging.
|
9
4
|
|
5
|
+
The dev must manage state as shown.
|
@@ -1,5 +1,7 @@
|
|
1
|
-
For a simplified version of the Draggable API for the List kit,
|
1
|
+
For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `enableDrag` prop.
|
2
2
|
|
3
|
-
|
3
|
+
In addition to the above `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
|
4
4
|
|
5
|
-
The
|
5
|
+
The dev must manage state as shown.
|
6
|
+
|
7
|
+
The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.
|
@@ -1,5 +1,7 @@
|
|
1
|
-
For a simplified version of the Draggable API for the SelectableList kit,
|
1
|
+
For a simplified version of the Draggable API for the SelectableList kit, use the DraggableProvider to wrap the SelectableList kit and use the `enableDrag` prop.
|
2
2
|
|
3
|
-
|
3
|
+
In addition to the above `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
|
4
4
|
|
5
|
-
The
|
5
|
+
The dev must manage state as shown.
|
6
|
+
|
7
|
+
The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.
|
@@ -13,14 +13,6 @@
|
|
13
13
|
]
|
14
14
|
%>
|
15
15
|
|
16
|
-
<%
|
17
|
-
example_dropdown_options = [
|
18
|
-
{ label: 'United States', value: 'United States', id: 'us' },
|
19
|
-
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
20
|
-
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
21
|
-
]
|
22
|
-
%>
|
23
|
-
|
24
16
|
<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
|
25
17
|
<%= form.text_field :example_text_field, props: { label: true, required: true } %>
|
26
18
|
<%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
|
@@ -30,7 +22,6 @@
|
|
30
22
|
<%= form.password_field :example_password_field, props: { label: true, required: true } %>
|
31
23
|
<%= form.url_field :example_url_field, props: { label: true, required: true } %>
|
32
24
|
<%= form.text_area :example_text_area, props: { label: true, required: true } %>
|
33
|
-
<%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
|
34
25
|
<%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
|
35
26
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
36
27
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
|
|
5
5
|
import Title from '../../pb_title/_title'
|
6
6
|
|
7
7
|
const TextInputDefault = (props) => {
|
8
|
-
const [firstName, setFirstName] = useState('')
|
9
8
|
const handleOnChangeFirstName = ({ target }) => {
|
10
9
|
setFirstName(target.value)
|
11
10
|
}
|
12
11
|
const ref = React.createRef()
|
13
12
|
|
13
|
+
const [firstName, setFirstName] = useState('')
|
14
14
|
const [formFields, setFormFields] = useState({
|
15
15
|
firstName: 'Jane',
|
16
16
|
lastName: 'Doe',
|
@@ -47,6 +47,8 @@ const promiseOptions = (inputValue) =>
|
|
47
47
|
|
48
48
|
const TypeaheadWithPillsAsync = (props) => {
|
49
49
|
const [users, setUsers] = useState([])
|
50
|
+
const handleOnChange = (value) => setUsers(formatUsers(value))
|
51
|
+
const formatValue = (users) => formatUsers(users)
|
50
52
|
const formatUsers = (users) => {
|
51
53
|
const results = () => (users.map((user) => {
|
52
54
|
if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
|
@@ -57,8 +59,6 @@ const TypeaheadWithPillsAsync = (props) => {
|
|
57
59
|
}))
|
58
60
|
return results()
|
59
61
|
}
|
60
|
-
const handleOnChange = (value) => setUsers(formatUsers(value))
|
61
|
-
const formatValue = (users) => formatUsers(users)
|
62
62
|
|
63
63
|
return (
|
64
64
|
<>
|