playbook_ui 7.1.1.pre.alpha1 → 7.3.0.pre.alpha2

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -32,10 +32,8 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, { rounded }),
-    globalProps(props),
-    className
-  )
+    buildCss('pb_badge_kit', variant, { rounded: rounded }), className,
+    globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb

@@ -1 +1,12 @@
-<%= react_component('BarGraph', object.chart_options) %>
+<%= content_tag(:div, "",
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) %>
+<% content_for :pb_js do %>
+  <%= javascript_tag do %>
+    window.addEventListener('DOMContentLoaded', function() {
+      new pbChart('.selector', <%= object.chart_options %>)
+    })
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     return (
       <div
-          className={classnames(globalProps(this.props), className)}
+          className={classnames(className, globalProps(this.props))}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }
+        }.to_json.html_safe
       end
 
       def classname

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -82,11 +82,7 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(
-    buttonClassName(props),
-    globalProps(props),
-    className
-  )
+  const css = classnames(buttonClassName(props), className, globalProps(props))
   const loadingIcon = (
     <div className="loading-icon">
       <Icon

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -39,7 +39,6 @@ $pb_button_border_width: 0px;
   flex-basis: auto;
   width: fit-content;
   font-family: $font_family_base;
-  white-space: nowrap;
 
   .loading-icon {
     position: absolute;

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx

@@ -17,7 +17,7 @@ type ButtonToolbarProps = {
   onClick?: EventHandler,
   orientation?: "horizontal" | "vertical",
   text?: string,
- variant?: "primary" | "secondary",
+  variant?: string,
 }
 
 const ButtonToolbar  = (props: ButtonToolbarProps) => {
@@ -25,21 +25,17 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
     aria = {},
     children,
     className,
+    connected = false,
     data = {},
     id,
     orientation = 'horizontal',
     text,
-    variant = 'primary',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(
-    buildCss('pb_button_toolbar_kit', orientation, variant),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_button_toolbar_kit', orientation, { connected: connected }), className, globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -1,101 +1,109 @@
 @import "../pb_button/button";
 @import "../pb_button/button_mixins";
-@import "./button_toolbar_mixins";
-@import "./button_toolbar_dark";
 @import "../tokens/colors";
-@import "../tokens/opacity";
 
 [class^=pb_button_toolbar]{
+    // Orientation =========
+    &[class*=_horizontal]  {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+  
+      & > [class^=pb_button]  {
+        margin-right: $space-xs;
 
-  // Horizontal =============
+        @media (hover:hover) {
+          &:hover {
+            background-color:darken($royal, 20%);
+          }
+        }
 
-  &[class*=_horizontal] {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    & > [class^=pb_button]  {
-      &:not(:last-child){
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-        border-right-width: 0;
-      }
-      &:not(:first-child){
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-        border-left-width: 0;
-      }
-    }
-    &[class*=_primary] {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $primary_border)
-      }  
-    }
-    &[class*=_secondary] {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $secondary_border)
+        &[class*=secondary] {
+          @media (hover:hover) {
+            &:hover {
+              background-color:rgba($primary_action, $opacity_3)
+            }
+          }
+        }
+  
+        &:last-child {
+          margin-right: 0;
+        }
       }
     }
-    & > [class^=pb_button]:not(:first-child):hover::before,
-      [class^=pb_button]:hover + [class^=pb_button]::before {
-        opacity: 0
-      }
-  }
+    &[class*=_vertical]  {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+  
+      & > [class^=pb_button]  {
+        display: block;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: auto;
+        width: 100%;
+        margin-bottom: $space-xs;
 
-  // Vertical =============
+        @media (hover:hover) {
+          &:hover {
+            background-color:darken($royal, 20%);
+          }
+        }
 
-  &[class*=_vertical] {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    & > [class^=pb_button]  {
-      display: block;
-      flex-grow: 1;
-      flex-shrink: 1;
-      flex-basis: auto;
-      width: 100%;
-      &:not(:last-child){
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-width: 0;
-      }
-      &:not(:first-child){
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-        border-top-width: 0;
-      }
-    }
-    &[class*=_primary] {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $primary_border)
-      }
-    }
-    &[class*=_secondary] {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $secondary_border)
+        &[class*=secondary] {
+          @media (hover:hover) {
+            &:hover {
+              background-color:rgba($primary_action, $opacity_3)
+            }
+          }
+        }
+  
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
     }
-    & > [class^=pb_button]:not(:first-child):hover::before,
-    [class^=pb_button]:hover + [class^=pb_button]::before {
-      opacity: 0
-    }
-  }
 
-  // Hover =============
+    // Connect =============
+    &[class*=_connected]  {
+      & > [class^=pb_button]  {
+        margin: 0;
+      }
   
-  & > [class^=pb_button]  {
-    @media (hover:hover) {
-      &:hover {
-        background-color:darken($royal, 20%);
+      &[class*=_horizontal] {
+        & > [class^=pb_button]  {
+          &:not(:last-child){
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            border-right-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+          &:not(:first-child){
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            border-left-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+        }
       }
-    }
-    &[class*=secondary] {
-      @media (hover:hover) {
-        &:hover {
-          background-color:rgba($primary_action, $opacity_3)
+  
+      &[class*=_vertical] {
+        & > [class^=pb_button]  {
+          &:not(:last-child){
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+          &:not(:first-child){
+            border-top-right-radius: 0;
+            border-top-left-radius: 0;
+            border-top-width: 0;
+            border: 1px solid #e1e4e8;
+          }
         }
       }
     }
-  }
-}
+  }

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb

@@ -12,13 +12,11 @@ module Playbook
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[horizontal vertical],
                          default: "horizontal"
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[primary secondary],
-                     default: "primary"
+
       prop :text
 
       def classname
-        generate_classname("pb_button_toolbar_kit", orientation, variant)
+        generate_classname("pb_button_toolbar_kit", orientation, connected_class)
       end
 
     private

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb

@@ -1,17 +1,7 @@
-<div class="pb--doc-demo-row">
-
-  <%= pb_rails("button_toolbar", props: { orientation: "vertical" }) do %>
-    <%= pb_rails("button", props: { text: "Create" }) %>
-    <%= pb_rails("button", props: { text: "Edit"}) %>
-    <%= pb_rails("button", props: { text: "Copy"}) %>
-    <%= pb_rails("button", props: { text: "Cut"}) %>
-  <% end %>
-
-  <%= pb_rails("button_toolbar", props: { orientation: "horizontal" }) do %>
-    <%= pb_rails("button", props: { text: "Create" }) %>
-    <%= pb_rails("button", props: { text: "Edit" }) %>
-    <%= pb_rails("button", props: { text: "Copy" }) %>
-    <%= pb_rails("button", props: { text: "Cut" }) %>
-  <% end %>
-
-</div>
+<%= pb_rails("button_toolbar", props: { orientation: "horizontal", connected: true }) do %>
+  <%= pb_rails("button", props: { text: "Field" }) %>
+  <%= pb_rails("button", props: { text: "Retail"}) %>
+  <%= pb_rails("button", props: { text: "Event"}) %>
+  <%= pb_rails("button", props: { text: "Training"}) %>
+  <%= pb_rails("button", props: { text: "Not Working"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx

@@ -1,49 +1,26 @@
 import React from 'react'
 import { Button, ButtonToolbar } from '../..'
 
-const ButtonToolbarDefault = (props) => (
-  <div className="pb--doc-demo-row">
+const ButtonToolbarDefault = () => (
+  <div>
     <ButtonToolbar
-        {...props}
-        orientation="vertical"
+        connected
+        orientation="horizontal"
     >
       <Button
-          {...props}
-          text="Create"
-      />
-      <Button
-          {...props}
-          text="Edit"
-      />
-      <Button
-          {...props}
-          text="Copy"
-      />
-      <Button
-          {...props}
-          text="Cut"
+          text="Field"
       />
-    </ButtonToolbar>
-
-    <ButtonToolbar
-        {...props}
-        orientation="horizontal"
-    >
       <Button
-          {...props}
-          text="Create"
+          text="Retail"
       />
       <Button
-          {...props}
-          text="Edit"
+          text="Event"
       />
       <Button
-          {...props}
-          text="Copy"
+          text="Training"
       />
       <Button
-          {...props}
-          text="Cut"
+          text="Not Working"
       />
     </ButtonToolbar>
   </div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb

@@ -1,18 +1,7 @@
-
-<div class="pb--doc-demo-row">
-
-  <%= pb_rails("button_toolbar", props: { orientation: "vertical", variant: "secondary" }) do %>
-    <%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
-    <%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
-    <%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
-    <%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
-  <% end %>
-
-  <%= pb_rails("button_toolbar", props: { orientation: "horizontal", variant: "secondary" }) do %>
-    <%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
-    <%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
-    <%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
-    <%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
-  <% end %>
-
-</div>
+<%= pb_rails("button_toolbar", props: { orientation: "horizontal", connected: true }) do %>
+    <%= pb_rails("button", props: { text: "Field", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Retail", variant: "secondary"}) %>
+    <%= pb_rails("button", props: { text: "Event", variant: "secondary"}) %>
+    <%= pb_rails("button", props: { text: "Training", variant: "secondary"}) %>
+    <%= pb_rails("button", props: { text: "Not Working", variant: "secondary"}) %>
+  <% end %>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx

@@ -1,58 +1,30 @@
 import React from 'react'
 import { Button, ButtonToolbar } from '../..'
 
-const ButtonToolbarSecondary = (props) => (
-  <div className="pb--doc-demo-row">
+const ButtonToolbarSecondary = () => (
+  <div>
     <ButtonToolbar
-        {...props}
-        orientation="vertical"
-        variant="secondary"
+        connected
+        orientation="horizontal"
     >
       <Button
-          {...props}
-          text="Create"
-          variant="secondary"
-      />
-      <Button
-          {...props}
-          text="Edit"
+          text="Field"
           variant="secondary"
       />
       <Button
-          {...props}
-          text="Copy"
-          variant="secondary"
-      />
-      <Button
-          {...props}
-          text="Cut"
-          variant="secondary"
-      />
-    </ButtonToolbar>
-
-    <ButtonToolbar
-        {...props}
-        orientation="horizontal"
-        variant="secondary"
-    >
-      <Button
-          {...props}
-          text="Create"
+          text="Retail"
           variant="secondary"
       />
       <Button
-          {...props}
-          text="Edit"
+          text="Event"
           variant="secondary"
       />
       <Button
-          {...props}
-          text="Copy"
+          text="Training"
           variant="secondary"
       />
       <Button
-          {...props}
-          text="Cut"
+          text="Not Working"
           variant="secondary"
       />
     </ButtonToolbar>