playbook_ui 13.31.0.pre.alpha.PLAY10863204 → 13.31.0.pre.alpha.play1262iconstyles3171

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb0b0eeaa6db40584611bedb1796a2f95dbf7693f4cce865be1ed5c87d1d8819
-  data.tar.gz: 3617a015115e540c14349aa3c5b0e741edb566e8ce5bcd72803f255e7e4f6beb
+  metadata.gz: aa8ace32b190d02c2ea57b6d1bd177c128839e736d35e38f5c5514c6fe45838f
+  data.tar.gz: 7298df1115a49f330fd4c4eb67204011693c9f1fa34fcf5ada26051857f8a2af
 SHA512:
-  metadata.gz: 895e69139eb0eb62e0037cbc89ff412c748d2f2154a0433a86318df38f526b3036e6643b390ba58772d9d06447297b80d52b64753706db6156e7a28454e3d782
-  data.tar.gz: '0093caf11bc2960351ae3045e2db58cacbf46352d5062d0abdc0112e29b5520ebfdef2d534f6d3158a91a4ed42852885549eb71b53014d4fcf8cf6f169b8e2bd'
+  metadata.gz: a551b8ee5a70651d40c057340fd6de6fb80a8bf2be4f50966f1476049dd4df7e1704d598c3465e314a2a50c3b2a164ecf0a51324dabce8e10ff95fa3140840d8
+  data.tar.gz: 7fa81d473e8d499571e1d03a6e3d33054a1da8e5e7ef8a0ca5577fea8193a7690dcb94e38e9db2c7c097a262f1bdac1260a53ea6d3732f5e67757f2db2d2ff94

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,14 +1,23 @@
 <% if object.image_url.present? %>
-  <%= pb_content_tag(object.tag,
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};
               background-position: #{object.background_position};",
+      **combined_html_options
   ) do %>
     <%= content.presence %>
   <% end %>
 <% else %>
-  <%= pb_content_tag(object.tag,
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
       style: object.custom_background_color
   ) do %>
     <%= content.presence %>

data/app/pb_kits/playbook/pb_body/body.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do%>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do%>
 <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:nav) do %>
+<%= content_tag(:nav,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/caption.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,4 +1,10 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    dark: object.dark,
+    **combined_html_options) do %>
     <%= content.presence %>
 <% end %>
 

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -28,7 +28,7 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <i
-                class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
+                class="pb_icon_kit far far fa-lg fa-fw fa-fw fa-lg fa-chevron-down"
               />
               <span
                 aria-label="chevron-down icon"

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_detail/detail.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,5 +1,10 @@
 <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
-    <%= pb_content_tag(:dialog) do %>
+    <%= content_tag(:dialog,
+        aria: object.aria,
+        data: object.data,
+        id: object.id,
+        class: object.classname,
+        **combined_html_options) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
         <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -1,5 +1,8 @@
-<%= pb_content_tag(:div, class: "") do %>
-  <%  'excluded classname?'  %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria,
+    **combined_html_options) do %>
     <% if object.confirm_button && object.cancel_button %>
         <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, class: object.sticky_header) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.sticky_header,
+    aria: object.aria,
+    **combined_html_options) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -51,16 +51,7 @@ export const DraggableContext = () => {
   return useContext(DragContext);
 };
 
-export const DraggableProvider = ({ 
-  children, 
-  initialItems, 
-  onReorder,
-  onDragStart, 
-  onDragEnter, 
-  onDragEnd, 
-  onDrop, 
-  onDragOver 
-}: DraggableProviderType) => {
+export const DraggableProvider = ({ children, initialItems, onReorder }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {
@@ -74,7 +65,6 @@ export const DraggableProvider = ({
   const handleDragStart = (id: string, container: string) => {
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
-    if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
@@ -82,13 +72,11 @@ export const DraggableProvider = ({
       dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
       dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
     }
-    if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    if (onDragEnd) onDragEnd();
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -99,13 +87,11 @@ export const DraggableProvider = ({
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     changeCategory(state.dragData.id, container);
-    if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
-    if (onDragOver) onDragOver(e, container);
   };
 
   const contextValue = useMemo(() => ({

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -23,9 +23,4 @@ export interface ItemType {
       children: React.ReactNode;
       initialItems: ItemType[];
       onReorder: (items: ItemType[]) => void;
-      onDragStart?: (id: string, container: string) => void; 
-      onDragEnter?: (id: string, container: string) => void;
-      onDragEnd?: () => void; 
-      onDrop?: (container: string) => void; 
-      onDragOver?: (e: Event, container: string) => void;
     }

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_dropdown/dropdown.html.erb

@@ -8,9 +8,7 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="" />
-        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="" style="display: none" <%= object.required ? "required" : ""%> />
-
+        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
         <% if content.present? %>
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -8,8 +8,6 @@ module Playbook
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :error, type: Playbook::Props::String
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -8,22 +8,16 @@ const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
 const UP_ARROW_SELECTOR = "#dropdown_close_icon";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
     return DROPDOWN_SELECTOR;
   }
 
-  get target() {
-    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
-  }
-
   connect() {
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.bindEventListeners();
     this.updateArrowDisplay(false);
-    this.handleFormValidation();
   }
 
   bindEventListeners() {
@@ -44,13 +38,9 @@ export default class PbDropdown extends PbEnhancedElement {
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
     const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
-
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
       hiddenInput.value = JSON.parse(value).id;
-      inputFormValidation.value = JSON.parse(value).id;
-      this.clearFormValidation(inputFormValidation);
       this.onOptionSelected(value, option);
     }
   }
@@ -113,6 +103,10 @@ export default class PbDropdown extends PbEnhancedElement {
     selectedOption.classList.add("pb_dropdown_option_selected");
   }
 
+  get target() {
+    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
+  }
+
   showElement(elem) {
     elem.classList.remove("close");
     elem.classList.add("open");
@@ -156,27 +150,4 @@ export default class PbDropdown extends PbEnhancedElement {
       upArrow.style.display = isOpen ? "inline-block" : "none";
     }
   }
-
-  handleFormValidation() {
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
-
-    inputFormValidation.addEventListener("invalid", function (event) {
-      if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") {
-        event.preventDefault();
-        inputFormValidation.closest(".dropdown_wrapper").classList.add("error");
-      }
-    }, true);
-  }
-
-  clearFormValidation(input) {
-    if (input.checkValidity()) {
-      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
-      dropdownWrapperElement.classList.remove("error");
-
-      const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative");
-      if (errorLabelElement) {
-        errorLabelElement.remove();
-      }
-    }
-  }
 }

data/app/pb_kits/playbook/pb_flex/flex.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

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_hashtag/hashtag.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:span) do %>
+<%= content_tag(:span,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:span) do %>
+<%= content_tag(:span,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <mark>
       <%= content.presence || object.text %>
     </mark>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
 <% end %>