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

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

@@ -13,7 +13,6 @@ type ResultsCountProps = {
 const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
   
   const resultTitle = () => {
-    if (results == null) return null
     return (
       <TitleCount
           align="center"
@@ -25,7 +24,6 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
-    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -37,13 +35,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const displayResultsCount = () => {
-    if (results != null && results >=0 && title) {
+    if (results && title) {
       return (
         <>
           {resultTitle()}
         </>
       )
-    } else if (results !=null && results >=0 ) {
+    } else if (results) {
       return (
         <>
           {justResults()}

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={0}
+          results={1}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line

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

@@ -10,7 +10,6 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
-  - filter_popover_props: Popover Props
 
   react:
   - filter_default: Default
@@ -22,5 +21,3 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
-  - filter_popover_props: Popover Props
-

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

@@ -7,4 +7,3 @@ export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
-export { default as FilterPopoverProps } from './_filter_popover_props.jsx'

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -71,13 +71,13 @@
     <% end %>
 
     <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }.merge(object.popover_props)) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
         <%= content %>
       <% end %>
     <%end%>
 
     <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}.merge(object.popover_props)) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -15,8 +15,6 @@ module Playbook
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                        default: "bottom-start"
-      prop :popover_props, type: Playbook::Props::HashProp,
-                           default: {}
 
       def classname
         generate_classname("pb_filter_kit").rstrip

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
@@ -61,7 +61,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const dynamicInlineProps = globalInlineProps(props)
 
 
   return (
@@ -84,7 +83,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
-        style={dynamicInlineProps}
         {...dataProps}
         {...htmlProps}
     >

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -35,20 +35,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
-  const dynamicInlineProps = globalInlineProps(props)
-  const combinedStyles = {
-    ...fixedStyle,
-    ...dynamicInlineProps
-  }
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
-
   return (
     <div
         {...htmlProps}
         className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
-        style={combinedStyles}
+        style={fixedStyle}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,5 +1,8 @@
-<%= pb_content_tag(:div, 
-  style: object.inline_styles
-) do %> 
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    style: object.style_value,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -20,13 +20,8 @@ module Playbook
         generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
-      def inline_styles
-        styles = []
-        styles << "flex-basis: #{fixed_size};" if fixed_size.present?
-        styles << "height: #{height};" if height.present?
-        styles << "min-height: #{min_height};" if min_height.present?
-        styles << "max-height: #{max_height};" if max_height.present?
-        styles.join(" ")
+      def style_value
+        "flex-basis: #{fixed_size};" if fixed_size.present?
       end
 
     private

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

@@ -3,4 +3,3 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
-  - form_form_with_loading: Default + Loading

data/app/pb_kits/playbook/pb_form/form.rb

@@ -7,7 +7,6 @@ module Playbook
                          type: Playbook::Props::Base
       prop :form_system_options, deprecated: "Use options instead",
                                  type: Playbook::Props::Base
-      prop :loading, type: Playbook::Props::Boolean, default: false
       prop :options, type: Playbook::Props::Base
       prop :validate, type: Playbook::Props::Boolean, default: false
 
@@ -23,7 +22,6 @@ module Playbook
           aria: aria,
           class: classname,
           data: data,
-          loading: loading,
           validate: validate,
         }.merge(prop(:options) || prop(:form_system_options) || {})
       end

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -47,13 +47,9 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
-
-  const filteredProps: FormPillProps = {...props}
-  delete filteredProps.truncate
-
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
-    globalProps(filteredProps),
+    globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
@@ -81,7 +77,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
-              truncate={props.truncate}
           />
         </>
       )}
@@ -97,7 +92,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
-              truncate={props.truncate}
           />
           <Icon
               className="pb_form_pill_icon"
@@ -117,7 +111,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_tag"
               size={4}
               text={text}
-              truncate={props.truncate}
           />
         </>
       )}
@@ -126,7 +119,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
             className="pb_form_pill_tag"
             size={4}
             text={text}
-            truncate={props.truncate}
         />
       )}
       <div

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

@@ -3,7 +3,6 @@ examples:
   rails:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
-  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -12,7 +11,6 @@ examples:
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
-  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -4,4 +4,3 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
-export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'

data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx

@@ -1,70 +1,9 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
-import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts/highcharts-gantt";
-
-import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
-
-type GanttChartProps = {
-  aria?: { [key: string]: string };
-  className?: string;
-  customOptions: Partial<Highcharts.Options>;
-  dark?: boolean;
-  data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-};
-
-const GanttChart = (props: GanttChartProps) => {
-  const {
-    aria = {},
-    className,
-    customOptions = {},
-    dark = false,
-    data = {},
-    htmlOptions = {},
-    id,
-  } = props;
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(
-    buildCss("pb_gantt_chart"),
-    globalProps(props),
-    className
-  );
-
-  const [options, setOptions] = useState<Highcharts.Options | undefined>(customOptions);
-
-  useEffect(() => {
-    setOptions(customOptions);
-  }, [customOptions]);
-
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
+import React from 'react';
 
+const GanttChart: React.FC = () => {
   return (
     <div>
-      <HighchartsReact
-          constructorType={"ganttChart"}
-          containerProps={{
-            className: classnames(globalProps(props), classes),
-            id: id,
-            ...ariaProps,
-            ...dataProps,
-            ...htmlProps,
-          }}
-          highcharts={Highcharts}
-          options={options}
-      />
+      This is a simple div component.
     </div>
   );
 };

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

@@ -1,208 +1,10 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-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 highchartsMore from "highcharts/highcharts-more";
-import solidGauge from "highcharts/modules/solid-gauge";
-import defaultColors from "../tokens/exports/_colors.module.scss";
-import typography from "../tokens/exports/_typography.module.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;
-  fullCircle?: boolean;
-  height?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string;
-  max?: number;
-  min?: number;
-  prefix?: string;
-  showLabels?: boolean;
-  style?: string;
-  suffix?: string;
-  title?: string;
-  tooltipHtml?: string;
-  colors: string[];
-  minorTickInterval?: number;
-  circumference: number[];
-};
-
-const Gauge = ({
-  aria = {},
-  chartData,
-  customOptions = {},
-  dark = false,
-  data = {},
-  disableAnimation = false,
-  fullCircle = false,
-  height = null,
-  htmlOptions = {},
-  id,
-  max = 100,
-  min = 0,
-  prefix = "",
-  showLabels = false,
-  style = "solidgauge",
-  suffix = "",
-  title = "",
-  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-    "<b>{point.y}</b>",
-  colors = [],
-  minorTickInterval = null,
-  circumference = fullCircle ? [0, 360] : [-100, 100],
-  ...props
-}: GaugeProps): React.ReactElement => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-  highchartsMore(Highcharts);
-  solidGauge(Highcharts);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  //set tooltip directly to prevent being overriden by Highcharts defaults
-  Highcharts.setOptions({
-    tooltip: {
-      pointFormat: tooltipHtml,
-      followPointer: true,
-    },
-  });
-
-  const css = buildCss({
-    pb_gauge_kit: true,
-  });
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj: GenericObject) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-
-    const staticOptions = {
-      chart: {
-        events: {
-          load() {
-            setTimeout(this.reflow.bind(this), 0);
-          },
-        },
-        type: style,
-        height: height,
-      },
-      title: {
-        text: title,
-      },
-      yAxis: {
-        min: min,
-        max: max,
-        lineWidth: 0,
-        tickWidth: 0,
-        minorTickInterval: minorTickInterval,
-        tickAmount: 2,
-        tickPositions: [min, max],
-        labels: {
-          y: 26,
-          enabled: showLabels,
-        },
-      },
-      credits: false,
-      series: [
-        {
-          data: formattedChartData,
-        },
-      ],
-      pane: {
-        center: ["50%", "50%"],
-        size: "90%",
-        startAngle: circumference[0],
-        endAngle: circumference[1],
-        background: {
-          borderWidth: 20,
-          innerRadius: "90%",
-          outerRadius: "90%",
-          shape: "arc",
-          className: "gauge-pane",
-        },
-      },
-      colors:
-        colors !== undefined && colors.length > 0
-          ? mapColors(colors)
-          : highchartsTheme.colors,
-      plotOptions: {
-        series: {
-          animation: !disableAnimation,
-        },
-        solidgauge: {
-          borderColor:
-            colors !== undefined && colors.length === 1
-              ? mapColors(colors).join()
-              : highchartsTheme.colors[0],
-          borderWidth: 20,
-          radius: 90,
-          innerRadius: "90%",
-          dataLabels: {
-            borderWidth: 0,
-            color: defaultColors.text_lt_default,
-            enabled: true,
-            format:
-              `<span class="prefix">${prefix}</span>` +
-              '<span class="fix">{y:,f}</span>' +
-              `<span class="suffix">${suffix}</span>`,
-            style: {
-              fontFamily: typography.font_family_base,
-              fontWeight: typography.regular,
-              fontSize: typography.heading_2,
-            },
-            y: -26,
-          },
-        },
-      },
-    };
-
-    setOptions(merge(staticOptions, customOptions));
-
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix) => {
-        prefix.setAttribute("y", "28");
-      });
-      document
-        .querySelectorAll(".fix")
-        .forEach((fix) => fix.setAttribute("y", "38"));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chartData]);
+import React from 'react';
 
+const Gauge: React.FC = () => {
   return (
-    <HighchartsReact
-        containerProps={{
-        className: classnames(css, globalProps(props)),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps,
-      }}
-        highcharts={Highcharts}
-        options={options}
-    />
+    <div>
+      This is a simple div component.
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_gauge/gauge.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'gauge1';
 
-test('uses exact classname', () => {
+test.skip('uses exact classname', () => {
   const data = [
     { name: 'Name', value: 45 },
   ]