playbook_ui 13.25.0 → 13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840

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

@@ -0,0 +1,13 @@
+<%= pb_rails("loading_inline", props: {
+    text: "Saving"
+}) %> 
+
+<%= pb_rails("loading_inline", props: {
+    align: "center",
+    text: "Saving"
+}) %> 
+
+<%= pb_rails("loading_inline", props: {
+    align: "right",
+    text: "Saving",
+}) %>

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

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import LoadingInline from '../_loading_inline'
+
+const LoadingInlineCustom = (props) => {
+  return (
+    <div>
+      <LoadingInline
+          text=' Saving'
+          {...props}
+      />
+      <LoadingInline
+          align="center"
+          text=' Saving'      
+          {...props}
+      />
+      <LoadingInline
+          align="right"
+          text=' Saving'
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineCustom

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb}

@@ -1,9 +1,9 @@
 <%= pb_rails("loading_inline") %>
 
 <%= pb_rails("loading_inline", props: {
-	align: "center"
+    align: "center"
 }) %>
 
 <%= pb_rails("loading_inline", props: {
-	align: "right"
+    align: "right"
 }) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import LoadingInline from '../_loading_inline'
 
-const LoadingInlineLight = (props) => {
+const LoadingInlineDefault = (props) => {
   return (
     <div>
       <LoadingInline
@@ -20,4 +20,4 @@ const LoadingInlineLight = (props) => {
   )
 }
 
-export default LoadingInlineLight
+export default LoadingInlineDefault

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

@@ -1,9 +1,11 @@
 examples:
   
   rails:
-  - loading_inline_light: Light
+  - loading_inline_default: Default
+  - loading_inline_custom: Custom Text
 
   
   
   react:
-  - loading_inline_light: Default
+  - loading_inline_default: Default
+  - loading_inline_custom: Custom Text

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

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

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -5,6 +5,6 @@
     **combined_html_options) do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -7,6 +7,7 @@ module Playbook
                    values: %w[left center right],
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :text, type: Playbook::Props::String, default: "Loading"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js

@@ -39,3 +39,17 @@ test('should render aria-label', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', testId)
 })
+
+
+test('displays custom text content', () => {
+    render(
+        <LoadingInline
+            aria={{ label: testId }}
+            data={{ testid: testId }}
+            text=' Saving'
+        />
+    )
+  
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('Saving')
+})

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("flex") do %>
+ <%= pb_rails("progress_simple", props: { flex: "1", percent: 50 }) %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Flex, ProgressSimple } from '../..'
+
+const ProgressSimpleFlex = () => {
+  return (
+    <Flex>
+      <ProgressSimple
+          align="left"
+          flex="1"
+          percent={68}
+      />
+    </Flex>
+  )
+}
+
+export default ProgressSimpleFlex

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md

@@ -0,0 +1 @@
+When rendering a Progress Simple through within a Flex container, you must pass `flex="1"` to the kit itself so that it fills the available space

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
+  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted
@@ -12,6 +13,7 @@ examples:
   react:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
+  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted

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

@@ -2,6 +2,7 @@ export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
 export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
 export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
 export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
+export { default as ProgressSimpleFlex } from './_progress_simple_flex.jsx'
 export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
 export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
 

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -48,7 +48,7 @@ module Playbook
       end
 
       def wrapper_classname
-        "pb_progress_simple_wrapper_#{align}"
+        generate_classname("pb_progress_simple_wrapper_#{align}")
       end
 
       def classname

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -40,6 +40,23 @@
         border: 6px solid $primary;
       }
     }
+
+    &:disabled + .pb_radio_button {
+      cursor: not-allowed;
+      background-color: mix($charcoal, $white, 5%);
+      border-color: $border_light;
+
+      & ~ .pb_body_kit {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+    }
+
+    &:disabled:checked + .pb_radio_button{
+      cursor: not-allowed;
+      background-color: $white;
+      border: 6px solid $neutral;
+    }
   }
 
   &[class*=vertical] {
@@ -66,6 +83,24 @@
           border: 6px solid $primary;
         }
       }
+
+      &:disabled + .pb_radio_button {
+        cursor: not-allowed;
+        background-color: mix($charcoal, $white, 80%);
+        border: 2px solid $border_dark;
+
+        & ~ .pb_body_kit {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+      }
+
+      &:disabled:checked {
+        & ~ .pb_radio_button {
+          background-color: mix($charcoal, $white, 80%);
+          border: 6px solid $border_dark;
+        }
+      }
     }
 
     @media (hover:hover) {

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -14,6 +14,7 @@ type RadioProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  disabled?: boolean,
   error?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -31,6 +32,7 @@ const Radio = ({
   className,
   dark = false,
   data = {},
+  disabled = false,
   error = false,
   htmlOptions = {},
   id,
@@ -56,6 +58,7 @@ const Radio = ({
     else
     return (
     <input
+        disabled={disabled}
         id={id}
         name={name}
         onChange={onChange}

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Flex, Radio } from '../../'
 
-const RadioAlignment = () => {
+const RadioAlignment = (props) => {
   return (
     <Flex>
       <Radio
@@ -11,6 +11,7 @@ const RadioAlignment = () => {
           name="Group2"
           tabIndex={0}
           value="Power"
+          {...props}
       />
       <br />
       <Radio
@@ -20,6 +21,7 @@ const RadioAlignment = () => {
           marginRight="sm"
           name="Group2"
           value="Nitro"
+          {...props}
       />
       <br />
       <Radio
@@ -28,6 +30,7 @@ const RadioAlignment = () => {
           label="Google"
           name="Group2"
           value="Google"
+          {...props}
       />
     </Flex>
   )

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

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Radio from '../_radio'
 
-const RadioDefault = () => {
+const RadioDefault = (props) => {
   const ref = React.createRef()
 
   return (
@@ -13,6 +13,7 @@ const RadioDefault = () => {
           ref={ref}
           tabIndex={0}
           value="Power"
+          {...props}
       />
       <br />
       <Radio
@@ -20,6 +21,7 @@ const RadioDefault = () => {
           label="Nitro"
           name="Group2"
           value="Nitro"
+          {...props}
       />
       <br />
       <Radio
@@ -27,6 +29,7 @@ const RadioDefault = () => {
           label="Google"
           name="Group2"
           value="Google"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("radio", props: {
+            text: "Disabled unselected",
+            input_options: {
+                tabindex: 0,
+                disabled: true,
+            },
+            margin_bottom: "xs",
+            name: "DisabledGroup",
+            value: "Disabled unselected",
+        }) %>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("radio", props: {
+            text: "Disabled selected",
+            input_options: {
+                tabindex: 0,
+                disabled: true,
+            },
+            checked: true,
+            name: "DisabledGroup",
+            value: "Disabled selected"
+        }) %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Radio from '../_radio'
+
+const RadioDisabled = (props) => {
+  const ref = React.createRef()
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+        <Radio 
+            disabled
+            label="Disabled unselected"
+            marginBottom="xs"
+            name="DisabledGroup"
+            ref={ref}
+            tabIndex={0}
+            value="Disabled unselected"
+            {...props}
+        />
+        <Radio
+            checked 
+            disabled
+            label="Disabled selected"
+            name="DisabledGroup"
+            value="Disabled selected"
+            {...props}
+        />
+    </div>
+  )
+}
+export default RadioDisabled

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Radio } from '../..'
 
-const RadioError = () => {
+const RadioError = (props) => {
   return (
     <div>
       <Radio
@@ -9,6 +9,7 @@ const RadioError = () => {
           label="Power"
           name="Group2"
           value="Power"
+          {...props}
       />
     </div>
   )

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

@@ -6,12 +6,14 @@ examples:
   - radio_error: With Error
   - radio_options: With Options
   - radio_alignment: Alignment
+  - radio_disabled: Disabled
 
   react:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
   - radio_alignment: Alignment
+  - radio_disabled: Disabled
 
   swift:
   - radio_default_swift: Default

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

@@ -2,3 +2,4 @@ export { default as RadioDefault } from './_radio_default.jsx'
 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'

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -11,6 +11,7 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
+      prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :name, type: Playbook::Props::String,
@@ -32,6 +33,10 @@ module Playbook
         error ? "negative" : nil
       end
 
+      def input
+        radio_button_tag(name, value, checked, input_options.merge(disabled: disabled))
+      end
+
     private
 
       def error_class

data/app/pb_kits/playbook/pb_radio/radio.test.js

@@ -69,3 +69,20 @@ test('returns dark + error class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
+
+test('has disabled attribute', () => {
+  render(
+    <Radio
+        data={{ testid: testId }}
+        disabled
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('input')
+  expect(input).toHaveAttribute('disabled')
+})
+

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -47,8 +47,7 @@ $section_colors_dark: (
 
   &[class*=_dashed] {
     &::before, &::after {
-      border: 1px dashed $border_light;
-      background: none;
+      @include section_separator_dashed(false);
     }
   }
 
@@ -66,5 +65,10 @@ $section_colors_dark: (
         @include section_separator_vertical(true);
       }
     }
+    &[class*=_dashed] {
+      &::before, &::after {
+        @include section_separator_dashed(true);
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss

@@ -9,7 +9,7 @@
     }
     content: "";
     height: 100%;
-    width: 1px;
+    width: 1.9px;
     position: initial;
     z-index: 0;
 }
@@ -21,3 +21,13 @@
         background: $border_dark;
     }
 }
+
+@mixin section_separator_dashed($dark: false) {
+    @if $dark == false {
+        border: 1px dashed $border_light;
+        background: none;
+    } @else {
+        border: 1px dashed $border_dark;
+        background: none;
+    }
+}

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -127,7 +127,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
             }
           }}
           role="tooltip_trigger"
-          style={{ display: "inline-flex" }}
+          style={{ display: "inline-block" }}
           {...ariaProps}
           {...dataProps}
           {...htmlProps}

data/app/pb_kits/playbook/playbook-rails.js

@@ -33,6 +33,12 @@ PbTable.start()
 import PbTextarea from './pb_textarea'
 PbTextarea.start()
 
+import PbDropdown from './pb_dropdown'
+PbDropdown.start()
+
+import PbAdvancedTable from './pb_advanced_table'
+PbAdvancedTable.start()
+
 import 'flatpickr'
 
 // React-Rendered Rails Kits =====

data/dist/menu.yml

@@ -53,7 +53,7 @@ kits:
         description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. 
         status: "stable"
       - name: "advanced_table"
-        platforms: *react_only
+        platforms: *web
         description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
         status: "stable" 
       - name: "list"