playbook_ui 7.0.1.pre.alpha15 → 7.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 56a4cb93a8661659aaab85d401b6bc2dc35fd48c4f79fdff2be38b38a1da8a49
-  data.tar.gz: d7e29af88a980f946845c64c6585bf1c81bd4a96d8bd8cf3a7c77666b5c1ea1e
+  metadata.gz: a2be1d3b6342ecceb4793c54fc1a73599d4fd10654f050dfb03f3add4bc47cfe
+  data.tar.gz: a7e28a3f8f6f51d3ad4eb4b317f25934de789758b69a8cae3487e9588ba2f477
 SHA512:
-  metadata.gz: 6f3f323a335d3f1a6c440fd791854ddc6ff245d143c836d4d166fa512ca92bec43a02a01c7fbdd77a20059167bce1585300963df94b433d4f0e551530afe31b5
-  data.tar.gz: c3dace91cad070dccb45fe050e51769b9c20510302dd694d88b0b74ffa8a183ca6065b226711086df0de26a9cef72bb3c5fd3ae3e8fe9948a27a24f2d8ebe98c
+  metadata.gz: 5500e6d44e9b25328ea8083f76bade518d1fdef2ea08719b8d4294976a6abaaba54fa70f2979aa475efbd852cd17c32b29343b64d5c31de498072cc5975add16
+  data.tar.gz: ab284d720b728e47237108a52044786a161b1963d59b969ff5e4b0b1eeb419480ac86414b165bc9dea4afdae42d7e2414821cfcbba8366290ef3a4f04493f8cf

data/app/pb_kits/playbook/data/menu.yml

@@ -55,10 +55,9 @@ kits:
     - hashtag
     - pill
   - popover
-  - progress:
-    - progress_pills
-    - progress_simple
-    - progress_step
+  - progress_pills
+  - progress_simple
+  - progress_step
   - section_separator
   - source
   - star_rating

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

@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

data/app/pb_kits/playbook/pb_body/body.rb

@@ -5,7 +5,7 @@ module Playbook
     class Body
       include Playbook::Props
       include ActionView::Helpers
-
+      
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,

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,18 +25,18 @@ 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),
+    buildCss('pb_button_toolbar_kit', orientation, { connected }),
     globalProps(props),
     className
   )

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>