RubyGems - playbook_ui_docs - Versions diffs - 14.14.0.pre.alpha.PBNTR907reactfilterpopoverpropswidthbug6557 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275 - Mend

playbook_ui_docs 14.14.0.pre.alpha.PBNTR907reactfilterpopoverpropswidthbug6557 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a890f9a9e3a1ebef694ca6fcd18baf26688fa28be63e92471c93ae9c3ef9d59d
-  data.tar.gz: 5c4f5937d68b516c2d0fbafe6904ed3ad5db285c844c73f5a71c47019885410a
+  metadata.gz: 9c97cb9a2afa439d52f6bfcbe7731a80a98ae878c2c26480853e7d4d66a78486
+  data.tar.gz: 5bb13f8f8073f50146bd81e4cf18c12e788da8c59de846a19e47afd02293ca1d
 SHA512:
-  metadata.gz: 0c271e144b7a10807ec573f7078bddcca9fc35cc71da3e00f23b2ad314a97f9d1ca4dd0b465b3beca3c5202b97a547839be5f3ec72f7ce2904c4058326a0725c
-  data.tar.gz: 0b0a9e7c23ca4a00b7079401a3057ace1be91601d849f5bee07d163b892544a944d5ae5ae403824bcdff80585692d6a2e5f68e0fcaf13ed8d98ad17a5a7fb50a
+  metadata.gz: 9c9d0672b8f9c1c9c2b19c79c61dea0af0e61b15fd1d4e79f4c47256a46be98a6afd75555163c568f25da03923bf0b425f46405184af816cc0e7b0dd35ee80de
+  data.tar.gz: 59d30cb3bb73ec184f656b81be084643ddd498596b453563608681660dddf5bcc5bc80394f91209401f6f3c71bcc6151d84f10285e3df74da72a30e85275a8b2

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb CHANGED Viewed

@@ -3,7 +3,6 @@
     label: "Nil",
     margin_bottom: "md",
     null_display: "--",
-    size: "sm"
 }) %>
 <%= pb_rails("currency", props: {
@@ -11,12 +10,11 @@
     label: "Nil",
     margin_bottom: "md",
     null_display: "$0.00",
-    size: "sm"
 }) %>
 <%= pb_rails("currency", props: {
     amount: "",
     label: "Nil",
+    margin_bottom: "md",
     null_display: " ",
-    size: "sm"
 }) %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx CHANGED Viewed

@@ -41,7 +41,7 @@ const DrawerBorders = () => {
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border right
@@ -52,7 +52,7 @@ const DrawerBorders = () => {
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border left
@@ -63,7 +63,7 @@ const DrawerBorders = () => {
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border full

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx CHANGED Viewed

@@ -1,25 +1,42 @@
-import React from "react"
-import { Button, Body } from "playbook-ui"
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+  return [opened, toggle];
+};
+const DrawerBreakpoints = () => {
+  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
-const DrawerMenu = () => {
   return (
     <>
-      <Body>
-        The breakpoint prop determines when the Drawer is always visible. Above
-        the specified breakpoint, the Drawer remains open on the page. Below it,
-        only the trigger element is shown, allowing you to toggle the drawer
-        open and closed. To see this in action, click the button below and
-        resize your window.
-      </Body>
-      <Button
-          link='https://8njdkc.csb.app/'
-          marginTop='md'
-          newWindow
-      >
-        Open Doc Example in New Tab
-      </Button>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleSmallDrawer}
+        >
+          {"Will open at small breakpoint"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}
+            breakpoint="sm"
+            onClose={toggleSmallDrawer}
+            opened={smallDrawerOpened}
+            overlay={false}
+            placement={"right"}
+            size={"lg"}
+        >
+          Open because small breakpoint
+        </Drawer>
+      </Flex>
     </>
-  )
-}
+  );
+};
-export default DrawerMenu
+export default DrawerBreakpoints;

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

@@ -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/_drawer_menu.jsx CHANGED Viewed

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener("change", handler)
-    return () => mediaQuery.removeEventListener("change", handler)
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
   }, [])
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint='md'
+          breakpoint="md"
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? "vertical" : "horizontal"}
-            padding={isSmallScreen ? "none" : "sm"}
+            orientation={isSmallScreen ? 'vertical' : 'horizontal'}
+            padding={isSmallScreen ? 'none' : 'sm'}
         >
           <NavItem link='#'
               text='About'

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx CHANGED Viewed

@@ -31,7 +31,6 @@ const DrawerSizes = () => {
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
-          placement='right'
           size='lg'
       >
         This is a Drawer with no overlay

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

@@ -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:
@@ -15,5 +10,4 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders

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

@@ -32,10 +32,10 @@
   <%= 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, validation_message: "Please, select a date.", allow_input: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>

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

@@ -4,7 +4,6 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
-  - form_pill_wrapped: Wrapped Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -14,7 +13,6 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
-  - form_pill_wrapped: Wrapped Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -5,4 +5,3 @@ 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'
 export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
-export { default as FormPillWrapped } from './_form_pill_wrapped.jsx'

data/app/pb_kits/playbook/pb_icon_button/docs/example.yml CHANGED Viewed

@@ -3,7 +3,3 @@ examples:
   rails:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
-  react:
-  - icon_button_default: Default
-  - icon_button_sizes: Sizes

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

@@ -8,7 +8,6 @@ examples:
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_reset: Reset Selection
-  - multi_level_select_disabled: Disabled
   react:
   - multi_level_select_default: Default
@@ -19,4 +18,4 @@ examples:
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_with_children: Checkboxes With Children
   - multi_level_select_with_children_with_radios: Single Select With Children
-  - multi_level_select_disabled: Disabled

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

@@ -6,4 +6,3 @@ export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_sele
 export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
-export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'

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

@@ -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 CHANGED Viewed

@@ -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/example.yml CHANGED Viewed

@@ -16,7 +16,6 @@ examples:
   - radio_alignment: Alignment
   - radio_disabled: Disabled
   - radio_custom_children: Custom Children
-  - radio_react_hook: React Hook Form
   swift:
   - radio_default_swift: Default
@@ -27,4 +26,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 CHANGED Viewed

@@ -4,4 +4,3 @@ 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_select/docs/example.yml CHANGED Viewed

@@ -30,7 +30,6 @@ examples:
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
-  - select_react_hook: React Hook
   swift:
   - select_default_swift: Default

data/app/pb_kits/playbook/pb_select/docs/index.js CHANGED Viewed

@@ -10,4 +10,3 @@ export { default as SelectInline } from './_select_inline.jsx'
 export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
-export { default as SelectReactHook } from './_select_react_hook.jsx'

data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb CHANGED Viewed

@@ -1,9 +1,10 @@
 <%= pb_rails("title", props: {
-    margin_bottom: "md"
 })  do %>
     Default Title
 <% end %>
+<br/>
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx CHANGED Viewed

@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
   return (
     <div>
       <Title
-          marginBottom='md'
           text="Default Title"
           {...props}
       />
+      <br />
       <Title
           size={1}
           tag="h1"

data/app/pb_kits/playbook/pb_title/docs/example.yml CHANGED Viewed

@@ -5,7 +5,6 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
-  - title_display_size: Display Size
   react:
   - title_default: Default UI
@@ -13,4 +12,3 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
-  - title_display_size: Display Size

data/app/pb_kits/playbook/pb_title/docs/index.js CHANGED Viewed

@@ -3,4 +3,3 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
 export { default as TitleResponsive } from './_title_responsive.jsx'
 export { default as TitleTruncate } from './_title_truncate.jsx'
-export { default as TitleDisplaySize } from './_title_display_size.jsx'

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

@@ -2,17 +2,15 @@ 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:
   - tooltip_default_react: Default
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
-  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip

data/app/pb_kits/playbook/pb_tooltip/docs/index.js CHANGED Viewed

@@ -1,7 +1,6 @@
 export { default as TooltipDefaultReact } from './_tooltip_default_react'
 export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
-export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

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

@@ -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