playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216 → 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3930

data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts

@@ -1,4 +1 @@
-declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' {
-    const intlTelInput: any;
-    export default intlTelInput;
-}
+declare module 'intl-tel-input'

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -21,7 +21,7 @@ import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import { uniqueId } from 'lodash';
 
-type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
@@ -79,7 +79,6 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
-    width,
     targetId,
   } = props;
 
@@ -98,8 +97,7 @@ const Popover = (props: PbPopoverProps) => {
       maxHeight ? { maxHeight: maxHeight } : {},
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {},
-      width ? { width: width } : {}
+      minWidth ? { minWidth: minWidth } : {}
     );
   };
   const ariaProps = buildAriaProps(aria);
@@ -169,7 +167,6 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     maxWidth,
     minHeight,
     minWidth,
-    width,
   } = props;
 
   useEffect(() => {
@@ -219,7 +216,6 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         placement={placement}
         referenceElement={referenceElement}
         targetId={targetId}
-        width={width}
         zIndex={zIndex}
         {...props}
     >

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb

@@ -14,7 +14,7 @@
         trigger_element_id: "regular-popover-1",
         tooltip_id: "tooltip-1",
         offset: true,
-        position: "top",
+        position: "top"
     }) do %>
         I'm a popover. I can show content of any size.
     <% end %>

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -12,7 +12,6 @@ module Playbook
       prop :max_width
       prop :min_width
       prop :min_height
-      prop :width
       prop :z_index, type: Playbook::Props::String
       prop :offset, type: Playbook::Props::Boolean, default: false
       prop :close_on_click, type: Playbook::Props::Enum,
@@ -37,12 +36,11 @@ module Playbook
         out += "max-width: #{max_width}; " if max_width.present?
         out += "min-height: #{min_height}; " if min_height.present?
         out += "min-width: #{min_width};" if min_width.present?
-        out += "width: #{width};" if width.present?
         out
       end
 
       def width_height_class_helper
-        "overflow_handling" if max_height || max_width || width
+        "overflow_handling" if max_height || max_width
       end
 
       def data

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -10,24 +10,6 @@
 $pb_selectable_card_indicator_size: 22px;
 $pb_selectable_card_border: 2px;
 
-$pb_selectable_space_classes: (
-  xxs: $space_xxs,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-);
-$pb_selectable_paddings: (
-  p: "padding",
-  pr: "padding-right",
-  pl: "padding-left",
-  pt: "padding-top",
-  pb: "padding-bottom",
-  px: ("padding-left", "padding-right"),
-  py: ("padding-top", "padding-bottom")
-);
-
 [class^=pb_selectable_card_kit] {
   display: block;
   margin-bottom: 0;
@@ -46,6 +28,7 @@ $pb_selectable_paddings: (
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
+    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -91,7 +74,6 @@ $pb_selectable_paddings: (
 
         position: relative;
         @include pb_card_selected;
-        padding: calc(#{$space_sm} - 1px);
         transition-property: none;
         transition-duration: 0s;
 
@@ -106,54 +88,6 @@ $pb_selectable_paddings: (
           background-color: $royal;
         }
       }
-
-      // Selected card has 1px more border
-      // Remove 1px so content does not "jump"
-      @each $position_name,
-      $position in $pb_selectable_paddings {
-        @each $space_name,
-        $space in $pb_selectable_space_classes {
-          ~ label.#{$position_name}_#{$space_name} {
-            @if type-of($position)=="list" {
-              @each $coordinate in $position {
-                #{$coordinate}: calc(#{$space} - 1px) !important;
-              }
-            }
-
-            @else {
-              #{$position}: calc(#{$space} - 1px) !important;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &[class*=_display_input] {
-    input[type="checkbox"],
-    input[type="radio"] {
-      &:checked {
-        ~label {
-          border-width: $pb_card_border_width;
-          outline: 1px solid $primary;
-        }
-
-      }
-    }
-
-    > label {
-      outline: 1px solid transparent;
-      padding: $space_sm;
-    }
-
-    &.dark {
-      input[type="checkbox"],
-      input[type="radio"] {
-        &:checked ~ label {
-          border-width: $pb_card_border_width;
-          outline: 1px solid $primary;
-        }
-      }
     }
   }
 

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -66,7 +66,6 @@ const SelectableCard = (props: SelectableCardProps) => {
       'checked': checked,
       'disabled': disabled,
       'enabled': !disabled,
-      'display_input': variant === 'displayInput',
     }),
   { error },
   dark ? 'dark' : '',

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -25,7 +25,7 @@
           <% end %>
           <div class="separator"></div>
           <div class="psuedo_separator"></div>
-          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -25,7 +25,7 @@ module Playbook
 
       def classname
         [
-          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class, display_input_class),
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
           error_class,
           dark_props,
         ].compact.join(" ")
@@ -79,10 +79,6 @@ module Playbook
       def error_class
         error ? "error" : nil
       end
-
-      def display_input_class
-        variant == "display_input" ? "display_input" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -1,118 +1,10 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-
-import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
-import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
-import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import treemap from 'highcharts/modules/treemap'
-import { merge } from 'lodash'
-
-type TreemapChartProps = {
-  chartData: {
-    name: string;
-    parent?: string | number;
-    value: number;
-    color?: string;
-    id?: string | number;
-  }[];
-  className?: string;
-  colors: string[];
-  customOptions?: Partial<Highcharts.Options>;
-  dark?: boolean;
-  drillable: boolean;
-  grouped: boolean;
-  height?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id: number | string;
-  title?: string;
-  tooltipHtml: string;
-  type?: string;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
-};
-
-const TreemapChart = ({
-  aria = {},
-  data = {},
-  chartData,
-  colors,
-  customOptions = {},
-  dark = false,
-  drillable = false,
-  grouped = false,
-  height,
-  htmlOptions = {},
-  id,
-  title = "",
-  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
-  type = "treemap",
-  ...props
-}: TreemapChartProps): React.ReactElement => {
-  
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };  
-  treemap(Highcharts)
-  setupTheme();  
-
-  const staticOptions = {
-    title: {
-      text: title,
-    },
-    chart: {
-      height: height,
-      type: type,
-    },
-    credits: false,
-    series: [
-      {
-        data: chartData,
-      },
-    ],
-    plotOptions: {
-      treemap: {
-        tooltip: {
-          pointFormat: tooltipHtml,
-        },
-        allowTraversingTree: drillable,
-        colorByPoint: !grouped,
-        colors:
-          colors !== undefined && colors.length > 0
-            ? mapColors(colors)
-            : highchartsTheme.colors,
-      },
-    },
-  };
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
+import React from 'react';
 
+const TreemapChart: React.FC = () => {
   return (
-    <HighchartsReact
-        containerProps={{
-          className: classnames(globalProps(props), "pb_treemap_chart"),
-          id: id,
-          ...ariaProps,
-          ...dataProps,
-          ...htmlProps
-      }}
-        highcharts={Highcharts}
-        options={options}
-    />
+    <div>
+      This is a simple div component.
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js

@@ -19,7 +19,7 @@ afterEach(() => {
 
 const testId = 'treemapchart1';
 
-test('uses exact classname', () => {
+test.skip('uses exact classname', () => {
   const data = [
     {
       name: "Pepperoni",

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -136,15 +136,12 @@ const Typeahead = ({
     }
   }
 
-  const filteredProps: TypeaheadProps = {...props}
-  delete filteredProps.truncate
-
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
     `mb_${marginBottom}`,
-    globalProps(filteredProps),
+    globalProps(props),
     className
   )
 

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -16,7 +16,7 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate } = props.selectProps
+  const { dark, multiKit, pillColor } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -51,7 +51,6 @@ const MultiValue = (props: Props) => {
             name={label}
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
-            truncate={truncate}
             {...props}
         />
       }
@@ -65,7 +64,6 @@ const MultiValue = (props: Props) => {
             name=''
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
-            truncate={truncate}
             {...props}
         />
       }

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -65,10 +65,10 @@ module Playbook
       def typeahead_react_options
         base_options = {
           className: classname,
+          pillColor: pill_color,
           dark: dark,
           defaultValue: default_options,
           error: error,
-          htmlOptions: html_options,
           id: id,
           inline: inline,
           isMulti: is_multi,
@@ -77,10 +77,8 @@ module Playbook
           multiKit: multi_kit,
           name: name,
           options: options,
-          pillColor: pill_color,
           placeholder: placeholder,
           plusIcon: plus_icon,
-          truncate: truncate,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -1,7 +1,4 @@
 export default [
-  "minHeight",
-  "maxHeight",
-  "height",
   "left",
   "bottom",
   "right",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -170,24 +170,12 @@ type ZIndex = {
   zIndex?: ZIndexType,
 } | ZIndexResponsiveType
 
-type Height = {
-  height?: string 
-}
-
-type MaxHeight = {
-  maxHeight?: string
-}
-
-type MinHeight = {
-  minHeight?: string
-}
-
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -510,22 +498,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
-  },
-
-}
-
-const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
-  heightProps: ({ height }: Height) => {
-    return height ? { height } : {}; 
-  },
-
-  maxHeightProps: ({ maxHeight }: MaxHeight) => {
-    return maxHeight ? { maxHeight } : {};
-  },
-
-  minHeightProps: ({ minHeight }: MinHeight) => {
-    return minHeight ? { minHeight } : {}; 
-  },
+  }
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -537,16 +510,6 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
   }).filter((value) => value?.length > 0).join(" ")
 }
 
-// New function for inline styles
-export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
-  const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
-    const result = PROP_INLINE_CATEGORIES[key](props);
-    return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
-  }, {});
-
-  return styles; // Return the styles object directly
-}
-
 
 export const deprecatedProps = (): void => {
   // if (process.env.NODE_ENV === 'development') {