playbook_ui 14.2.1.pre.alpha.PBNTR431fixingduplicatingtextareaclassname3689 → 14.2.1.pre.alpha.PBNTR479removeextraspacingfromradiochildren3669

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e5176e3600e405965bbf3825210db99f5e79045b2ab05ec5d9dd415b85029a7c
-  data.tar.gz: c7acd54ee584b58d4e7626f3988e03abc55c78d8eb897fa84601f42a6356bb19
+  metadata.gz: 544fa71e47c1a842ee29ae5d8b008a74f614e9f47e72c8234994708474986f19
+  data.tar.gz: fe0a673000274c03f0e6e2e7d18b20501df4e411bfe3b3af73b34bde1540a403
 SHA512:
-  metadata.gz: 49ca875dcc91d6e2beae3d93ff7ff9e741e8db0a4df9fb3a7c0561311a011fdf301308217f22c65708298ee6f5854015bb8929fc2f67e94820ffc64d1c50bd7e
-  data.tar.gz: 309f669294d766289d8b79a466d488107c69c243aa1725292b7c15c380ca87bd1f81a2d1c33d1c6c0395ad7a94f8df59f377e340c38342006dc8f0518ae12023
+  metadata.gz: '018f79a3becb9f34370e4cba0bdf4919d8901126f1aceab3dfb18a6444e4c091920e863de71641ceda1e3d3ed57ccb1430d22f85954963970276506c1a85466b'
+  data.tar.gz: 1f42c264341869cc5f0f55d95d067b778be08d8b2d398bde88200ffda102e4d7a03a8ffff22821853ff04268366d0ad4b3e186aee8a75b63e2f2f6472bbca1ac

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -16,7 +16,6 @@ type CircleIconButtonProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   link?: string,
-  loading?: boolean,
   onClick?: React.MouseEventHandler<HTMLElement>,
   newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset' | undefined,
@@ -33,7 +32,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     htmlOptions = {},
     icon,
     id,
-    loading = false,
     onClick = noop,
     type,
     link,
@@ -63,7 +61,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
           disabled={disabled}
           htmlType={type}
           link={link}
-          loading={loading}
           newWindow={newWindow}
           onClick={onClick}
           text={null}

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -12,8 +12,6 @@ module Playbook
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :icon, required: true
-      prop :loading, type: Playbook::Props::Boolean,
-                     default: false
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js

@@ -15,18 +15,3 @@ test('default test', () => {
 
   expect(kit).toHaveClass('pb_circle_icon_button_kit')
 })
-
-test('passes loading prop to button', () => {
-  render(
-    <CircleIconButton
-        data={{ testid: 'loading-test' }}
-        icon="plus"
-        loading
-    />
-  )
-
-  const kit = screen.getByTestId('loading-test')
-  const button = kit.querySelector('.pb_button_kit_primary_inline_enabled_loading')
-  
-  expect(button).toBeInTheDocument()
-})

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

@@ -3,10 +3,8 @@ examples:
   rails:
   - circle_icon_button_default: Default
   - circle_icon_button_link: Link
-  - circle_icon_button_loading: Loading
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
   - circle_icon_button_link: Link
-  - circle_icon_button_loading: Loading

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

@@ -1,4 +1,3 @@
 export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx'
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
 export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
-export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -92,6 +92,7 @@ const Textarea = ({
       <Caption text={label} />
       {children || (
         <textarea
+            className="pb_textarea_kit"
             disabled={disabled}
             name={name}
             onChange={onChange}

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -15,6 +15,7 @@
     <%= text_area(
         :object,
         :method,
+        :class => "#{object.classname}",
         :max_characters => object.max_characters,
         :name => object.name,
         :onkeyup => object.onkeyup,

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,