playbook_ui_docs 14.14.0.pre.alpha.play1755pbcontenttag6478 → 14.14.0.pre.alpha.play1852reacthookformsupportradio6318

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f628ee3a2ff8b366291b3ca8d7452c80a6d25c80e7fc561c691d43c28843d259
-  data.tar.gz: 43506c0af2568f8250400879c15f24f05b0cde5aca59bb0183811b3368df0bc8
+  metadata.gz: 4071d9d47bfa6226f74365c564f070e6329f147e4739c73710e9bb3078acf22a
+  data.tar.gz: eadb0cc748ba73de5c262b8caf6c15cba150c8b4572d58dfe9bcbc2d4c0a020d
 SHA512:
-  metadata.gz: 9d9410fd5feae0f80c7e2540b744a9993becc5d02cf2147fb86d64d5a7c7e12645c01d2c27c7b0e35cc40bc2baac3da9a6cbc565c034e9c41704202166486252
-  data.tar.gz: 0b67de356622179f0ba206b6a08d208575fbab5ce5c3bcd95a09e7a0fe90241c09fa88a0332794284904fc3541622f38740fab6b4027f445a11df4afbdc324f9
+  metadata.gz: 1f0f8c531ba88210e337bb874204bc177f5525f177cd555ecfa7a8442356693ba80749c00448e3f82057856b26c737497bf498e7f9bea03eb1d14e5374559b09
+  data.tar.gz: f861f78d5b7278725bd6d91b73ac375a4377c1ac870242c35462c89146c8b7de13365d3a7e7024e5154cb755cf0f1abf1141e773deadea8ab94c756f6bac5cdc

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

@@ -10,7 +10,6 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
-  - currency_null_display: Null Display
   
   react:
   - currency_variants: Variants
@@ -22,7 +21,6 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
-  - currency_null_display: Null Display
 
   swift:
   - currency_size_swift: Size

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

@@ -6,5 +6,4 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'
-export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -1,20 +1 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-1", 
-    }) do  %>
-        Test me (Left Drawer)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-2", 
-        placement: "right"
-    }) do  %>
-        Test me (Right Drawer)
-    <% end %>
-<% end %>
-
+<%= pb_rails("drawer") %>

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

@@ -2,11 +2,6 @@ examples:
   
   rails:
   - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_borders: Borders 
   
   
   react:

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -32,7 +32,7 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select_validation, 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 } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>

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

@@ -4,11 +4,8 @@ examples:
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
-  - overlay_hide_scroll_bar: Hide Scroll Bar
 
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
-  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
-  - overlay_hide_scroll_bar: Hide Scroll Bar

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

@@ -2,4 +2,3 @@ export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
-export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'

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

@@ -0,0 +1,60 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { Radio, Flex, Body } from "playbook-ui"
+
+const RadioReactHook = () => {
+  const { register, watch } = useForm({
+    defaultValues: {
+      size: "Small",
+    },
+  })
+
+  const selectedSize = watch("size", "Small")
+
+  return (
+    <Flex orientation="row">
+      <Flex
+          align="start"
+          orientation="column"
+          paddingRight="lg"
+        >
+        <Radio
+            alignment="left"
+            label="Small"
+            marginBottom='sm'
+            name="size"
+            value="Small"
+            {...register("size")}
+        />
+        <br />
+        <Radio
+            alignment="left"
+            label="Medium"
+            marginBottom='sm'
+            name="size"
+            value="Medium"
+            {...register("size")}
+        />
+        <br />
+        <Radio
+            alignment="left"
+            label="Large"
+            marginBottom='sm'
+            name="size"
+            value="Large"
+            {...register("size")}
+        />
+      </Flex>
+      <Flex
+          align="start"
+          orientation="column"
+      >
+        <Body
+            text={`Selected Size: ${selectedSize}`}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+
+export default RadioReactHook

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

@@ -0,0 +1 @@
+You can pass react hook props to the radio kit.

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

@@ -16,6 +16,7 @@ examples:
   - radio_alignment: Alignment
   - radio_disabled: Disabled
   - radio_custom_children: Custom Children
+  - radio_react_hook: React Hook Form
 
   swift:
   - radio_default_swift: Default
@@ -26,4 +27,4 @@ examples:
   - radio_spacing_swift: Spacing
   - radio_padding_swift: Padding
   - radio_subtitle_swift: Subtitle
-  - radio_props_swift: ""
+  - radio_props_swift: ""

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

@@ -4,3 +4,4 @@ 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 RadioReactHook } from './_radio_react_hook.jsx'

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

@@ -2,10 +2,8 @@ examples:
 
   rails:
   - tooltip_default: Default
-  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
-  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:

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

@@ -12,8 +12,6 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
-    - typeahead_dynamic_options: Dynamic Options
-    - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
 
   react:
     - typeahead_default: Default