playbook_ui_docs 14.25.0.pre.alpha.dialogfix10277 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

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

@@ -0,0 +1,20 @@
+examples:
+  
+  rails:
+  - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
+  - drawer_borders: Borders 
+  
+  
+  react:
+  - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
+  - drawer_borders: Borders 

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

@@ -0,0 +1,7 @@
+export { default as DrawerDefault } from './_drawer_default.jsx'
+export { default as DrawerSizes } from './_drawer_sizes.jsx'
+export { default as DrawerOverlay } from './_drawer_overlay.jsx'
+export { default as DrawerBorders } from './_drawer_borders.jsx'
+export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
+export { default as DrawerMenu } from './_drawer_menu.jsx'
+export { default as DrawerBehavior } from './_drawer_behavior.jsx'

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LoadingInline } from 'playbook-ui'
+
+const LoadingInlineVariant = (props) => {
+  return (
+    <div>
+      <LoadingInline 
+          text=" Dotted Spinner" 
+          variant="dotted" 
+          {...props}
+      />
+
+      <br />
+  
+      <LoadingInline
+          text=" Solid Spinner"
+          variant="solid"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineVariant

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant

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

@@ -1,2 +1,3 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -26,7 +26,7 @@ const MapDefault = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -29,7 +29,7 @@ const MapWithCustomButton = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -26,7 +26,7 @@ const MapWithPlugin = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -19,6 +19,7 @@ const RadioReactHook = () => {
           paddingRight="lg"
         >
         <Radio
+            alignment="left"
             label="Small"
             marginBottom='sm'
             name="size"
@@ -27,6 +28,7 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
+            alignment="left"
             label="Medium"
             marginBottom='sm'
             name="size"
@@ -35,6 +37,7 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
+            alignment="left"
             label="Large"
             marginBottom='sm'
             name="size"

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -5,9 +5,7 @@ import Detail from '../../pb_detail/_detail'
 import Icon from '../../pb_icon/_icon'
 
 const children = (
-  <Flex alignItems="center"
-      padding="xs"
-  >
+  <Flex padding="xs">
     <Icon color="primary"
         icon="arrow-down"
     />

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

@@ -7,7 +7,7 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Products", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
 
 <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 

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

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Products"
+          label="Colors"
           options={options}
           placeholder=""
           {...props}

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

@@ -7,4 +7,25 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example2", pill_color: "neutral", options: options, label: "Products", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+
+<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
+    console.log('All options cleared')
+  })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
+  })
+<% end %>

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

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Products"
+          label="Colors"
           options={options}
           pillColor="neutral"
           placeholder=""

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

@@ -9,9 +9,9 @@
 
 <%= pb_rails("typeahead", props: {
     id: "typeahead-without-pills-example1",
-    placeholder: "All Products",
+    placeholder: "All Colors",
     options: options, 
-    label: "Products",
+    label: "Colors",
     name: :foo,
     is_multi: false
   })