playbook_ui 7.0.1 → 7.1.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a2be1d3b6342ecceb4793c54fc1a73599d4fd10654f050dfb03f3add4bc47cfe
-  data.tar.gz: a7e28a3f8f6f51d3ad4eb4b317f25934de789758b69a8cae3487e9588ba2f477
+  metadata.gz: a644ad03dc97f41965fc81a6eb5bbff2aa79a546b50bc6fb6bac8f08eef363d1
+  data.tar.gz: 0fe1ca166f29f9f46a805d29744dfe5d385ba04d6eadc77773416b2d374ae99d
 SHA512:
-  metadata.gz: 5500e6d44e9b25328ea8083f76bade518d1fdef2ea08719b8d4294976a6abaaba54fa70f2979aa475efbd852cd17c32b29343b64d5c31de498072cc5975add16
-  data.tar.gz: ab284d720b728e47237108a52044786a161b1963d59b969ff5e4b0b1eeb419480ac86414b165bc9dea4afdae42d7e2414821cfcbba8366290ef3a4f04493f8cf
+  metadata.gz: f03035f54a4e33a6d87e3a011a56890ba0a1fc8f1e90f737e0735bdc3d301603b4de296dd43371870a07f0ad27628d3a3f82f9de7ae6ee9dc2689203a1ef6896
+  data.tar.gz: 80322b2825772cce53dfb4065d2dac261f9072aaec897d048d98b28ca2567de356c834b8fed975c66282168e0d3037ebd36665b7e4870f0314e95e19434e6833

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

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

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

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

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

@@ -39,6 +39,7 @@ $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?: string,
+ variant?: "primary" | "secondary",
 }
 
 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, { connected }),
+    buildCss('pb_button_toolbar_kit', orientation, variant),
     globalProps(props),
     className
   )

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

@@ -1,109 +1,101 @@
 @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;
 
-        @media (hover:hover) {
-          &:hover {
-            background-color:darken($royal, 20%);
-          }
-        }
+  // Horizontal =============
 
-        &[class*=secondary] {
-          @media (hover:hover) {
-            &:hover {
-              background-color:rgba($primary_action, $opacity_3)
-            }
-          }
-        }
-  
-        &:last-child {
-          margin-right: 0;
-        }
+  &[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*=_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;
+    &[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^=pb_button]:not(:first-child):hover::before,
+      [class^=pb_button]:hover + [class^=pb_button]::before {
+        opacity: 0
+      }
+  }
 
-        @media (hover:hover) {
-          &:hover {
-            background-color:darken($royal, 20%);
-          }
-        }
+  // Vertical =============
 
-        &[class*=secondary] {
-          @media (hover:hover) {
-            &:hover {
-              background-color:rgba($primary_action, $opacity_3)
-            }
-          }
-        }
-  
-        &:last-child {
-          margin-bottom: 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%;
+      &: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;
       }
     }
-
-    // Connect =============
-    &[class*=_connected]  {
-      & > [class^=pb_button]  {
-        margin: 0;
+    &[class*=_primary] {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $primary_border)
       }
-  
-      &[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] {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $secondary_border)
       }
+    }
+    & > [class^=pb_button]:not(:first-child):hover::before,
+    [class^=pb_button]:hover + [class^=pb_button]::before {
+      opacity: 0
+    }
+  }
+
+  // Hover =============
   
-      &[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;
-          }
+  & > [class^=pb_button]  {
+    @media (hover:hover) {
+      &:hover {
+        background-color:darken($royal, 20%);
+      }
+    }
+    &[class*=secondary] {
+      @media (hover:hover) {
+        &:hover {
+          background-color:rgba($primary_action, $opacity_3)
         }
       }
     }
-  }
+  }
+}

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

@@ -0,0 +1,57 @@
+@import "./button_toolbar_mixins";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+
+[class^=pb_button_toolbar]{
+
+  // Vertical =============
+
+  &[class*=_vertical] {
+    &[class*=_primary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $primary_dark)
+      }
+    }
+    &[class*=_secondary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $secondary_dark)
+      }
+    }
+  }
+
+  // Horizontal =============
+
+  &[class*=_horizontal] {
+    &[class*=_primary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(false, $primary_dark)
+      }
+    }
+    &[class*=_secondary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(false, $secondary_dark)
+      }
+    }
+  }
+  & > [class^=pb_button]:not(:first-child):hover::before,
+  [class^=pb_button]:hover + [class^=pb_button]::before {
+    opacity: 0
+  }
+
+  // Hover =============
+
+  [class^=pb_button].dark  {
+    @media (hover:hover) {
+      &:hover {
+        background-color:darken($royal, 20%);
+      }
+    }
+    &[class*=secondary] {
+      @media (hover:hover) {
+        &:hover {
+          background-color:rgba($primary_action, $opacity_3)
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+
+$primary_border:      rgba($white, $opacity_1);
+$secondary_border:    rgba($white, $opacity_10);
+$primary_dark:        rgba($bg_dark, $opacity_2);
+$secondary_dark:      rgba($bg_dark, $opacity_2);
+
+@mixin toolbar_border($horizontal: true, $color: $color) {
+    @if $horizontal == true {
+        height: 2px;
+        width: calc(100% + #{$space_md} + #{$space_md});
+        top: calc(-#{$space_xs} - 1px);
+        left: -$space_md;
+    } @else {
+        width: 2px;
+        height: $space_md;
+        top: 0;
+        right: calc(#{$space_lg} + 2px);
+    }
+    background-color: $color;
+    content: '';
+    position: relative;
+    bottom: 0;
+    display: block;
+}

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

@@ -12,11 +12,13 @@ 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, connected_class)
+        generate_classname("pb_button_toolbar_kit", orientation, variant)
       end
 
     private

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

@@ -1,7 +1,17 @@
-<%= 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 %>
+<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>

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

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