playbook_ui_docs 14.4.0.pre.alpha.pbntr523enablekitsforradiofix3826 → 14.4.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1e57172003495ff23ef86ab014c8023ea069bb9f9bc9ffdb8dab469c6bdde7b
-  data.tar.gz: 8cfb04820c1de2a1ba332b06d72ba605786e7418aac62f68ed1925310dc31546
+  metadata.gz: c54ba703b184e586be6b60ae78c1906b177980ba3df3acb632c62c25fa50ef34
+  data.tar.gz: ec484d6808853c43e08c09ea1847c83314cd338575f255f9344207396f4448f4
 SHA512:
-  metadata.gz: fc426feebadb866bccdccc38b888e4393a99be03f882a5801aba4eaa87af11ec0e574caad299e89931024fb7e8103e9af6e591b7e9c825daf050f62df9efce2c
-  data.tar.gz: 5ca81e22fec27d95de46d73c716894c2db299f95e03364b2da39601fab6091ac698b28c0eff14acfffc0c3f7066b091bd9769349e8a7ebabdba8d50e376c3a81
+  metadata.gz: 808f9245ee0a6c7ff53fc321ea929b2ed4eafadd0019774941e15901f21b8bbd41d43e2f4c6c3a457ce1247f766d192852a073d9d7e3d64c7d2e887bb1dc9fd3
+  data.tar.gz: 2cb4480e4d498adf7a1789194588fa9d4375ba0c33a9e5e2ee6d1a9af4fa1d570e735302c5f6c69b29838fe49ce5773e1fa6eab85c78b6d6b76496a33cfff008

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

@@ -6,7 +6,6 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
-  - form_pill_colors: Form Pill Colors
 
   react:
   - form_pill_user: Form Pill User
@@ -14,4 +13,3 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
-  - form_pill_colors: Form Pill Colors

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

@@ -3,4 +3,3 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
-export { default as FormPillColors } from './_form_pill_colors.jsx'

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

@@ -6,7 +6,6 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
-  - multi_level_select_color: With Pills (Custom Color)
 
   react:
   - multi_level_select_default: Default
@@ -14,4 +13,3 @@ examples:
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
-  - multi_level_select_color: With Pills (Custom Color)

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

@@ -3,4 +3,3 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
-export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'

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

@@ -2,12 +2,10 @@ examples:
 
   rails:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_bubble: Bubble
 
 
   react:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_bubble: Bubble
 
   swift: 
   - multiple_users_stacked_default_swift: Default

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

@@ -1,2 +1 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
-export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'

data/app/pb_kits/playbook/pb_radio/docs/{_radio_custom_children.jsx → _radio_children.jsx}

@@ -17,34 +17,34 @@ const RadioChildren = (props) => {
   return (
     <div>
       <Radio
-          customChildren
           label="Select"
+          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Select"
           {...props}
       >
         <Select 
+            marginBottom="none"
             minWidth="xs"
             options={options}
         />
       </Radio>
       <Radio
-          customChildren
           label="Typeahead"
+          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Typeahead"
           {...props}
       >
         <Typeahead 
+            marginBottom="none"
             minWidth="xs"
             options={options}
         />
       </Radio>
-      <br />
       <Radio
-          customChildren
           defaultChecked={false}
           label="Typography"
           name="Group1"
@@ -56,4 +56,4 @@ const RadioChildren = (props) => {
     </div>
   )
 }
-export default RadioChildren
+export default RadioChildren

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

@@ -7,7 +7,6 @@ examples:
   - radio_options: With Options
   - radio_alignment: Alignment
   - radio_disabled: Disabled
-  - radio_custom_children: Custom Children
 
   react:
   - radio_default: Default
@@ -15,7 +14,7 @@ examples:
   - radio_error: With Error
   - radio_alignment: Alignment
   - radio_disabled: Disabled
-  - radio_custom_children: Custom Children
+  - radio_children: Children
 
   swift:
   - radio_default_swift: Default

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

@@ -3,4 +3,4 @@ export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
 export { default as RadioDisabled } from './_radio_disabled.jsx'
-export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
+export { default as RadioChildren } from './_radio_children.jsx'

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,7 +9,7 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_error_state: Error State
-    - typeahead_with_pills_color: With Pills (Custom Color)
+    - typeahead_margin_bottom: Margin Bottom
 
   react:
     - typeahead_default: Default
@@ -24,4 +24,4 @@ examples:
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
     - typeahead_custom_menu_list: Custom MenuList
-    - typeahead_with_pills_color: With Pills (Custom Color)
+    - typeahead_margin_bottom: Margin Bottom

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

@@ -10,4 +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 TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
+export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'