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

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

@@ -1,221 +1,10 @@
-import React, { useEffect, useState } from "react";
-import classnames from "classnames";
-import HighchartsReact from "highcharts-react-official";
-import highchartsMore from "highcharts/highcharts-more";
-
-import Highcharts from "highcharts";
-
-import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-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";
-  aria: { [key: string]: string };
-  chartData?: [];
-  children?: Node;
-  className?: string;
-  colors?: string[];
-  customOptions?: Partial<Highcharts.Options>;
-  dark?: boolean;
-  data?: {[key: string]: string},
-  dataLabelHtml?: string;
-  dataLabels?: boolean;
-  height?: string;
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  innerSize?: "sm" | "md" | "lg" | "none";
-  legend?: boolean;
-  maxPointSize?: number;
-  minPointSize?: number;
-  rounded?: boolean;
-  startAngle?: number;
-  style?: string;
-  title?: string;
-  tooltipHtml: string;
-  useHtml?: boolean;
-  zMin?: number;
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  borderColor?: string;
-  borderWidth?: number;
-};
-
-
-
-const alignBlockElement = (event: any) => {
-  const itemToMove = document.querySelector<HTMLElement>(
-    `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
-  );
-  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
-
-  if (itemToMove !== null && chartContainer !== null) {
-    itemToMove.style.height = `${event.target.chartHeight}px`;
-    itemToMove.style.width = `${event.target.chartWidth}px`;
-    if (chartContainer.firstChild !== null) {
-      chartContainer.firstChild.before(itemToMove);
-    }
-  }
-};
-
-const CircleChart = ({
-  align = "center",
-  aria = {},
-  rounded = false,
-  borderColor = rounded ? null : "",
-  borderWidth = rounded ? 20 : null,
-  chartData,
-  children,
-  className,
-  colors = [],
-  customOptions = {},
-  dark = false,
-  data = {},
-  dataLabelHtml = "<div>{point.name}</div>",
-  dataLabels = false,
-  height,
-  htmlOptions = {},
-  id,
-  innerSize = "md",
-  legend = false,
-  maxPointSize = null,
-  minPointSize = null,
-  startAngle = null,
-  style = "pie",
-  title,
-  tooltipHtml,
-  useHtml = false,
-  zMin = null,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}: CircleChartProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-  highchartsMore(Highcharts);
-
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  Highcharts.setOptions({
-    tooltip: {
-      headerFormat: null,
-      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
-      useHTML: useHtml,
-    },
-  });
-
-  const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
-  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
-    innerSizes[size];
-
-
-  const filteredProps: any = {...props};
-  delete filteredProps.verticalAlign;
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj: any) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-
-    const staticOptions = {
-      title: {
-        text: title,
-      },
-      chart: {
-        height: height,
-        type: style,
-        events: {
-          render: (event: any) => alignBlockElement(event),
-          redraw: (event: any) => alignBlockElement(event),
-        },
-      },
-
-      legend: {
-        align: align,
-        verticalAlign: verticalAlign,
-        layout: layout,
-        x: x,
-        y: y,
-      },
-      plotOptions: {
-        pie: {
-          colors:
-            colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
-          dataLabels: {
-            enabled: dataLabels,
-            connectorShape: "straight",
-            connectorWidth: 3,
-            format: dataLabelHtml,
-          },
-          showInLegend: legend,
-        },
-      },
-      series: [
-        {
-          minPointSize: minPointSize,
-          maxPointSize: maxPointSize,
-          innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
-          data: formattedChartData,
-          zMin: zMin,
-          startAngle: startAngle,
-          borderWidth: borderWidth,
-          borderColor: borderColor,
-        },
-      ],
-      credits: false,
-    };
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
-
+import React from 'react';
 
+const CircleChart: React.FC = () => {
   return (
-    <>
-      {children ? (
-        <div id={`wrapper-circle-chart-${id}`}>
-          <HighchartsReact
-              containerProps={{
-              className: classnames("pb_circle_chart", globalProps(filteredProps)),
-              id: id,
-              ...ariaProps,
-              ...dataProps,
-              ...htmlProps,
-            }}
-              highcharts={Highcharts}
-              options={options}
-          />
-          <div className="pb-circle-chart-block">{children}</div>
-        </div>
-      ) : (
-        <HighchartsReact
-            containerProps={{
-            className: classnames("pb_circle_chart", globalProps(filteredProps)),
-            id: id,
-            ...ariaProps,
-            ...dataProps,
-            ...htmlProps,
-          }}
-            highcharts={Highcharts}
-            options={options}
-        />
-      )}
-    </>
+    <div>
+      This is a simple div component.
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'circlechart1';
 
-test('uses exact classname', () => {
+test.skip('uses exact classname', () => {
   const data = [
     {
       name: 'Waiting for Calls',

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Modal from "react-modal";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps, globalInlineProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,8 +91,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
-  const dynamicInlineProps = globalInlineProps(props); 
-
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -186,7 +184,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
-            style={{ content: dynamicInlineProps }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -195,7 +192,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
-              
               >
                 <Flex align="center"
                     orientation="column"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb

@@ -1,36 +1,13 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-loading",
-    size: "sm",
-    title: "Loading Example",
-    text: "Make a loading request?",
-    cancel_button: "Cancel Button",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-loading", 
+    size: "sm", 
+    title: "Loading Exmaple", 
+    text: "Make a loading request?", 
+    cancel_button: "Cancel Button", 
     cancel_button_id: "cancel-button-loading",
-    confirm_button: "Okay",
+    confirm_button: "Okay", 
     confirm_button_id: "confirm-button-loading",
     loading: true,
 }) %>
-
-<script>
-    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
-    if (loadingButton) {
-        loadingButton.addEventListener("click", function() {
-        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
-        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
-        let currentClass = okayLoadingButton.className;
-        let cancelClass = cancelButton ? cancelButton.className : "";
-
-        setTimeout(function() {
-            okayLoadingButton.disabled = false;
-            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
-
-            if (cancelButton) {
-            cancelButton.disabled = false;
-            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
-            }
-        }, 5000);
-
-        });
-  }
-</script>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md

@@ -1 +1,3 @@
 Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
+
+Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -69,21 +69,15 @@
         padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
-          background-color: $bg_light;
+          background-color: $border_light;
         }
 
         &[class*="_focused"] {
-          background-color: $bg_light;
+          background-color: $border_light;
         }
 
         &[class*="_list"] {
           border-bottom: 1px solid $border_light;
-
-          &:hover, &:focus {
-            .pb_body_kit {
-              color: $primary;
-            }
-          }
         }
         &[class*="selected"] {
           background-color: $primary;
@@ -93,7 +87,7 @@
             color: $white !important;
           }
           &:hover {
-            background-color: $product_1_background !important;
+            background-color: $primary !important;
           }
         }
       }
@@ -131,81 +125,6 @@
     }
   }
 
-  &.separators_hidden {
-    .dropdown_wrapper {
-      .pb_dropdown_container {
-
-        [class*="pb_dropdown_option"] {
-          border: none;
-        }
-      }
-    }
-  }
-
-  &.subtle {
-    .dropdown_wrapper {
-      .pb_dropdown_container {
-        
-        [class*="pb_dropdown_option"]:first-child {
-          margin-top: $space_xs;
-        }
-
-        [class*="pb_dropdown_option"]:last-child {
-          margin-bottom: $space_xs;
-        }
-
-        [class*="pb_dropdown_option"] {
-          margin: $space_xs;
-          padding: $space_xs;
-          border-radius: $border_radius_md;
-          border-bottom: none;
-          position: relative;
-        
-          &::after {
-            content: "";
-            position: absolute;
-            left: -$space_xs;
-            right: -$space_xs;
-            bottom: -4.5px;
-            height: 1px;
-            background: $border_light;
-          }
-        }
-        
-        [class*="pb_dropdown_option"]:last-child::after {
-          display: none; 
-        }
-      }
-    }
-  
-    &.separators_hidden {
-      .dropdown_wrapper {
-        .pb_dropdown_container {
-          [class*="pb_dropdown_option"]:first-child {
-            margin-top: $space_xs;
-          }
-  
-          [class*="pb_dropdown_option"]:last-child {
-            margin-bottom: $space_xs;
-          }
-
-          [class*="pb_dropdown_option"] {
-            padding: $space_xxs $space_xs;
-            margin: $space_xxs $space_xs;
-     
-            &::after {
-              height: 0px;
-            }
-
-            &[class*="selected"] {
-              border-bottom: none;
-            }
-          }
-        }
-      }
-    }
-  }
-
   &.dark {
     .dropdown_wrapper {
       [class*="dropdown_trigger_wrapper"] {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -35,19 +35,10 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
-    separators: boolean;
     triggerRef?: any;
-    variant?: "default" | "subtle";
 };
 
-interface DropdownComponent
-    extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
-    Option: typeof DropdownOption;
-    Trigger: typeof DropdownTrigger;
-    Container: typeof DropdownContainer;
-}
-
-const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
+const Dropdown = (props: DropdownProps) => {
     const {
         aria = {},
         autocomplete = false,
@@ -64,20 +55,15 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
         label,
         onSelect,
         options,
-        separators = true,
-        triggerRef,
-        variant = "default",
+        triggerRef
     } = props;
 
     const ariaProps = buildAriaProps(aria);
     const dataProps = buildDataProps(data);
     const htmlProps = buildHtmlProps(htmlOptions);
-    const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown"),
         globalProps(props),
-        variant,
-        separatorsClass,
         className
     );
 
@@ -139,7 +125,7 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });
+    });    
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -189,14 +175,6 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
         dark
     });
 
-    useImperativeHandle(ref, () => ({
-        clearSelected: () => {
-            setSelected({});
-            setFilterItem("");
-            setIsDropDownClosed(true);
-            onSelect && onSelect(null);
-        },
-    }));
 
     return (
         <div {...ariaProps}
@@ -280,9 +258,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
             </DropdownContext.Provider>
         </div>
     )
-}) as DropdownComponent
+};
 
-Dropdown.displayName = "Dropdown";
 Dropdown.Option = DropdownOption;
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Container = DropdownContainer;

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

@@ -1,7 +1,6 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
@@ -11,11 +10,9 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_separators_hidden: Separators Hidden
 
   react:
   - dropdown_default: Default
-  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
@@ -25,8 +22,6 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_clear_selection: Clear Selection
-  - dropdown_separators_hidden: Separators Hidden
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -12,6 +12,3 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
-export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
-export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
-export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -13,18 +13,13 @@ module Playbook
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default subtle],
-                     default: "default"
-      prop :separators, type: Playbook::Props::Boolean,
-                        default: true
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
       end
 
       def classname
-        generate_classname("pb_dropdown", variant, separators_class, separator: " ")
+        generate_classname("pb_dropdown")
       end
 
     private
@@ -37,10 +32,6 @@ module Playbook
         default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
       end
 
-      def separators_class
-        separators ? "" : "separators_hidden"
-      end
-
       def options_with_blank
         blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
       end

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
   const focusedClass = isFocused && "focused";
 
   const selectedClass = `${
-    selected?.label === option.label
+    selected.label === option.label
       ? "selected"
       : "list"
   }`;

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     !autocomplete && "select_only"
   );
 
-  const customDisplayPlaceholder = selected?.label ? (
+  const customDisplayPlaceholder = selected.label ? (
     <b>{selected.label}</b>
   ) : autocomplete ? (
     ""
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
 
-  const defaultDisplayPlaceholder = selected?.label
+  const defaultDisplayPlaceholder = selected.label
     ? selected.label
     : autocomplete
     ? ""

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx

@@ -34,7 +34,6 @@ const FilterDouble = ({
   maxHeight,
   minWidth,
   placement,
-  popoverProps,
   ...bgProps
 }: FilterDoubleProps): React.ReactElement => (
   <FilterBackground
@@ -50,7 +49,6 @@ const FilterDouble = ({
           maxHeight={maxHeight}
           minWidth={minWidth}
           placement={placement}
-          popoverProps={popoverProps}
       >
           {children}
       </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -33,7 +33,6 @@ const FilterSingle = ({
   maxHeight,
   minWidth,
   placement,
-  popoverProps,
   ...bgProps
 }: FilterSingleProps): React.ReactElement => {
   return (
@@ -53,7 +52,6 @@ const FilterSingle = ({
                 maxHeight={maxHeight}
                 minWidth={minWidth}
                 placement={placement}
-                popoverProps={popoverProps}
             >
             {children}
             </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode, useState } from 'react'
 
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
-import { GenericObject } from '../../types'
 
 type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
@@ -10,9 +9,8 @@ type FiltersPopoverProps = {
   maxHeight?: string,
   minWidth?: string,
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
-  popoverProps?: GenericObject,
 }
-const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start", popoverProps }: FiltersPopoverProps): React.ReactElement => {
+const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -35,7 +33,6 @@ const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bott
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}
-        {...popoverProps}
     >
         <div className="pb-form">
           {typeof children === 'function'