playbook_ui_docs 15.2.0.pre.alpha.PLAY2542formatasyoutypebug11501 → 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11607

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6349a1bca06c70583c50acb87ee730788a5f02e7987862d7e675a64241ae0052
-  data.tar.gz: f3031915a3ab051429b36a65e16aa4d170fd26fc041e827e5f36c698174362b6
+  metadata.gz: b84651e99340e6bb6127f60dd831b721e1ff886b881e48b6baa8372519579439
+  data.tar.gz: d4aa0e81e2c41ca8f8f9f6aec67841dccce1dd6de81aac9964ced85b314f2639
 SHA512:
-  metadata.gz: 814d0926e75d80e2ed57993a282e25cee6fbf6296c52fd795f6740c8c168cc2e09cf9fd67826fe4b4b8ca15f992ddba503d60b44cc7644ac14013afb331307c2
-  data.tar.gz: df164352928d09e6e12edd96ac2bac8d4e9cebc18087a7e1da4dbe6aa1b4e633c8c27fb11b74e64ee6236c6357a80ed02f65ba80373d8676b7aa09cb7cd0903f
+  metadata.gz: 64b74e6e18ee58e64ac5b25fff2e86f195fc2bf7f0f01174374e1ad7569b31f9efd45713fb2e2fab1b8222367ad085b582c2bcbe83a972646c303bb1cb239855
+  data.tar.gz: e1a558934acbd69fe43f89b18e41d0fee3af89b84292d1af00a75dc61d5084328895243adab8d32d02dcfb9cbd1cb19bcccc1c67b5fbd0e4c75f916ccb42c753

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -33,7 +33,7 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -2,7 +2,9 @@ The AdvancedTable kit accepts tree data and automatically renders expansion cont
 
 ### id
 
-A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar will not be able to properly reference the correct table.
+A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar, expand/collapse caching, or selectable rows will not be able to properly reference the correct table.
+
+You must also set `table_id` when using subcomponents like `table_header` or `table_body`.
 
 ### table_data
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { id: "sort", table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "sort", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "subrow-headers", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb

@@ -31,6 +31,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "collapsible_trail", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb

@@ -58,6 +58,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling-multi", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb

@@ -33,6 +33,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.html.erb

@@ -46,6 +46,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control-per-row", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb

@@ -35,6 +35,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md

@@ -1,2 +1,4 @@
 
 Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
+
+**NOTE**: z index for Fixed Confirmation Toast is set to 'max' by default which has the value of `999999`. the z Index global prop can be used to override this if you want to set it to a different value.

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

@@ -0,0 +1,3 @@
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md

@@ -0,0 +1,3 @@
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md

@@ -0,0 +1,3 @@
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.html.erb

@@ -0,0 +1,12 @@
+<% data = [{ name: "Name", y: 67 }] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  plotOptions: {
+    solidgauge: {
+      borderColor: '#00C4D7',
+    }
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors } from 'playbook-ui'
+
+const data = [{ name: "Name", y: 67 }]
+
+const chartOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    solidgauge: {
+      borderColor: colors.data_7,
+    }
+  },
+};
+const PbGaugeChartColor = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartColor

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md

@@ -0,0 +1,5 @@
+Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.
+
+For React, pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
+
+For Rails, the prop `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.html.erb

@@ -0,0 +1,45 @@
+<% chart_options = {
+  series:[{data:[{ name: "Name", y: 10 }]}],
+    chart: {
+    height: "150",
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+
+<%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
+  <%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
+    <%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
+      <%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
+      <%= pb_rails("flex", props: {align: "stretch"}) do %>
+        <%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
+          <%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
+          <%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
+            <%= pb_rails("title", props: {size: 1, text: "39"})%>
+            <%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
+          <% end %>
+          <%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
+        <%end %>
+        <%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
+        <%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
+          <%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
+          <%= pb_rails("flex", props: {wrap: true}) do %>
+            <%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
+              <%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <%end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import Body from '../../pb_body/_body'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Title from '../../pb_title/_title'
+import { colors, typography } from 'playbook-ui'
+
+const data = [{ name: "Name", y: 10 }];
+
+const chartOptions = {
+  series: [{ data: data }],
+  chart: {
+    height: "150",
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartComplex = (props) => (
+<Flex
+    gap="sm"
+    padding="xl"
+    wrap
+  >
+    <FlexItem
+        flex={1}
+        grow
+    >
+      <Card
+          maxWidth="xs"
+          padding="md"
+      >
+        <Title
+            paddingBottom="sm"
+            size={4}
+            text="Abandoned Calls"
+        />
+        <Flex
+            align="stretch"
+        >
+          <Flex
+              marginRight="sm"
+              orientation="column"
+          >
+            <Body
+                color="light"
+                paddingBottom="sm"
+                text="Total Abandoned"
+            />
+            <Flex
+                align="baseline"
+                paddingBottom="xs"
+            >
+              <Title
+                  size={1}
+                  text="39"
+              />
+              <Title
+                  color="light"
+                  size={3}
+                  text="calls"
+              />
+            </Flex>
+            <Caption
+                size="xs"
+                text="of 390"
+            />
+          </Flex>
+
+          <SectionSeparator
+              alignSelf="stretch"
+              marginRight="sm"
+              orientation="vertical"
+          />
+
+          <Flex
+              orientation="column"
+              wrap
+          >
+              <Body
+                  color="light"
+                  text="% Abandoned"
+              />
+            <Flex
+                wrap
+            >
+              <FlexItem
+                  fixedSize="150px"
+                  overflow="hidden"
+                  shrink
+              >
+                <PbGaugeChart
+                    options={chartOptions}
+                    {...props}
+                />
+               </FlexItem>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Card>
+    </FlexItem>
+  </Flex>
+)
+
+export default PbGaugeChartComplex

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.md

@@ -0,0 +1 @@
+We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.html.erb

@@ -0,0 +1,5 @@
+<% chart_options = {
+  series:[{data:[{ name: "Name", y: 45 }]}]
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+
+const chartOptions = {
+  series:[{data:[{ name: "Name", y: 45 }]}]
+}
+
+const PbGaugeChartDefault = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartDefault

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.html.erb

@@ -0,0 +1,12 @@
+<% data = [{ name: "Participants", y: 84 }] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+
+const data = [{ name: "Participants", y: 84 }]
+
+const chartOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+  },
+};
+
+const PbGaugeChartDisableAnimation = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartDisableAnimation

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.html.erb

@@ -0,0 +1,23 @@
+<% data = [{ name: "Capacity", y: 75 }] %>
+
+<% chart_options = {
+  title: {
+    text: "Seating Capacity",
+  },
+  series: [{ data: data }],
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const data = [{ name: "Capacity", y: 75 }]
+
+const chartOptions = {
+  title: {
+    text: "Seating Capacity",
+  },
+  series: [{ data: data }],
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+
+const PbGaugeChartFullCircle = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartFullCircle

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.html.erb

@@ -0,0 +1,40 @@
+<% chart_options = {
+  title: {
+    text: "Fixed Height in Pixels",
+  },
+  chart: {
+    height: "400",
+  },
+  series: [{ data: [{ name: "Pixels", y: 400 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">px</span>',
+      },
+    },
+  },
+} %>
+
+<% chart_options_1 = {
+  title: {
+    text: "Height as Percentage of Width",
+  },
+  chart: {
+    height: "45%",
+  },
+  series: [{ data: [{ name: "Percentage", y: 45 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const chartOptions = {
+  title: {
+    text: "Fixed Height in Pixels",
+  },
+  chart: {
+    height: "400",
+  },
+  series: [{ data: [{ name: "Pixels", y: 400 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">px</span>`,
+      },
+    },
+  },
+};
+
+const chartOptions2 = {
+  title: {
+    text: "Height as Percentage of Width",
+  },
+  chart: {
+    height: "45%",
+  },
+  series: [{ data: [{ name: "Percentage", y: 45 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartHeight = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+    <PbGaugeChart
+        options={chartOptions2}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartHeight

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_live_data.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useRef } from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import Button from '../../pb_button/_button'
+
+const PbGaugeChartLiveData = (props) => {
+  const [value, setValue] = useState(50)
+  const [name, setName] = useState('Name')
+  const chartRef = useRef(null)
+
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
+
+  const updateValue = () => {
+    const newValue = Math.floor(Math.random() * 100)
+    setValue(newValue)
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update(newValue)
+    }
+  }
+
+  const updateName = () => {
+    let index = namesArray.indexOf(name)
+    if (namesArray.indexOf(name) == 5) {
+      index = 0
+    } else {
+      index += 1
+    }
+    setName(namesArray[index])
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update({ name: namesArray[index] })
+    }
+  }
+
+  const chartOptions = {
+    title: {
+      text: name,
+    },
+    series: [{
+      data: [{ name: name, y: value }]
+    }]
+  }
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+        />
+        <Button
+            onClick={updateName}
+            text="Update Name"
+        />
+      <PbGaugeChart
+          options={chartOptions}
+          ref={chartRef}
+          {...props}
+      />
+    </div>
+  );
+}
+
+export default PbGaugeChartLiveData