playbook_ui 14.10.0.pre.alpha.play1465attempt25272 → 14.10.0.pre.alpha.play1662cssbargraph5193

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -16,10 +16,8 @@ module Playbook
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname(column)
-        classes = %w[id-cell chrome-styles]
-        classes << "last-cell" if column[:is_last_in_group]
-        classes.join(" ")
+      def td_classname
+        generate_classname("id-cell", "chrome-styles", separator: " ")
       end
 
       def depth_accessors
@@ -31,8 +29,6 @@ module Playbook
     private
 
       def custom_renderer_value(column, index)
-        return nil unless column[:accessor].present?
-
         if index.zero?
           if depth.zero?
             row[column[:accessor].to_sym]
@@ -41,7 +37,6 @@ module Playbook
               key = item.to_sym
               return row[key] if depth - 1 == accessor_index
             end
-            nil
           end
         else
           row[column[:accessor].to_sym]

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -1,6 +1,10 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { classname: object.td_classname}) do %>
+            <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -21,14 +21,6 @@
     border-width: 0px;
   }
 
-  @function ends-with($string, $suffix) {
-    $suffix-length: str-length($suffix);
-    @if $suffix-length == 0 {
-      @return true;
-    }
-    @return str-slice($string, -$suffix-length) == $suffix;
-  }
-
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;
@@ -38,19 +30,9 @@
     border: 0;
     border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
     @each $color_name, $color_value in $pb_card_header_colors {
-      @if not ends-with($color_name, '_subtle') {
-        &[class*="_#{$color_name}"] {
-          @include pb_card_header_color($color_value);
-          color: lightenText($color_value);
-        }
-      }
-    }
-    @each $color_name, $color_value in $pb_card_header_colors {
-      @if ends-with($color_name, '_subtle') {
-        &[class*="_#{$color_name}"] {
-          @include pb_card_header_color($color_value);
-          color: lightenText($color_value);
-        }
+      &[class*=_#{"" + $color_name}] {
+        @include pb_card_header_color($color_value);
+        color: lightenText($color_value);
       }
     }
     @each $color_name, $color_value in $pb_card_header_colors {

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -88,21 +88,3 @@
     Body
   <% end %>
 <% end %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
-    <%= pb_rails("body", props: { text: "Success Subtle" }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
-    <%= pb_rails("body", props: { text: "Error Subtle"}) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -231,46 +231,6 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
-
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="success_subtle"
-                >
-                    <Body
-                        text="Success Subtle"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="error_subtle"
-                >
-                    <Body
-                        text="Error Subtle"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_dashboard/BarGraphStyles.scss

@@ -0,0 +1,53 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import url("https://code.highcharts.com/css/highcharts.css");
+// @import "highcharts/css/highcharts";
+// @import "highcharts/highcharts.css";
+
+:root {
+    --highcharts-color-0: #{$data_1};
+    --highcharts-color-1: #{$data_2};
+    --highcharts-color-2: #{$data_3};
+    --highcharts-color-3: #{$data_4};
+    --highcharts-color-4: #{$data_5};
+    --highcharts-color-5: #{$data_6};
+    --highcharts-color-6: #{$data_7};
+    --highcharts-color-7: #{$data_8};
+}
+
+.highcharts-title {
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $heading_3;
+    color: $text_lt_default;
+    fill: $text_lt_default;
+}
+
+.highcharts-subtitle {
+    font-family: $font_family_base;
+    color: $text_lt_light;
+    fill: $text_lt_light;
+    font-weight: $regular;
+    font-size: $text_base;
+}
+
+.highcharts-yaxis > .highcharts-axis-title {
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-axis-labels {
+    font-family: $font_family_base;
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-grid-line {
+    stroke: $border_light;
+}
+

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -14,6 +14,16 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
+@mixin svg_size($name, $match, $adjust) {
+  @if $name == $match {
+    $svg_xy: $adjust;
+    & > svg {
+      width: #{$svg_xy};
+      height: #{$svg_xy};
+    }
+  }
+}
+
 [class^=pb_icon_circle_kit] {
   display: flex;
   justify-content: center;
@@ -47,11 +57,13 @@ $pb_icon_circle_sizes: (
       border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
-      font-size: if($name == "xxs", $size - 6px, $size * 0.38);
+      font-size: $size * 0.38;
       line-height: $size;
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
+
+      @include svg_size($name, "xxs", $size - 6px);
     }
   }
 

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

@@ -3,11 +3,6 @@
 @import "../tokens/opacity";
 @import "./section_separator_mixin";
 
-$merge_kits1: map-merge($status_colors, $category_colors);
-$merge_kits2: map-merge($merge_kits1, $product_colors);
-$merge_kits3: map-merge($merge_kits2, $text_colors);
-$section_selector_colors: map-merge($merge_kits3, $data_colors);
-
 $section_colors_light: (
   background:   $bg_light,
   card:         $card_light,
@@ -24,11 +19,8 @@ $section_colors_dark: (
   align-items: center;
   position: relative;
   span {
-    padding: 0;
+    padding: 0 $space_xs;
     display: flex;
-    [class*="pb_caption_kit"] {
-      padding: 0 $space_xs;
-    }
   }
   &::before {
     content: "";
@@ -42,40 +34,12 @@ $section_colors_dark: (
     flex: 1;
     @include section_separator_horizontal;
   }
-  @each $color_name, $color_value in $section_selector_colors {
-    &[class*="color_#{$color_name}"] {
-      &::before, &::after {
-        background: $color_value;
-      }
-
-      &[class*=_vertical] {
-        &::after {
-          background: $color_value;
-        }
-      }
-      &[class*=_dashed] {
-        &::before, &::after {
-          border: 1px dashed $color_value;
-        }
-        &[class*=_vertical] {
-          &::after {
-            border: 1px dashed $color_value;
-            background: none;
-          }
-        }
-      }
-    }
-  }
-
   &[class*=_horizontal] {
     justify-content: center;
   }
   &[class*=_vertical] {
     margin-left: $space_xs;
     margin-right: $space_xs;
-    &::before {
-      display: none;
-    }
     &::after {
       @include section_separator_vertical(false);
     }
@@ -90,33 +54,6 @@ $section_colors_dark: (
   // Dark =========================
 
   &.dark {
-    @each $color_name, $color_value in $section_selector_colors {
-      &[class*="color_#{$color_name}"] {
-        &::before, &::after {
-          background: $color_value;
-        }
-
-        &[class*=_vertical] {
-          &::after {
-            @include section_separator_vertical(false);
-            background: $color_value;
-          }
-        }
-
-        &[class*=_dashed] {
-          &::before, &::after {
-            border: 1px dashed $color_value;
-            background: none;
-          }
-          &[class*=_vertical] {
-            &::after {
-              border: 1px dashed $color_value;
-              background: none;
-            }
-          }
-        }
-      }
-    }
     &::before {
       @include section_separator_horizontal(true);
     }

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

@@ -10,7 +10,6 @@ type SectionSeparatorProps = {
   aria?: { [key: string]: string; },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
-  color?: "default" | "primary",
   dark?: boolean,
   data?: { [key: string]: string; },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -26,7 +25,6 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
     aria = {},
     children,
     className,
-    color ="default",
     data = {},
     htmlOptions = {},
     id,
@@ -39,7 +37,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
   const dynamicInlineProps = globalInlineProps(props)
 
   return (

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

@@ -6,7 +6,6 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
-  - section_separator_color: Color
 
   react:
   - section_separator_line: Line Separator
@@ -14,7 +13,6 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
-  - section_separator_color: Color
 
   swift:
   - section_separator_line_swift: Line Separator

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

@@ -3,4 +3,3 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
 export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
 export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
-export { default as SectionSeparatorColor } from './_section_separator_color.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -3,9 +3,6 @@
 module Playbook
   module PbSectionSeparator
     class SectionSeparator < Playbook::KitBase
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[default primary],
-                   default: "default"
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[card background],
@@ -20,7 +17,7 @@ module Playbook
                         default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil, color != "default" ? "color_#{color}" : nil)
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil)
       end
 
     private

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss

@@ -1,8 +1,8 @@
 @import 'skeleton_loading_mixins';
 
 .pb_skeleton_loading {
-    display: flex;
-    flex-direction: column;
+    display: "flex";
+    flex-direction: "column";
     height: 100%;
     .color_default {
         @include skeleton-shimmer($silver);

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("skeleton_loading") %>
+<%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
 
 const SortingChangeCallback = (sortOptions) => {
@@ -6,8 +6,7 @@ const SortingChangeCallback = (sortOptions) => {
 }
 
 const SkeletonLoadingFilter = (props) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const toggleLoading = () => setIsLoading((prev) => !prev)
+  const isLoading = true
 
   const options = [
     { value: 'USA' },
@@ -19,13 +18,6 @@ const SkeletonLoadingFilter = (props) => {
 
   return (
     <div>
-      <Button 
-          marginBottom="md" 
-          onClick={toggleLoading} 
-          variant="secondary"
-      >
-          {isLoading ? "Show Filter" : "Show Skeleton Loading"}
-      </Button>
       <div>
         {isLoading ? (
           <Card 

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -17,11 +17,9 @@ const SkeletonLoadingHeightWidth = (props) => (
         width="50px"
         {...props}
     />
-    <Card 
-        height='200px' 
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         marginBottom="md"
         padding="none" 
-        width='100%'
         {...props}
     >
       <SkeletonLoading
@@ -32,10 +30,8 @@ const SkeletonLoadingHeightWidth = (props) => (
           {...props}
       />
     </Card>
-    <Card 
-        height='200px'
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         padding="none"
-        width='100%'
         {...props}
     >
       <SkeletonLoading

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -1,19 +1,11 @@
-import React, { useState } from 'react';
-import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
+import React from 'react';
+import { Flex, SkeletonLoading, User } from "playbook-ui";
 
 const SkeletonLoadingUser = (props) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const toggleLoading = () => setIsLoading((prev) => !prev)
+  const isLoading = true
 
   return (
     <div>
-      <Button 
-          marginBottom="md" 
-          onClick={toggleLoading} 
-          variant="secondary"
-      >
-          {isLoading ? "Show User" : "Show Skeleton Loading"}
-      </Button>
       <div>
         {isLoading ? (
           <Flex alignItems="center">

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

@@ -1,13 +1,8 @@
 examples:
   
   rails:
-  - skeleton_loading_default: Default
-  - skeleton_loading_color: Color
-  - skeleton_loading_layout: Layout
-  - skeleton_loading_border_radius: Border Radius
-  - skeleton_loading_height_width: Height & Width  
-  - skeleton_loading_user: User Component Example
-  - skeleton_loading_filter: Filter Component Example
+  # - skeleton_loading_default: Default
+  
   
   react:
   - skeleton_loading_default: Default

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb

@@ -1,8 +1,12 @@
-<%= pb_content_tag do %>
-  <% stack.times do |index| %>
-    <div
-      class="<%= item_classname(index) %>"
-      style="<%= item_inline_styles %>"
-    ></div>
-  <% end %>
-<% end %>
+<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
+<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
+<%= pb_content_tag(
+    # :div,
+    # aria: object.aria,
+    # class: object.classname,
+    # data: object.data,
+    # id: object.id,
+    # **combined_html_options
+) do %>
+  <span>SKELETON_LOADING CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb

@@ -2,54 +2,7 @@
 
 module Playbook
   module PbSkeletonLoading
-    class SkeletonLoading < Playbook::KitBase
-      prop :height, type: Playbook::Props::String,
-                    default: "16px"
-      prop :width, type: Playbook::Props::String,
-                   default: "100%"
-      prop :border_radius, type: Playbook::Props::Enum,
-                           values: %w[none xs sm md lg xl rounded],
-                           default: "sm"
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[none xxs xs sm md lg xl xxl],
-                 default: "xxs"
-      prop :stack, type: Playbook::Props::Number,
-                   default: 1
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[default white],
-                   default: "default"
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-
-      def classname
-        generate_classname("pb_skeleton_loading")
-      end
-
-      def global_inline_props
-        {}
-      end
-
-      def item_classname(index = nil)
-        classes = [
-          "pb_skeleton_loading_item",
-          "border_radius_#{border_radius}",
-          "color_#{color}",
-          ("dark" if dark),
-          gap_class(index),
-        ]
-        classes.compact.join(" ")
-      end
-
-      def item_inline_styles
-        styles = []
-        styles << "height: #{height}"
-        styles << "width: #{width}"
-        styles.join("; ")
-      end
-
-      def gap_class(index = nil)
-        stack > 1 && index.to_i.positive? && gap != "none" ? "gap_#{gap}" : nil
-      end
+    class SkeletonLoading < ::Playbook::KitBase
     end
   end
 end