playbook_ui 14.10.0.pre.alpha.play1662cssbargraph5201 → 14.10.0.pre.alpha.play16825206

data/lib/playbook/classnames.rb

@@ -16,6 +16,7 @@ module Playbook
         width_props,
         min_width_props,
         max_width_props,
+        gap_props,
         z_index_props,
         number_spacing_props,
         shadow_props,

data/lib/playbook/spacing.rb

@@ -3,6 +3,7 @@
 module Playbook
   module Spacing
     def self.included(base)
+      base.prop :gap
       base.prop :margin
       base.prop :margin_bottom
       base.prop :margin_left
@@ -52,6 +53,16 @@ module Playbook
       %w[0% xs sm md lg xl xxl 0 none 100%]
     end
 
+    def gap_values
+      %w[none xxs xs sm md lg xl]
+    end
+
+    def gap_options
+      {
+        gap: "gap",
+      }
+    end
+
     def spacing_options
       {
         margin: "m",
@@ -146,5 +157,15 @@ module Playbook
         "width_#{filter_classname(width_value)}" if width_values.include? width_value
       end.compact.join(" ")
     end
+
+    def gap_props
+      selected_gap_props = gap_options.keys.select { |sk| try(sk) }
+      return nil unless selected_gap_props.present?
+
+      selected_gap_props.map do |k|
+        gap_value = send(k)
+        "gap_#{gap_value}" if gap_values.include? gap_value
+      end.compact.join(" ")
+    end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.10.0"
-  VERSION = "14.10.0.pre.alpha.play1662cssbargraph5201"
+  VERSION = "14.10.0.pre.alpha.play16825206"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.10.0.pre.alpha.play1662cssbargraph5201
+  version: 14.10.0.pre.alpha.play16825206
 platform: ruby
 authors:
 - Power UX
@@ -415,7 +415,6 @@ files:
 - app/pb_kits/playbook/pb_badge/docs/_description.md
 - app/pb_kits/playbook/pb_badge/docs/example.yml
 - app/pb_kits/playbook/pb_badge/docs/index.js
-- app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.css
 - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
 - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
 - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
@@ -798,7 +797,6 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/_description.md
 - app/pb_kits/playbook/pb_currency/docs/example.yml
 - app/pb_kits/playbook/pb_currency/docs/index.js
-- app/pb_kits/playbook/pb_dashboard/BarGraphStyles.css
 - app/pb_kits/playbook/pb_dashboard/commonSettings.js
 - app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts
 - app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts
@@ -3181,6 +3179,7 @@ files:
 - app/pb_kits/playbook/utilities/_display.scss
 - app/pb_kits/playbook/utilities/_flexbox.scss
 - app/pb_kits/playbook/utilities/_focus.scss
+- app/pb_kits/playbook/utilities/_gap.scss
 - app/pb_kits/playbook/utilities/_height.scss
 - app/pb_kits/playbook/utilities/_hover.scss
 - app/pb_kits/playbook/utilities/_line_height.scss
@@ -3234,8 +3233,8 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-gJLWiR0r.js
-- dist/chunks/_weekday_stacked-7XLAG_Yz.js
+- dist/chunks/_typeahead-CbKUtXZa.js
+- dist/chunks/_weekday_stacked-CEpLoHbM.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-B7sgJtGS.js
 - dist/chunks/pb_form_validation-C5Cc0-1v.js

data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.css

@@ -1,52 +0,0 @@
-@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_dashboard/BarGraphStyles.css

@@ -1,53 +0,0 @@
-@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;
-}
-