playbook_ui 14.26.0.pre.rc.0 → 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10507

data/app/pb_kits/playbook/pb_message/_message.scss

@@ -7,21 +7,26 @@
 $mention_bg_color_yellow: rgba(249, 187, 0, 0.2);
 $mention_bg_color_blue: #e5eefa;
 
-[class^=pb_message_kit] {
-  @include pb_message;
+.pb_message_kit {
+  @include pb_message(false);
+}
+
+.pb_message_kit_avatar {
+  @include pb_message(true);
+}
 
-  [class^=pb_message_mention] {
-    border-radius: $space_xxs;
-    color: $primary;
-    display: inline;
-    padding: $space_xxs;
-    
-    &[class*=_user] {
-      background-color: $mention_bg_color_blue;
-    }
-    
-    &[class*=_self] {
-      background-color: $mention_bg_color_yellow;
-    }
-  }
+.pb_message_mention_user,
+.pb_message_mention_self {
+  border-radius: $space_xxs;
+  color: $primary;
+  display: inline;
+  padding: $space_xxs;
 }
+
+.pb_message_mention_user {
+  background-color: $mention_bg_color_blue;
+}
+
+.pb_message_mention_self {
+  background-color: $mention_bg_color_yellow;
+}

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -84,6 +84,7 @@ const Message = (props: MessageProps) => {
         <Flex
             justify={alignTimestamp === 'left' ? 'none' : 'between'}
             orientation="row"
+            width="100%"
         >
           {label &&
             <Title

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -1,19 +1,18 @@
 @import "../tokens/spacing";
 
-@mixin pb_message {
+@mixin pb_message($with_avatar: false) {
   display: flex;
   justify-content: flex-start;
 
   .content_wrapper {
     width: 100%;
     font-size: $font_base - 1;
-
-    .pull-left {
+    @if $with_avatar {
       margin-left: $space-xs;
     }
 
-    [class^=pb_flex_] {
-      width: 100%;
+    .pull-left {
+      margin-left: $space-xs;
     }
 
     .message_text {
@@ -25,12 +24,6 @@
     }
   }
 
-  &[class*=_avatar] {
-    .content_wrapper {
-      margin-left: $space-xs;
-    }
-  }
-
   .pb_message_body {
     font-size: 15px;
   }
@@ -48,4 +41,4 @@
       display: none;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -9,7 +9,7 @@
       }) %>
     <% end %>
     <div class="content_wrapper">
-      <%= pb_rails("flex", props: { orientation: "row", justify: object.align_timestamp == "left" ? "none" : "between" }) do %>
+      <%= pb_rails("flex", props: { orientation: "row", justify: object.align_timestamp == "left" ? "none" : "between", width:"100%" }) do %>
         <% if object.label.present? %>
           <%= pb_rails("title", props: {
             size: 4,

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -16,7 +16,7 @@
       border-color: $error;
     }
   }
-  [class*=pb_body_kit_negative] {
+  .pb_body_kit_negative {
     margin-top: $space_xxs;
   }
 }
@@ -85,7 +85,10 @@
         .pb_checkbox_kit {
           align-items: center;
         }
-        .pb_button_kit_link_inline_enabled {
+        .pb_button_kit,
+        .pb_button_link,
+        .pb_button_inline,
+        .pb_button_enabled {
           color: $charcoal;
           &:hover {
             color: $primary;
@@ -110,7 +113,7 @@
           border-color: $error_dark;
         }
       }
-      [class*=pb_body_kit_negative] {
+      .pb_body_kit_negative {
         color: $error_dark;
       }
     }

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -8,7 +8,8 @@ $pb_multiple_users_border_size: 1px;
 $pb_multiple_users_size: map-get($avatar-sizes, "xs");
 $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
 
-[class^=pb_multiple_users_kit] {
+.pb_multiple_users_kit,
+.pb_multiple_users_kit_reverse {
   display: inline-flex;
 
   .multiple_users_badge_xs,
@@ -53,23 +54,23 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
       border: $pb_multiple_users_border_size solid $white;
     }
 
-    @each $item in [1, 2, 3, 4, 5] {
-      &:nth-child(#{$item}) {
-        z-index: #{$item - 1};
-      }
-    }
+    &:nth-child(1) { z-index: 0; }
+    &:nth-child(2) { z-index: 1; }
+    &:nth-child(3) { z-index: 2; }
+    &:nth-child(4) { z-index: 3; }
+    &:nth-child(5) { z-index: 4; }
   }
+}
 
-  &[class*=_reverse] {
-    flex-direction: row-reverse;
+.pb_multiple_users_kit_reverse {
+  flex-direction: row-reverse;
 
-    .pb_multiple_users_item {
-      margin-left: 0;
-      margin-right: $pb_multiple_users_overlap;
+  .pb_multiple_users_item {
+    margin-left: 0;
+    margin-right: $pb_multiple_users_overlap;
 
-      &:first-of-type {
-        margin-right: 0;
-      }
+    &:first-of-type {
+      margin-right: 0;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -243,4 +243,4 @@ $positions: (
         }
       }
     }
-  }
+  }

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss

@@ -31,4 +31,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -272,4 +272,4 @@
       }
     }
   }
-}
+}

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

@@ -20,7 +20,8 @@ $pb_online_status_statuses: (
   primary: $primary,
 );
 
-[class^=pb_online_status_kit] {
+.pb_online_status_kit,
+.pb_online_status_kit_no_border {
   box-sizing: content-box;
   width: $pb_online_status_size;
   height: $pb_online_status_size;
@@ -36,23 +37,26 @@ $pb_online_status_statuses: (
   &.dark {
     border-color: $bg_dark;
   }
+}
 
-  @each $status_name, $status_value in $pb_online_status_statuses {
-    &[class*=_#{$status_name}] {
-      background: $status_value;
-    }
+// Status colors
+@each $status_name, $status_value in $pb_online_status_statuses {
+  .pb_online_status_#{$status_name} {
+    background: $status_value;
   }
+}
 
-  @each $size, $value in $pb_online_status_sizes {
-    &[class*=_size_#{$size}] {
-      width: $value;
-      height: $value;
-      flex-basis: $value;
-    }
+// Sizes
+@each $size, $value in $pb_online_status_sizes {
+  .pb_online_status_size_#{$size} {
+    width: $value;
+    height: $value;
+    flex-basis: $value;
   }
+}
 
-  &[class*=_no_border] {
-    border-width: 0;
-    border-style: none;
-  }
+// No border
+.pb_online_status_kit_no_border {
+  border-width: 0;
+  border-style: none;
 }

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

@@ -33,7 +33,7 @@ const OnlineStatus = (props: OnlineStatusProps) => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const getBorder = noBorder ? 'no_border' : ''
-  const classes = classnames(buildCss('pb_online_status_kit', status, getBorder, "size", size), globalProps(props), className)
+  const classes = classnames(buildCss('pb_online_status_kit', getBorder ), `${size && "pb_online_status_size_" + size}`,  `pb_online_status_${status && status}`,globalProps(props), className)
 
   return (
     <div

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -14,11 +14,12 @@ module Playbook
       prop :no_border, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_online_status_kit", status, is_no_border, "size", size)
-      end
+        class_names = ["pb_online_status_kit"]
+        class_names << "pb_online_status_no_border" if no_border
+        class_names << "pb_online_status_size_#{size}" if size
+        class_names << "pb_online_status_#{status}" if status
 
-      def is_no_border
-        no_border ? "no_border" : nil
+        generate_classname(class_names.compact.join(" "), separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_online_status/online_status.test.js

@@ -11,7 +11,7 @@ test('renders online status with defaults', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_online_status_kit_offline_size_sm')
+  expect(kit).toHaveClass('pb_online_status_kit pb_online_status_size_sm pb_online_status_offline')
 })
 
 test('renders online status with props', () => {
@@ -27,5 +27,5 @@ test('renders online status with props', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_online_status_kit_online_no_border_size_lg dark additional_class')
+  expect(kit).toHaveClass('pb_online_status_kit_no_border pb_online_status_size_lg pb_online_status_online dark additional_class')
 })

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -54,7 +54,7 @@ $overlay_colors: (
   }
 }
 
-[class^=pb_overlay] {
+.pb_overlay {
   position: relative;
   @each $color_name, $color in $overlay_colors {
     .overlay_#{$color_name} {

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -14,7 +14,7 @@ module Playbook
                              default: false
 
       def classname
-        generate_classname("pb_overlay", hide_scroll_bar_class)
+        generate_classname("pb_overlay", hide_scroll_bar_class, separator: " ")
       end
 
       def position

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -9,7 +9,11 @@
     display: inline;
   }
 
-  [class*=show-below-] {
+  .show-below-xs,
+  .show-below-sm,
+  .show-below-md,
+  .show-below-lg,
+  .show-below-xl {
     display: none;
   }
   @each $breakpoint_name, $breakpoint in $breakpoints {
@@ -74,4 +78,3 @@
     }
   }
 }
-

data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react"
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+import pbBarGraphTheme from "./pbBarGraphTheme"
+
+import classnames from "classnames";
+
+type PbBarGraphProps = {
+  
+  options: Record<string, unknown>
+  className?: string
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
+  id: string;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)};
+}
+
+const PbBarGraph = ({
+  aria = {},
+  data = {},
+  id,
+  htmlOptions = {},
+  options,
+  className = "pb_pb_bar_graph",
+}: PbBarGraphProps): React.ReactElement => {
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  const mergedOptions = useMemo(() => {
+    if (!options || typeof options !== "object") {
+      // eslint-disable-next-line no-console
+      console.error("❌ Invalid options passed to <BarGraph />", options)
+      return {}
+    }
+
+    return Highcharts.merge({}, pbBarGraphTheme, options)
+  }, [options])
+
+  return (
+  
+    <div>
+      <HighchartsReact
+          containerProps={{
+                  className: classnames(globalProps, className),
+                  id: id,
+                  ...ariaProps,
+                  ...dataProps,
+                  ...htmlProps
+                }}
+          highcharts={Highcharts}
+          options={mergedOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraph

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb

@@ -0,0 +1,35 @@
+<% chart_data = [{
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
+}, {
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
+}] %>
+
+<% chart_options = {
+  series: chart_data,
+  title: {
+    text: "Bar Graph with Custom Data Colors",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
+}
+%>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  name: 'Manufacturing',
+  data: [4434, 524, 2320, 440, 500],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387, 743, 1344, 434, 440],
+}, {
+  name: 'Project Development',
+  data: [3227, 878, 999, 780, 1000],
+}, {
+  name: 'Other',
+  data: [1111, 677, 3245, 500, 200],
+}]
+
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Custom Data Colors",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
+}
+
+const PbBarGraphColors = () => {
+
+  return (
+    <div>
+      <PbBarGraph
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraphColors

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md

@@ -0,0 +1 @@
+Custom data colors allow for color customization to match the needs of business requirements. To accomplish this, you can use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+You can use Playbook's color tokens or use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb

@@ -0,0 +1,38 @@
+<% chart_data = [{
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
+}, {
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
+}] %>
+
+
+<% chart_options = {
+  series: chart_data,
+  title: {
+    text: 'Solar Employment Growth by Sector, 2010-2016',
+  },
+  subtitle: {
+    text: 'Source: thesolarfoundation.com',
+  },
+  xAxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+}
+%>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+  const chartData = [{
+    name: 'Installation',
+    data: [1475, 200, 3000, 654, 656],
+  }, {
+    name: 'Manufacturing',
+    data: [4434, 524, 2320, 440, 500],
+  }, {
+    name: 'Sales & Distribution',
+    data: [3387, 743, 1344, 434, 440],
+  }, {
+    name: 'Project Development',
+    data: [3227, 878, 999, 780, 1000],
+  }, {
+    name: 'Other',
+    data: [1111, 677, 3245, 500, 200],
+  }]
+
+  const chartOptions = {
+    series: chartData,
+    title: {
+      text: 'Solar Employment Growth by Sector, 2010-2016',
+    },
+    subtitle: {
+      text: 'Source: thesolarfoundation.com',
+    },
+    xAxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+    },
+    yAxis: {
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+  }
+
+const PbBarGraphDefault = (props) => {
+
+  return (
+    <div>
+      <PbBarGraph
+          {...props}
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraphDefault

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb

@@ -0,0 +1,46 @@
+<% chart_data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<% chart_options_pixel = {
+ chart: {
+    height: "300"
+  },
+  series: chart_data,
+  title: {
+    text: "Fixed Height (300px)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  }
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options_pixel}) %>
+
+<br /><br />
+
+<% chart_options_percentage = {
+ chart: {
+    height: "50%"
+  },
+  series: chart_data,
+  title: {
+    text: "Percentage Height (50%)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  }
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options_percentage}) %>