playbook_ui 13.28.0.pre.alpha.PBNTR297gradientoverlay3029 → 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7ebcd8e418a573194d60fc898d411fad574f050ac38957d6d73674a503ed522d
-  data.tar.gz: 9948ad7024a45406a248a22e02c40226f0b080ad09f85ca7f4169226b8368297
+  metadata.gz: ac256e747a7a85969b72e1ba3c785d4885eaecd054c3e8e4698fae0e595a59e5
+  data.tar.gz: 85179c09b79f2076dbe64a59838a75e7e3f1bf56c9501dec55042e347b8f8882
 SHA512:
-  metadata.gz: 42c48a5990278c4c6b384d379c8b26b102beba5de1a420eb6f3678672cf0ff3de85eff4429d52ad85b8cfefd291faa325f01f6f07786680c04331b361e935fa2
-  data.tar.gz: 71c1b18be5c1883201ab005f05babbcdd92c1215c0a9839bffd1c633bbcbdccee7c6d46a1d2f712858a5ca53098fdd93d099d79bf2cf76f78bbe19019db6d30a
+  metadata.gz: 5a36ff1b732e310cf3e563b3faf6d07e61465bec2e6a5bac3f99ec708b6b66d730b92cbc32cd1b1cf13fa84c4047562ef9a9ded14d3ed5a148f6e8f2095ac1b3
+  data.tar.gz: def70dafe2cda9be8704bc3250457a45ccaf9a214d667ce05f1c078aae82f823339c75b861de33a392c70d9afcaa2cd57d574b7b2f5051713805f4dcd68cbdbb

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,6 @@
+
+
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -28,7 +31,6 @@
 @import 'pb_detail/detail';
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
-@import 'pb_draggable/draggable';
 @import 'pb_dropdown/dropdown';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
@@ -62,7 +64,6 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
-@import 'pb_overlay/overlay';
 @import 'pb_pagination/pagination';
 @import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
@@ -120,4 +121,3 @@
 @import './utilities/text_align';
 @import './utilities/overflow';
 @import './utilities/truncate';
-@import './utilities/vertical_align';

data/app/pb_kits/playbook/index.js

@@ -35,8 +35,6 @@ export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_st
 export { default as Detail} from './pb_detail/_detail'
 export { default as Dialog } from './pb_dialog/_dialog'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
-export { default as Draggable} from './pb_draggable/_draggable'
-export { DraggableProvider} from './pb_draggable/context'
 export { default as Dropdown} from './pb_dropdown/_dropdown'
 export { default as FileUpload } from './pb_file_upload/_file_upload'
 export { default as Filter } from './pb_filter/_filter'
@@ -72,7 +70,6 @@ export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_mu
 export { default as Nav } from './pb_nav/_nav'
 export { default as NavItem } from './pb_nav/_item'
 export { default as OnlineStatus } from './pb_online_status/_online_status'
-export { default as Overlay} from './pb_overlay/_overlay'
 export { default as Passphrase } from './pb_passphrase/_passphrase'
 export { default as PbReactPopover } from './pb_popover/_popover'
 export { default as Person } from './pb_person/_person'

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

@@ -3,8 +3,8 @@
           <% if content.present? %>
             <% content.presence %>
           <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions }) %>
+            <%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+            <%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
           <% end %>
         <% end %>
 <% end %>

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

@@ -1,3 +1,3 @@
 `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.

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

@@ -1,7 +1,6 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
-  - advanced_table_beta_subrow_headers: SubRow Headers
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -13,3 +12,4 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: inline Row Loading
+

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

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
         <% object.table_data.each do |row| %>
-          <%= render_row_and_children(row, object.column_definitions, 0, false) %>
+          <%= render_row_and_children(row, object.column_definitions) %>
         <% end %>
 <% end %>

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

@@ -3,30 +3,20 @@
 module Playbook
   module PbAdvancedTable
     class TableBody < Playbook::KitBase
-      prop :id, type: Playbook::Props::String,
-                default: ""
       prop :table_data, type: Playbook::Props::Array,
                         default: []
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
-      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
-                                     values: %w[all header none],
-                                     default: "header"
-      prop :subrow_headers, type: Playbook::Props::Array,
-                            default: []
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
+      def render_row_and_children(row, column_definitions, current_depth = 0)
         output = ActiveSupport::SafeBuffer.new
-        is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
 
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1] }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
-
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth })
+        output << pb_rails("advanced_table/table_row", props: { row: row, column_definitions: column_definitions, depth: current_depth })
 
         if row[:children].present?
-          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do
+          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id }) do
             row[:children].map do |child_row|
-              render_row_and_children(child_row, column_definitions, current_depth + 1, row.children.first == child_row)
+              render_row_and_children(child_row, column_definitions, current_depth + 1)
             end.join.html_safe
           end
         end

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

@@ -4,7 +4,7 @@
                 <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
                     <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align:"end" }) do %>
                         <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
-                            <button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
+                            <button class="gray-icon toggle-all-icon">
                                 <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
                             </button>
                         <% end %>
@@ -13,12 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllRows = (element) => {
-        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
+<% end %>

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

@@ -5,7 +5,7 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= object.row.object_id.to_s + object.id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
+                                <button id="<%= object.row.object_id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
                                     <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>

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

@@ -3,8 +3,6 @@
 module Playbook
   module PbAdvancedTable
     class TableRow < Playbook::KitBase
-      prop :id, type: Playbook::Props::String,
-                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :row

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

@@ -163,9 +163,6 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
     staticOptions.plotOptions.series.events = { legendItemClick: () => false };
   }
 
-  const filteredProps: any = {...props};
-  delete filteredProps.verticalAlign;
-
   const [options, setOptions] = useState({});
 
   useEffect(() => {
@@ -175,7 +172,7 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
   return (
     <HighchartsReact
         containerProps={{
-          className: classnames(globalProps(filteredProps), className),
+          className: classnames(globalProps(props), className),
           id: id,
           ...ariaProps,
           ...dataProps,

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

@@ -74,22 +74,6 @@ module Playbook
         standard_options.deep_merge(custom_options)
       end
 
-      def vertical_align_props
-        if vertical_align
-          if object.vertical_align
-            original_result = super
-            class_to_remove = "vertical_align_#{object.vertical_align}"
-
-            modified_result = original_result.gsub(class_to_remove, "").strip
-            modified_result.empty? ? nil : modified_result
-          else
-            super
-          end
-        else
-          super
-        end
-      end
-
       def classname
         generate_classname("pb_bar_graph")
       end

data/app/pb_kits/playbook/pb_bar_graph/docs/{_bar_graph_custom_rails.html.erb → _bar_graph_custom.html.erb}

@@ -15,7 +15,7 @@
     data: [1111,677,3245,500,200]
 }] %>
 
-<% bar_graph_options = {
+<% custom_options = {
     customOptions: {
         subtitle: {
             text: "Overwritten subtitle",
@@ -45,5 +45,5 @@
     y_axis_min: 0,
     subtitle: 'Subtitle to replace',
     title: 'Bar Graph with Custom Overrides',
-    custom_options: bar_graph_options
-}) %>
+    custom_options: custom_options
+}) %>

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

@@ -1,2 +1 @@
-The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
- It's important to note that certain options may require specific script imports to function properly.
+See https://api.highcharts.com/highcharts/ for a comprehensive list of available options.

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

@@ -8,7 +8,7 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
-  - bar_graph_custom_rails: Custom 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_card/_card.scss

@@ -81,4 +81,4 @@
       }
     }
   }
-}
+}

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

@@ -28,8 +28,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
-  border-width: $pb_card_border_width;
-  outline: 1px solid $border_color;
+  border-width: $pb_card_border_width * 2;
 }
 
 @mixin pb_card_selected_dark {

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -20,6 +20,7 @@ $transition: $transition_cubic;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
     height: 22px;
+    position: relative;
     transition: background $transition_default ease, box-shadow $transition_default ease;
     width: 22px;
     .check_icon,
@@ -27,8 +28,8 @@ $transition: $transition_cubic;
       color: $white;
       height: 16px;
       left: 1px;
+      position: relative;
       display: flex;
-      margin: auto;
       opacity: 0;
       width: 16px;
       &.hidden {

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,6 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from 'lodash'
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";
@@ -19,7 +18,6 @@ type CircleChartProps = {
   children?: Node;
   className?: string;
   colors?: string[];
-  customOptions?: Partial<Highcharts.Options>;
   dark?: boolean;
   data?: {[key: string]: string},
   dataLabelHtml?: string;
@@ -69,7 +67,6 @@ const CircleChart = ({
   children,
   className,
   colors = [],
-  customOptions = {},
   dark = false,
   data = {},
   dataLabelHtml = "<div>{point.name}</div>",
@@ -118,9 +115,6 @@ const CircleChart = ({
     innerSizes[size];
 
 
-  const filteredProps: any = {...props};
-  delete filteredProps.verticalAlign;
-
   const [options, setOptions] = useState({});
 
   useEffect(() => {
@@ -177,7 +171,7 @@ const CircleChart = ({
       ],
       credits: false,
     };
-    setOptions(merge(staticOptions, customOptions));
+    setOptions({ ...staticOptions });
   }, [chartData]);
 
 
@@ -187,7 +181,7 @@ const CircleChart = ({
         <div id={`wrapper-circle-chart-${id}`}>
           <HighchartsReact
               containerProps={{
-              className: classnames("pb_circle_chart", globalProps(filteredProps)),
+              className: classnames("pb_circle_chart", globalProps(props)),
               id: id,
               ...ariaProps,
               ...dataProps,
@@ -201,7 +195,7 @@ const CircleChart = ({
       ) : (
         <HighchartsReact
             containerProps={{
-            className: classnames("pb_circle_chart", globalProps(filteredProps)),
+            className: classnames("pb_circle_chart", globalProps(props)),
             id: id,
             ...ariaProps,
             ...dataProps,

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -8,7 +8,6 @@ module Playbook
                    default: "center"
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
-      prop :custom_options, default: {}
       prop :style, type: Playbook::Props::Enum,
                    values: %w[pie],
                    default: "pie"
@@ -41,7 +40,7 @@ module Playbook
       prop :x, type: Playbook::Props::Numeric
       prop :y, type: Playbook::Props::Numeric
 
-      def standard_options
+      def chart_options
         {
           align: align,
           id: id,
@@ -69,26 +68,6 @@ module Playbook
         }
       end
 
-      def chart_options
-        standard_options.deep_merge(custom_options)
-      end
-
-      def vertical_align_props
-        if vertical_align
-          if object.vertical_align
-            original_result = super
-            class_to_remove = "vertical_align_#{object.vertical_align}"
-
-            modified_result = original_result.gsub(class_to_remove, "").strip
-            modified_result.empty? ? nil : modified_result
-          else
-            super
-          end
-        else
-          super
-        end
-      end
-
       def classname
         generate_classname("pb_circle_chart")
       end

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, ReactElement } from 'react'
+import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
@@ -11,16 +11,9 @@ import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
 import CollapsibleIcon from './child_kits/CollapsibleIcon'
 
-type CollapsibleMainProps = {
-  children: React.ReactNode
-}
-
-type CollapsibleContentProps = {
-  children: React.ReactNode
-}
 
 type CollapsibleProps = {
-  children?: [ReactElement<CollapsibleMainProps>, ReactElement<CollapsibleContentProps>],
+  children?: React.ReactElement | [] | any,
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
@@ -37,7 +30,7 @@ type CollapsibleProps = {
 const Collapsible = ({
   aria = {},
   className,
-  children,
+  children = [],
   collapsed = true,
   data = {},
   htmlOptions = {},
@@ -55,12 +48,13 @@ const Collapsible = ({
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  if (children.length !== 2) {
+  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
+
+  if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
-
-  const FirstChild = children[0]
-  const SecondChild = children[1]
+  const FirstChild = CollapsibleParent[0]
+  const SecondChild = CollapsibleParent[1]
 
   const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
   const Content = SecondChild.type === CollapsibleContent ? SecondChild : null

data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js

@@ -48,27 +48,3 @@ test('returns namespaced additional_class class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} additional_class`)
 })
-
-test('html structure is correct', () => {
-  const { container } = render(
-    <Collapsible
-        className="additional_class"
-        data={{ testid: testId }}
-        iconColor='lighter'
-        iconSize="lg"
-    >
-      <Collapsible.Main>
-        <div>{'Main Section'}</div>
-      </Collapsible.Main>
-      <Collapsible.Content>
-        <div>
-          {
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
-          }
-        </div>
-      </Collapsible.Content>
-    </Collapsible>
-  )
-
-  expect(container).toMatchSnapshot()
-})

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,12 +3,6 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
-
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -206,7 +200,7 @@ const highchartsDarkTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    },
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,13 +3,6 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
-
-
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -157,7 +150,6 @@ const highchartsTheme: ThemeProps = {
           fontSize: typography.text_smaller,
           color: colors.text_lt_light,
           fontWeight: typography.regular,
-          textOutline: '2px $white',
         },
       },
     },
@@ -206,7 +198,7 @@ const highchartsTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    },
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -13,15 +13,6 @@
   ]
 %>
 
-<% 
-  example_dropdown_options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
@@ -32,7 +23,6 @@
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -107,7 +107,7 @@
   }
 
   & > [class^=pb_date_picker_kit]:not(:last-child) {
-    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -115,7 +115,7 @@
   }
 
   & > [class^=pb_date_picker_kit]:not(:first-child) {
-    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -13,13 +13,11 @@ import typography from "../tokens/exports/_typography.scss";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
-import { merge } from 'lodash'
 
 type GaugeProps = {
   aria: { [key: string]: string };
   className?: string;
   chartData?: { name: string; value: number[] | number }[];
-  customOptions?: Partial<Highcharts.Options>;
   dark?: boolean;
   data?: { [key: string]: string };
   disableAnimation?: boolean;
@@ -43,7 +41,6 @@ type GaugeProps = {
 const Gauge = ({
   aria = {},
   chartData,
-  customOptions = {},
   dark = false,
   data = {},
   disableAnimation = false,
@@ -178,7 +175,7 @@ const Gauge = ({
       },
     };
 
-    setOptions(merge(staticOptions, customOptions));
+    setOptions({ ...staticOptions });
 
     if (document.querySelector(".prefix")) {
       document.querySelectorAll(".prefix").forEach((prefix) => {

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -5,7 +5,6 @@ module Playbook
     class Gauge < Playbook::KitBase
       prop :chart_data, type: Playbook::Props::Array,
                         default: [{ name: "Name", value: 0 }]
-      prop :custom_options, default: {}
       prop :style, type: Playbook::Props::Enum,
                    values: %w[solidgauge],
                    default: "solidgauge"
@@ -23,7 +22,7 @@ module Playbook
       prop :max, type: Playbook::Props::Numeric, default: 100
       prop :colors, type: Playbook::Props::Array, default: []
 
-      def standard_options
+      def chart_options
         {
           id: id,
           chartData: chart_data,
@@ -44,10 +43,6 @@ module Playbook
         }
       end
 
-      def chart_options
-        standard_options.deep_merge(custom_options)
-      end
-
       def classname
         generate_classname("pb_gauge_kit")
       end