playbook_ui 8.1.0 → 8.2.0.pre.alpha3

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

@@ -0,0 +1,10 @@
+examples:
+
+  rails:
+
+  react:
+  - dialog_default: Simple
+  - dialog_compound_components: Complex
+  - dialog_sizes: Sizes
+  - dialog_scrollable: Scrollable
+  - dialog_should_close_on_overlay: Overlay Click

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

@@ -0,0 +1,6 @@
+export { default as DialogDefault } from './_dialog_default.jsx'
+export { default as DialogCompoundComponents } from './_dialog_compound_components.jsx'
+export { default as DialogSizes } from './_dialog_sizes.jsx'
+export { default as DialogScrollable } from './_dialog_scrollable.jsx'
+export { default as DialogSeparators } from './_dialog_separators.jsx'
+export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'

data/app/pb_kits/playbook/pb_form/_form.scss

@@ -1,8 +1,12 @@
 .pb-form {
   .pb-form-actions {
     list-style: none;
-    margin: 8px;
+    margin: 0;
     padding: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-direction: row;
 
     > li {
       display: inline-flex;

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

@@ -14,7 +14,7 @@
 %>
 
 <%= pb_rails("form/form_with", props: {
-    scope: :example, method: :get, url: "",
+    options: { scope: :example, method: :get, url: "" },
     validate: true
   }) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -19,9 +19,11 @@ module Playbook
         prepend(CollectionSelectField)
         prepend(CheckboxField)
         prepend(DatePickerField)
+      end
 
-        def actions(&block)
-          @template.render_component ActionArea.new(submit_default_value: submit_default_value, children: block)
+      def actions
+        @template.send(:view_context).content_tag :ol, class: "pb-form-actions" do
+          yield ActionArea.new(@template, submit_default_value)
         end
       end
     end

data/app/pb_kits/playbook/pb_form/form_builder/action_area.rb

@@ -3,22 +3,29 @@
 module Playbook
   module PbForm
     module FormBuilder
-      class ActionArea < Playbook::KitBase
-        prop :submit_default_value, type: Playbook::Props::String
+      class ActionArea
+        def initialize(view_context, submit_default_value)
+          self.view_context = view_context
+          self.submit_default_value = submit_default_value
+        end
 
         def submit(value = nil, props: {})
           props[:type] ||= "submit"
+          props[:text] ||= value || submit_default_value
+
           button(value, props: props)
         end
 
         def button(value = nil, props:)
-          props[:text] ||= value || submit_default_value
-
-          content_tag(:li) do
-            pb_rails("button", props: props)
+          view_context.content_tag(:li) do
+            view_context.pb_rails("button", props: props)
           end
         end
+
+      private
+
+        attr_accessor :view_context, :submit_default_value
       end
     end
   end
-end
+end

data/app/pb_kits/playbook/pb_form/form_with.rb

@@ -16,7 +16,6 @@ module Playbook
 
       def form_options
         {
-          url: "",
           id: id,
           aria: aria,
           class: classname,

data/app/pb_kits/playbook/pb_form/simple_form.html.erb

@@ -1,6 +1,4 @@
-<%= simple_form_for model, options do |form| %>
-  <% instance_exec form, &children %>
-<% end %>
+<%= simple_form_for model, options, &method(:render_form) %>
 
 <% if validate %>
   <% content_for :pb_js do %>
@@ -10,4 +8,4 @@
       })
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/simple_form.rb

@@ -48,6 +48,10 @@ module Playbook
         prop(:options).fetch(:html, {})
       end
 
+      def render_form(builder)
+        view_context.capture(builder, &children)
+      end
+
       def render_in(view_context, &_block)
         super(view_context, &nil)
       end

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -23,6 +23,8 @@ const OnlineStatus = (props: OnlineStatusProps) => {
     status = 'offline',
   } = props
 
+  aria.label = status
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
-    aria: object.aria,
+    aria: object.aria.merge!(label: object.status),
     class: object.classname,
     data: object.data,
     id: object.id) do %>

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -23,7 +23,7 @@ const UserBadge = (props: UserBadgeProps) => {
     size = 'md',
   } = props
 
-  const image = require(`./badges/_${badge}.svg`)
+  const image = require(`./badges/${badge}.svg`)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,7 +1,7 @@
 import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
-import colors from '../tokens/_colors.scss'
+import colors from '../tokens/exports/_colors.scss'
 
 require('highcharts/modules/variable-pie')(Highcharts)
 import highchartsMore from 'highcharts/highcharts-more.js'

data/app/pb_kits/playbook/react_rails_kits.js

@@ -5,4 +5,8 @@ export { default as Legend } from './pb_legend/_legend.jsx'
 export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
 export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
 export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'
+export { default as Dialog } from './pb_dialog/_dialog.jsx'
+export { default as DialogHeader } from './pb_dialog/child_kits/_dialog_header.jsx'
+export { default as DialogBody } from './pb_dialog/child_kits/_dialog_body.jsx'
+export { default as DialogFooter } from './pb_dialog/child_kits/_dialog_footer.jsx'
 export { KitSearch, SnippetToggle, DarkModeToggle } from './docs_components'

data/app/pb_kits/playbook/tokens/_border_radius.scss

@@ -32,13 +32,3 @@ $border_radius: (
   border_radius_none:    $border_radius_none,
   border_radius_rounded: $border_radius_rounded
 );
-
-
-:export {
-  @mixin export_border_radius($border_radius_list) {
-    @each $name, $size in $border_radius_list {
-      #{$name}: $size;
-    }
-  }
-  @include export_border_radius($border_radius);
-}

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -250,28 +250,3 @@ $transparent: transparent;
   background: linear-gradient(135deg,  $start 0%, $end 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}', endColorstr='#{$end}', GradientType=1);
 }
-
-:export {
-  @mixin export-colors($colors-list) {
-    @each $name, $color in $colors-list {
-      #{$name}: $color;
-    }
-  }
-  @include export-colors($product_colors);
-  @include export-colors($status_colors);
-  @include export-colors($data_colors);
-  @include export-colors($shadow_colors);
-  @include export-colors($colors);
-  @include export-colors($interface_colors);
-  @include export-colors($main_colors);
-  @include export-colors($background_colors);
-  @include export-colors($card_colors);
-  @include export-colors($active_colors);
-  @include export-colors($action_colors);
-  @include export-colors($hover_colors);
-  @include export-colors($border_colors);
-  @include export-colors($text_colors);
-  @include export-colors($category_colors);
-  gradient_start: $gradient_start;
-  gradient_end: $gradient_end;
-}

data/app/pb_kits/playbook/tokens/_line_height.scss

@@ -14,12 +14,3 @@ $line_height: (
   looser: $lh_looser,
   loosest: $lh_loosest
 );
-
-:export {
-  @mixin export_line_height($line_height_list) {
-    @each $name, $settings in $line_height_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_line_height($line_height);
-}

data/app/pb_kits/playbook/tokens/_opacity.scss

@@ -19,12 +19,3 @@ $opacity: (
   opacity_8: $opacity_8,
   opacity_9: $opacity_9,
 );
-
-:export {
-  @mixin export_opacity($opacity_list) {
-    @each $name, $settings in $opacity_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_opacity($opacity);
-}

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -34,12 +34,3 @@ $offscreen: -9999px;
   }
   @return map-get($z_layers, $layer);
 }
-
-:export {
-  @mixin export_z_index($z_index_list) {
-    @each $name, $settings in $z_index_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_z_index($z_index);
-}

data/app/pb_kits/playbook/tokens/_screen_sizes.scss

@@ -28,12 +28,3 @@ $breakpoints: (
     @content;
   }
 }
-
-:export {
-  @mixin export_breakpoints($breakpoints_list) {
-    @each $name, $settings in $breakpoints_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_breakpoints($breakpoints);
-}

data/app/pb_kits/playbook/tokens/_shadows.scss

@@ -11,12 +11,3 @@ $box_shadows: (
   shadow_deeper: $shadow_deeper,
   shadow_deepest: $shadow_deepest
 );
-
-:export {
-  @mixin export_shadows($shadows_list) {
-    @each $name, $settings in $shadows_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_shadows($box_shadows);
-}

data/app/pb_kits/playbook/tokens/_spacing.scss

@@ -11,13 +11,3 @@ $spaces:(
   space_xl:   $space_xl,
   none: 0
 );
-
-
-:export {
-  @mixin export_spacing($spacing_list) {
-    @each $name, $size in $spacing_list {
-      #{$name}: $size;
-    }
-  }
-  @include export_spacing($spaces);
-}

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -62,28 +62,3 @@ $boldest:       800;
 $bolder:        700;
 $light:         300;
 $lighter:       100;
-
-
-
-:export {
-  font_family_base: $font_family_base;
-  text_jumbo: $text_jumbo;
-  text_largest: $text_largest;
-  text_larger: $text_larger;
-  text_large: $text_large;
-  text_base: $text_base;
-  text_default: $text_default;
-  text_normal: $text_normal;
-  text_medium: $text_medium;
-  text_small: $text_small;
-  text_smaller: $text_smaller;
-  text_smallest: $text_smallest;
-  heading_1: $heading_1;
-  heading_2: $heading_2;
-  heading_3: $heading_3;
-  heading_4: $heading_4;
-  lighter: $lighter;
-  light: $light;
-  bold: $bold;
-  regular: $regular;
-}

data/app/pb_kits/playbook/tokens/exports/_border_radius.scss

@@ -0,0 +1,10 @@
+@import "../border_radius";
+
+:export {
+  @mixin export_border_radius($border_radius_list) {
+    @each $name, $size in $border_radius_list {
+      #{$name}: $size;
+    }
+  }
+  @include export_border_radius($border_radius);
+}

data/app/pb_kits/playbook/tokens/exports/_colors.scss

@@ -0,0 +1,26 @@
+@import "../colors";
+
+:export {
+  @mixin export-colors($colors-list) {
+    @each $name, $color in $colors-list {
+      #{$name}: $color;
+    }
+  }
+  @include export-colors($product_colors);
+  @include export-colors($status_colors);
+  @include export-colors($data_colors);
+  @include export-colors($shadow_colors);
+  @include export-colors($colors);
+  @include export-colors($interface_colors);
+  @include export-colors($main_colors);
+  @include export-colors($background_colors);
+  @include export-colors($card_colors);
+  @include export-colors($active_colors);
+  @include export-colors($action_colors);
+  @include export-colors($hover_colors);
+  @include export-colors($border_colors);
+  @include export-colors($text_colors);
+  @include export-colors($category_colors);
+  gradient_start: $gradient_start;
+  gradient_end: $gradient_end;
+}

data/app/pb_kits/playbook/tokens/exports/_line_height.scss

@@ -0,0 +1,10 @@
+@import "../line_height";
+
+:export {
+  @mixin export_line_height($line_height_list) {
+    @each $name, $settings in $line_height_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_line_height($line_height);
+}

data/app/pb_kits/playbook/tokens/exports/_opacity.scss

@@ -0,0 +1,10 @@
+@import "../opacity";
+
+:export {
+  @mixin export_opacity($opacity_list) {
+    @each $name, $settings in $opacity_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_opacity($opacity);
+}

data/app/pb_kits/playbook/tokens/exports/_positioning.scss

@@ -0,0 +1,10 @@
+@import "../positioning";
+
+:export {
+  @mixin export_z_index($z_index_list) {
+    @each $name, $settings in $z_index_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_z_index($z_index);
+}

data/app/pb_kits/playbook/tokens/exports/_screen_sizes.scss

@@ -0,0 +1,10 @@
+@import "../screen_sizes";
+
+:export {
+  @mixin export_breakpoints($breakpoints_list) {
+    @each $name, $settings in $breakpoints_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_breakpoints($breakpoints);
+}

data/app/pb_kits/playbook/tokens/exports/_shadows.scss

@@ -0,0 +1,10 @@
+@import "../shadows";
+
+:export {
+  @mixin export_shadows($shadows_list) {
+    @each $name, $settings in $shadows_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_shadows($box_shadows);
+}