playbook_ui 14.2.0.pre.alpha.play1490railsdialogdatafix3649 → 14.2.1.pre.alpha.PBNTR479removeextraspacingfromradiochildren3669

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aee64888bd81c3d5f72d869a1b22400098eb47918a191fbc1c207ec1445c24e4
-  data.tar.gz: 070d35ca5b470fcdc364eed7861cec16e6a06c3cf6e1d74efe5ba1e12ba98d0b
+  metadata.gz: 544fa71e47c1a842ee29ae5d8b008a74f614e9f47e72c8234994708474986f19
+  data.tar.gz: fe0a673000274c03f0e6e2e7d18b20501df4e411bfe3b3af73b34bde1540a403
 SHA512:
-  metadata.gz: 207ab69fd39ad89996ef5b2255f04071650d3cdf8167a95838ca00b65834d5c55015fd0a557b96901ad30dae773eb0653d57cea8bda9a92cd84633115dd1fdc4
-  data.tar.gz: 32e048396ec07f03f9ed30875fdceeed5609f7d8e8d9beccc6076703cfbf5530a9316a9c7ba8b8b770369adb010c29b26d40a91ec03469b0042271b6540ef5a3
+  metadata.gz: '018f79a3becb9f34370e4cba0bdf4919d8901126f1aceab3dfb18a6444e4c091920e863de71641ceda1e3d3ed57ccb1430d22f85954963970276506c1a85466b'
+  data.tar.gz: 1f42c264341869cc5f0f55d95d067b778be08d8b2d398bde88200ffda102e4d7a03a8ffff22821853ff04268366d0ad4b3e186aee8a75b63e2f2f6472bbca1ac

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

@@ -22,11 +22,8 @@
             <% if object.cancel_button && object.confirm_button %>
                         <%= pb_rails("dialog/dialog_footer", props: {
                             cancel_button: object.cancel_button,
-                            cancel_button_id: object.cancel_button_id,
                             confirm_button: object.confirm_button,
-                            confirm_button_id: object.confirm_button_id,
-                            id: object.id,
-                            loading: object.loading
+                            id: object.id
                         }) %>
             <% end %>
 

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -13,11 +13,8 @@ module Playbook
       prop :should_close_on_overlay_click, type: Playbook::Props::Boolean, default: true
       prop :title
       prop :text
-      prop :loading
       prop :confirm_button
-      prop :confirm_button_id
       prop :cancel_button
-      prop :cancel_button_id
       prop :status, type: Playbook::Props::Enum,
                     values: ["info", "caution", "delete", "error", "success", "default", ""],
                     default: ""

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -3,27 +3,6 @@ const dialogHelper = () => {
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");
   const dialogs = document.querySelectorAll(".pb_dialog_rails")
 
-  const loadingButton = document.querySelector('[data-disable-with="Loading"]');
-  if (loadingButton) {
-    loadingButton.addEventListener("click", function() {
-      const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
-      const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
-      let currentClass = okayLoadingButton.className;
-      let cancelClass = cancelButton ? cancelButton.className : "";
-
-      let newClass = currentClass.replace("_enabled", "_disabled_loading");
-      let newCancelClass = cancelClass.replace("_enabled", "_disabled");
-
-      // Disable the buttons
-      okayLoadingButton.disabled = true;
-      if (cancelButton) cancelButton.disabled = true;
-
-      okayLoadingButton.className = newClass;
-      if (cancelButton) cancelButton.className = newCancelClass;
-    });
-  }
-
-
   openTrigger.forEach((open) => {
     open.addEventListener("click", () => {
       var openTriggerData = open.dataset.openDialog;

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

@@ -3,12 +3,10 @@
     <% 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 %>
-            
-          <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id, data: loading_data,
-            }) do %>
+            <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
                 <%= object.confirm_button %>
             <% end %>
-            <%= pb_rails("button", props: { type: "button", data: {"close-dialog": "#{object.id}", "disable_cancel_with": cancel_loading }, id: object.cancel_button_id, variant: "link" }) do %>
+            <%= pb_rails("button", props: { type: "button", data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
                 <%= object.cancel_button %>
             <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb

@@ -4,22 +4,13 @@ module Playbook
   module PbDialog
     class DialogFooter < Playbook::KitBase
       prop :cancel_button
-      prop :cancel_button_id
       prop :confirm_button
       prop :confirm_button_id
-      prop :loading
+      prop :cancel_button_id
 
       def classname
         generate_classname("dialog_footer")
       end
-
-      def cancel_loading
-        loading ? "Loading" : ""
-      end
-
-      def loading_data
-        loading ? { disable_with: "Loading" } : {}
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dialog/docs/example.yml

@@ -10,7 +10,6 @@ examples:
   - dialog_stacked_alert: Stacked Button Alert
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
-  - dialog_loading: Loading
 
 
   react:

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -107,4 +107,17 @@ test('should pass className prop', () => {
 
   const kit = screen.getByTestId('typeahead-test')
   expect(kit).toHaveClass(className)
+})
+
+test('typeahead textinput has mb_sm class by default', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'default-mb-test' }}
+        options={options} 
+    />
+  )
+
+  const kit = screen.getByTestId('default-mb-test')
+  const textInput = kit.querySelector(".pb_text_input_kit")
+  expect(textInput).toHaveClass("mb_sm")
 })

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -45,6 +45,7 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
+  marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
 } & GlobalProps
 
 export type SelectValueType = {
@@ -76,12 +77,18 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
+  marginBottom = "sm",
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
     cacheOptions: true,
     components: {
-      Control,
+      Control: (controlProps: any) => (
+        <Control 
+            {...controlProps} 
+            marginBottom={marginBottom} 
+        />
+      ),
       ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null as null,

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -6,23 +6,30 @@ import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
   selectProps: any,
+  marginBottom?: string,
 }
 
-const TypeaheadControl = (props: Props) => (
-  <div className="pb_typeahead_wrapper">
-    <TextInput
-      dark={props.selectProps.dark}
-      error={props.selectProps.error}
-      label={props.selectProps.label}
-    >
-      <Flex>
-        <components.Control
-          className="text_input"
-          {...props}
-        />
-      </Flex>
-    </TextInput>
-  </div>
-)
+const TypeaheadControl = (props: Props) => {
+  const { selectProps, marginBottom } = props
+  const { dark, error, label } = selectProps
+
+  return (
+    <div className="pb_typeahead_wrapper">
+      <TextInput
+          dark={dark}
+          error={error}
+          label={label}
+          marginBottom={marginBottom}
+      >
+        <Flex>
+          <components.Control
+              className="text_input"
+              {...props}
+          />
+        </Flex>
+      </TextInput>
+    </div>
+  )
+}
 
 export default TypeaheadControl

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb

@@ -0,0 +1,88 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "None",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "none",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XXS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xxs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "Default - SM",
+    name: :foo,
+    is_multi: false,
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "MD",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "md",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "LG",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "lg",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XL",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xl",
+  })
+%>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

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

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadMarginBottom = (props) => {
+  return (
+    <>
+      <Typeahead
+          label="None"
+          marginBottom="none"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XXS"
+          marginBottom="xxs"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="XS"
+          marginBottom="xs"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="Default - SM"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="MD"
+          marginBottom="md"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="LG"
+          marginBottom="lg"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XL"
+          marginBottom="xl"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadMarginBottom

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -9,6 +9,7 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_error_state: Error State
+    - typeahead_margin_bottom: Margin Bottom
 
   react:
     - typeahead_default: Default
@@ -23,3 +24,4 @@ examples:
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
     - typeahead_custom_menu_list: Custom MenuList
+    - typeahead_margin_bottom: Margin Bottom

data/app/pb_kits/playbook/pb_typeahead/docs/index.js

@@ -10,3 +10,4 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
 export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
+export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -20,7 +20,8 @@
         label: object.label,
         name: object.name,
         value: object.value,
-        placeholder: object.placeholder
+        placeholder: object.placeholder,
+        margin_bottom: "none",
       }) %>
       <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -14,6 +14,9 @@ module Playbook
                     default: false
       prop :label
       prop :load_options
+      prop :margin_bottom, type: Playbook::Props::Enum,
+                           values: %w[none xxs xs sm md lg xl],
+                           default: "sm"
       prop :multi_kit, type: Playbook::Props::String,
                        default: ""
       prop :name
@@ -36,7 +39,8 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_typeahead_kit")
+        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
+        generate_classname("pb_typeahead_kit") + default_margin_bottom
       end
 
       def inline_class
@@ -65,6 +69,7 @@ module Playbook
           inline: inline,
           isMulti: is_multi,
           label: label,
+          marginBottom: margin_bottom,
           multiKit: multi_kit,
           name: name,
           options: options,