playbook_ui 13.23.0.pre.alpha.PLAY1284investigation2657 → 13.24.0.pre.alpha.PLAY998backgroundkitremoveemptyinlinline2666

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8f32666e4b2500b014dc2554c3ebf3f5f4e3695cc726a3fc1d53bf5b332455a5
-  data.tar.gz: ff93821e0818cfbf57b09ece3fe03ce0c5459e4d29161f896d5771a3e8eb3761
+  metadata.gz: d91c1689890fbb2e1392ecc83ad7b869eea650744de932d645ed6ea4e566d161
+  data.tar.gz: e53e677351b6221797ed074c4cfdcb6ea842c33af17060167257101af7978db2
 SHA512:
-  metadata.gz: 93c9e3de45864e757c047b19dd7eeed12610d97f234a160183143155ab0dbb88ea6087414e212ffd1037eff4064b239ba7eecfbb30627753f4b4ab1bfcacf1a9
-  data.tar.gz: a5264af573a6eac322795be8739d2a3974a72085e3d5d163b79f4b1882899483b5e82f5205c1ced23c85d1dcc10f53d67570c3067645169fe9cf41f08062eca6
+  metadata.gz: da048d8e1f09cb0d4640c8a1f50e6a1acaf5bb05707d9a843dc011b963b683e8931ec13f80d3f4c98a320addbacd3ca3e9c2a9eca20ff3242d05f4336362f156
+  data.tar.gz: 19a49a4274d753b4b496e8299df73a224ad6356f3ba2bf04d0817d9a69272b48f0c41eab40cb05a46a3dd041ce38a8f67b6cfaffdcf4a7c9092143b1e91950d4

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -65,7 +65,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
 
 const Background = (props: BackgroundProps): React.ReactElement => {
   const {
-    alt = '',
+    alt = undefined,
     aria = {},
     backgroundColor = 'light',
     backgroundPosition = '',
@@ -130,11 +130,13 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   );
 
   const backgroundStyle = {
-    backgroundImage: resImageUrl ? `url(${resImageUrl})` : undefined,
-    backgroundRepeat: resBackgroundRepeat || undefined,
-    backgroundSize: resBackgroundSize || undefined,
-    backgroundPosition: resBackgroundPosition || undefined,
     backgroundColor: customColor || undefined,
+    ...(resImageUrl !== '' ? {
+      backgroundImage: resImageUrl ? `url(${resImageUrl})` : undefined,
+      backgroundRepeat: resBackgroundRepeat || undefined,
+      backgroundPosition: resBackgroundPosition || undefined,
+      backgroundSize: resBackgroundSize || undefined,
+    } : {})
   };
 
   const Tag: React.ReactElement | any = `${tag}`;

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

@@ -37,6 +37,7 @@ type BarGraphProps = {
   y?: number;
   aria?: { [key: string]: string };
   data?: { [key: string]: string };
+  stacking?: "normal" | "percent" 
   axisFormat?: { format: string; }[] | string;
 };
 
@@ -55,6 +56,7 @@ const BarGraph = ({
   axisFormat,
   id,
   pointStart,
+  stacking,
   subTitle,
   type = "column",
   title = "Title",
@@ -101,7 +103,12 @@ const BarGraph = ({
       opposite: false,
       title: {
         text: typeof axisTitle === 'string' ? axisTitle : axisTitle[0].name,
-      }
+      },
+      plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
+        value: 0,
+        zIndex: 10,
+        color: "#E4E8F0"
+    }],
     }],
     xAxis: {
       categories: xAxisCategories,
@@ -120,7 +127,9 @@ const BarGraph = ({
         : highchartsTheme.colors,
     plotOptions: {
       series: {
+        stacking: stacking,
         pointStart: pointStart,
+        borderWidth: stacking ? 0 : "",
         events: {},
         dataLabels: {
           enabled: false,
@@ -141,7 +150,12 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
     opposite: true,
     title: {
       text: axisTitle[1].name,
-    }
+    }, 
+    plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
+      value: 0,
+      zIndex: 10,
+      color: "#E4E8F0"
+  }],
   });
 }
 

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

@@ -15,6 +15,7 @@ module Playbook
                          values: %w[vertical horizontal],
                          default: "vertical"
       prop :point_start, type: Playbook::Props::Numeric
+      prop :stacking
       prop :subtitle
       prop :title
       prop :x_axis_categories, type: Playbook::Props::Array,
@@ -50,6 +51,7 @@ module Playbook
           dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
+          stacking: stacking,
           subTitle: subtitle,
           axisTitle: axis_title,
           axisFormat: axis_format,

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb

@@ -0,0 +1,23 @@
+<% data = [{
+    name: 'Installation',
+    data: [-475, 400, -1000, 354, -856],
+    threshold: 0
+  }, {
+    name: 'Manufacturing',
+    data: [1475, 200, 1000, 654, -656],
+    threshold: 0
+  }, 
+  {
+    name: 'Sales & Distribution',
+    data: [1270, 100, -1200, 554, 756],
+    threshold: 0
+  }] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Bar Graph with Negative Numbers',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [-475, 400, -1000, 354, -856],
+  threshold: 0
+}, {
+  name: 'Manufacturing',
+  data: [1475, 200, 1000, 654, -656],
+  threshold: 0
+}, 
+{
+  name: 'Sales & Distribution',
+  data: [1270, 100, -1200, 554, 756],
+  threshold: 0
+}]
+
+
+const BarGraphStacked = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-default"
+        legend
+        title="Bar Graph with Negative Numbers"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphStacked

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb

@@ -0,0 +1,22 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475, 200, 3000, 654, 656],
+  }, 
+  {
+    name: 'Manufacturing',
+    data: [1270, 800, 200, 454, 956],
+  }, {
+    name: 'Sales & Distribution',
+    data: [975, 1600, 1500, 924, 500],
+  }] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    stacking: "normal",
+    title: 'Bar Graph with Stacked Columns',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, 
+{
+  name: 'Manufacturing',
+  data: [1270, 800, 200, 454, 956],
+}, {
+  name: 'Sales & Distribution',
+  data: [975, 1600, 1500, 924, 500],
+}]
+
+
+const BarGraphStacked = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number Of Employees"
+        chartData={chartData}
+        id="bar-default"
+        legend
+        stacking="normal"
+        title="Bar Graph with Stacked Columns"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphStacked

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md

@@ -0,0 +1 @@
+The `stacking` prop can be used for a stacked bar graph. The prop allows for `normal` or `percent` as options. 

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

@@ -9,6 +9,8 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_stacked: Stacked
+  - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis
 
 
@@ -21,4 +23,6 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_stacked: Stacked
+  - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis

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

@@ -6,4 +6,6 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
 export { default as BarGraphColors } from './_bar_graph_colors.jsx'
 export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
+export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
+export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
 export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -213,7 +213,7 @@ $status_color_text: (
   warning:            darken($warning, 10%),
   error:              $error,
   info:               $info,
-  neutral:            darken($neutral, 15%),
+  neutral:            $text_lt_light,
   primary:            $primary
 );