playbook_ui_docs 13.31.0.pre.alpha.PLAY10863204 → 13.31.0.pre.alpha.play1262iconstyles3171

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27c05cac000429d46ff7ed199368b7abae766129922093dd6d0b33bd45c6a6b4
-  data.tar.gz: a1c56da4e7061eafa9ebbc53281e69a56e6f3ba780298230c99bc239c7affe14
+  metadata.gz: 7d0b9fae97f9358c52a1e11ba8377d8484d7702a3a02eeeba8ce562102f7bc23
+  data.tar.gz: 6a8639c6df0740925f58c74079674bcf554a3d198fa85707f42785fcb9449649
 SHA512:
-  metadata.gz: e305119438bfe3a329e0de069a568c3f3a68ca2f30923f1b6e41221ecba03ff505b6d3a57654d7526f82badc3ae5fd1bf59b3d7eb66707710ef5987e8a75d08c
-  data.tar.gz: 2e58757bda96a91842dcd128f3d08015d81aa6242611b18f3e442a85ccd327443f16baf2bc623a83527267a660b8b904b83f898119d41afb6b8dcb860f977f59
+  metadata.gz: 2766a508872341289243ec5752d7dab8f32123dd07ab0bcb6cc1939e53ee9265f21585f6a990870926096303dc317282db7100edad23fca8c66ca8c40bb7699b
+  data.tar.gz: 5d4a67a748bbd75ba7961d803394ec3b356cce3e23e4a664594ac8c778c7efd3fd8841ffc8831c25ab8974515ed38803af5fd9d92a908e24012f2446feb35ff9

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -4,10 +4,7 @@ import { DateYearStacked } from '../../'
 const DateYearStackedDefault = (props) => {
   return (
     <div>
-      <DateYearStacked
-          date={new Date()}
-          {...props}
-      />
+      <DateYearStacked date={new Date()} />
       <DateYearStacked
           align="center"
           date={new Date()}

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,19 +1,23 @@
 import React, { useState } from "react";
-import { Flex, Image, Draggable, DraggableProvider } from "../../";
+import { SelectableList, Draggable, DraggableProvider } from "../../";
 
 // Initial items to be dragged
 const data = [
   {
-    id: "21",
-    url: "https://unsplash.it/500/400/?image=633",
+    id: "1",
+    text: "Task 1",
   },
   {
-    id: "22",
-    url: "https://unsplash.it/500/400/?image=634",
+    id: "2",
+    text: "Task 2",
   },
   {
-    id: "23",
-    url: "https://unsplash.it/500/400/?image=637",
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
   },
 ];
 
@@ -26,19 +30,20 @@ const DraggableDefault = (props) => {
         onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container {...props}>
-        <Flex>
-            {initialState.map(({ id, url }) => (
+          <SelectableList variant="checkbox">
+            {initialState.map(({ id, text }) => (
               <Draggable.Item dragId={id} 
                   key={id}
               >
-                <Image alt={id} 
-                    margin="xs"
-                    size="md" 
-                    url={url} 
+                <SelectableList.Item
+                    label={text} 
+                    name={id} 
+                    value={id} 
+                    {...props}
                 />
               </Draggable.Item>
             ))}
-         </Flex>
+          </SelectableList>
         </Draggable.Container>
     </DraggableProvider>
     </>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md

@@ -1,6 +1,4 @@
-The Draggable kit gives you a full subcomponent structure that allows it to be used with almost any kits.
+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.
 
-`DraggableProvider` = This provider manages all settings that allows drag and drop to function and must be used as the outermost wrapper. It has 2 REQUIRED props: `initialItems` (initial data) and `onReorder` (function that returns mutated data as items are reordered via drag and drop). Devs must manage state as shown.
- 
-`Draggable.Container` = This specifies the container within which items can be dropped.
-`Draggable.Item` = This specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.
+The `Draggable.Container` specifies the container within which items can be dropped.
+The `Draggable.Item` specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md

@@ -1,9 +1,5 @@
-For a simplified version of the Draggable API for the Card kit, you can do the following:
-
-Use `DraggableProvider` and manage state as shown.
-
-`Draggable.Container` creates the container within which the cards can be dragged and dropped. 
-
-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.
+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. 
 
+In addition to the above `dragId` is a REQUIRED prop to be passedd to the Card kit when implementing dragging.
 
+The dev must manage state as shown.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md

@@ -1,5 +1,7 @@
-For a simplified version of the Draggable API for the List kit, you can do the following:
+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. 
 
-Use `DraggableProvider` and manage state as shown.
+In addition to the above `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
 
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.
+The dev must manage state as shown.
+
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md

@@ -1,5 +1,7 @@
-For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
+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. 
 
-Use `DraggableProvider` and manage state as shown.
+In addition to the above `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
+The dev must manage state as shown.
+
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -13,14 +13,6 @@
   ]
 %>
 
-<% 
-  example_dropdown_options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-%>
-
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
@@ -30,7 +22,6 @@
   <%= form.password_field :example_password_field, props: { label: true, required: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
-  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
+  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
-
 import React, { useState } from 'react'
 
 import {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -47,6 +47,8 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -57,8 +59,6 @@ const TypeaheadWithPillsAsync = (props) => {
     }))
     return results()
   }
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
 
   return (
     <>