playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098 → 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3930

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

@@ -7,7 +7,6 @@ examples:
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
-  - multi_level_select_reset: Reset Selection
 
   react:
   - multi_level_select_default: Default
@@ -16,6 +15,3 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
   - multi_level_select_color: With Pills (Custom Color)
-  - multi_level_select_with_children: Checkboxes With Children
-  - multi_level_select_with_children_with_radios: Single Select With Children
-

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

@@ -4,5 +4,3 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
 export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
-export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
-export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'

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,26 +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;
-            }
-          }
-        }
-      }
     }
   }
 

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?