playbook_ui 14.19.0.pre.alpha.play2125phonenumberinputcountrysearcherrorstylefix7698 → 14.19.0.pre.rc.0

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

@@ -0,0 +1,3 @@
+.pb_gantt_chart {
+
+}

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

@@ -0,0 +1,72 @@
+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();
+
+  return (
+    <div>
+      <HighchartsReact
+          constructorType={"ganttChart"}
+          containerProps={{
+            className: classnames(globalProps(props), classes),
+            id: id,
+            ...ariaProps,
+            ...dataProps,
+            ...htmlProps,
+          }}
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GanttChart;

data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import GanttChart from '../../pb_gantt_chart/_gantt_chart'
+
+const mockOptions = {
+  title: {
+    text: "Simple Gantt Chart",
+  },
+
+  xAxis: [
+    {
+      min: Date.UTC(2014, 10, 17),
+      max: Date.UTC(2014, 10, 30),
+    },
+  ],
+
+  series: [
+    {
+      name: "Project 1",
+      data: [
+        {
+          name: "Start prototype",
+          start: Date.UTC(2014, 10, 18),
+          end: Date.UTC(2014, 10, 25),
+        },
+        {
+          name: "Develop",
+          start: Date.UTC(2014, 10, 20),
+          end: Date.UTC(2014, 10, 25),
+        },
+        {
+          name: "Run acceptance tests",
+          start: Date.UTC(2014, 10, 23),
+          end: Date.UTC(2014, 10, 26),
+        },
+        {
+          name: "Test prototype",
+          start: Date.UTC(2014, 10, 27),
+          end: Date.UTC(2014, 10, 29),
+        },
+      ],
+    },
+  ],
+};
+
+const GanttChartDefault = (props) => (
+  <div>
+    <GanttChart customOptions={mockOptions} 
+        {...props} 
+    />
+  </div>
+);
+
+export default GanttChartDefault;

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

@@ -0,0 +1,7 @@
+examples:
+  
+  
+  react:
+  - gantt_chart_default: Default
+  
+  

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

@@ -0,0 +1 @@
+export { default as GanttChartDefault } from './_gantt_chart_default.jsx'

data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx

@@ -0,0 +1,19 @@
+// import { renderKit } from '../utilities/test-utils'
+
+// import GanttChart from './_gantt_chart'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  // const props = {
+  //   data: { testid: 'default' }
+  // }
+
+
+  // const kit = renderKit(GanttChart , props)
+  // expect(kit).toBeInTheDocument()
+})
+

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

@@ -11,7 +11,6 @@ examples:
 
   react:
   - line_graph_default: Default
-  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,4 +4,3 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
-export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -13,7 +13,6 @@ import MessageMention from './_message_mention'
 
 type MessageProps = {
   aria: { [key: string]: string },
-  avatarGrayscale?: boolean,
   avatarName?: string,
   avatarStatus?: "away" | "offline" | "online",
   avatarUrl?: string,
@@ -33,7 +32,6 @@ type MessageProps = {
 const Message = (props: MessageProps) => {
   const {
     aria = {},
-    avatarGrayscale = false,
     avatarName,
     avatarStatus = null,
     avatarUrl,
@@ -73,7 +71,6 @@ const Message = (props: MessageProps) => {
     >
       {shouldDisplayAvatar &&
         <Avatar
-            grayscale={avatarGrayscale}
             imageUrl={avatarUrl}
             name={avatarName}
             size="xs"

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

@@ -5,14 +5,12 @@ examples:
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
-  - message_grayscale: Grayscale Avatar
 
   react:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
-  - message_grayscale: Grayscale Avatar
 
   swift:
    - message_default_swift: Default

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

@@ -2,4 +2,3 @@ export { default as MessageDefault } from './_message_default.jsx'
 export { default as MessageTimestamp } from './_message_timestamp.jsx'
 export { default as MessageHover } from './_message_hover.jsx'
 export { default as MessageMentions } from './_message_mentions.jsx'
-export { default as MessageGrayscale } from './_message_grayscale.jsx'

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -4,8 +4,7 @@
         name: object.avatar_name,
         size: "xs",
         image_url: object.avatar_url,
-        status: object.avatar_status,
-        grayscale: object.avatar_grayscale
+        status: object.avatar_status
       }) %>
     <% end %>
     <div class="content_wrapper">

data/app/pb_kits/playbook/pb_message/message.rb

@@ -6,7 +6,6 @@ module Playbook
       prop :avatar_name
       prop :avatar_status
       prop :avatar_url
-      prop :avatar_grayscale, type: Playbook::Props::Boolean, default: false
       prop :label
       prop :message
       prop :timestamp

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -78,8 +78,7 @@ $overlay_colors: (
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
-    & [class*="overflow_auto"],
-    .overlay_token_container {
+    & [class*="overflow_auto"] {
       &::-webkit-scrollbar {
         display: none !important;
       }

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
         <Flex
             columnGap="lg"
             orientation="row"
-            ref={ref}
+            ref={ref} 
         >
             {Array.from({ length: 15 }, (_, index) => (
                 <FlexItem key={index}>

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -30,7 +30,7 @@ const OverlayToken = (props: OverlayChildrenProps) => {
         if (container) {
             const { scrollLeft, scrollWidth, clientWidth } = container;
             const atStart = scrollLeft === 0;
-            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1; 
 
             setIsAtStart(atStart);
             setIsAtEnd(atEnd);
@@ -64,17 +64,16 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     return (
         <>
             <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
-            {dynamic ?
+            {dynamic ? 
                 <div
-                    className="overlay_token_container"
                     ref={scrollContainerRef}
                     style={{
-                        overflowX: 'auto',
+                        overflowX: 'auto',     
                     }}
                 >
                     {children}
                 </div>
-                :
+                : 
                     children
                 }
             {hasSubsequentOverlay &&

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -39,10 +39,7 @@ $flag-min-resolution: 192dpi;
     color: $charcoal;
   }
 
-  .iti__country-list {
-    min-width: $dropdown-min-width;
-  }
-  // iti-spacer-horizontal's default is 8px, or $space_xs
+  // iti-spacer-horizontal's default is 8px, or $space_xs 
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
   }
@@ -60,7 +57,7 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .dropdown_open:not(.error) {
+  .dropdown_open {
     .text_input {
       border-color: $primary !important;
     }
@@ -76,7 +73,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__divider {
-    border-bottom: 1px solid $border_light !important;
+    border-bottom: 1px solid $border_light !important;  
   }
 
   .iti__selected-country-primary {
@@ -96,7 +93,7 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     border-width: 0;
-    border-radius: $space_xxs;
+    border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -199,7 +196,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__dropdown-content {
-    border-radius: $space_xs;
+    border-radius: $space_xs; 
     border: 1px solid $border_light !important;
     position: absolute;
     top: 100%;
@@ -228,22 +225,12 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs;
+      border-radius: $space_xs; 
       border: 1px solid $border_dark !important;
-      .iti__search-input {
-        background-color: $bg_dark_card;
-        &:hover {
-          background-color: $bg_dark_card;
-        }
-        &:active,
-        &:focus {
-          background-color: $card_dark;
-        }
-      }
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;
+      border-bottom: 1px solid $border_dark !important;  
     }
 
     .iti__country-list {
@@ -278,7 +265,7 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
   }
-
+  
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -37,7 +37,6 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
-  countrySearch?: boolean,
 }
 
 enum ValidationError {
@@ -92,7 +91,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
-    countrySearch = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -244,7 +242,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
-      countrySearch: countrySearch,
+      countrySearch: false,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
       hiddenInput: hiddenInputs ? () => ({

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

@@ -9,7 +9,6 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
-  - phone_number_input_country_search: Country Search
 
   rails:
   - phone_number_input_default: Default
@@ -19,5 +18,4 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
-  - phone_number_input_country_search: Country Search
   

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

@@ -6,4 +6,3 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
-export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -25,8 +25,6 @@ module Playbook
                                 default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
-      prop :country_search, type: Playbook::Props::Boolean,
-                            default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -47,7 +45,6 @@ module Playbook
           preferredCountries: preferred_countries,
           required: required,
           value: value,
-          countrySearch: country_search,
         }
       end
     end

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -139,22 +139,3 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
 
     expect(input.value).toBe("555-555-5555");
 });
-
-test("should pass countrySearch prop to component", () => {
-    window.intlTelInput = jest.fn(() => ({
-      getSelectedCountryData: jest.fn(() => ({})),
-      isValidNumber: jest.fn(() => true),
-      getValidationError: jest.fn(() => 0),
-    }));
-    
-    const props = {
-      id: testId,
-      countrySearch: true,
-      data: { testid: 'phone-input-with-search' }
-    };
-  
-    render(<PhoneNumberInput {...props} />);
-    
-    const wrapper = screen.getByTestId('phone-input-with-search');
-    expect(wrapper).toBeInTheDocument();
-});

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

@@ -6,7 +6,6 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
-    - popover_append_to: Append To
 
   react:
     - popover_default: Default

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -13,15 +13,7 @@ export default class PbPopover extends PbEnhancedElement {
   }
 
   moveTooltip() {
-    let container: HTMLElement | null;
-
-    if (this.appendTo === "parent") {
-      container = this.element.parentElement;
-    } else if (this.appendTo) {
-      container = document.querySelector(this.appendTo);
-    }
-
-    (container || document.body).appendChild(this.tooltip);
+    document.querySelector('body').appendChild(this.tooltip)
   }
 
   connect() {
@@ -116,8 +108,4 @@ export default class PbPopover extends PbEnhancedElement {
   get closeOnClick() {
     return this.element.dataset.pbPopoverCloseOnClick
   }
-
-  get appendTo() {
-    return this.element.dataset.pbPopoverAppendTo;
-  }
 }

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

@@ -3,7 +3,6 @@
 module Playbook
   module PbPopover
     class Popover < Playbook::KitBase
-      prop :append_to, type: Playbook::Props::String, default: "body"
       prop :position, 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: "left"
@@ -48,7 +47,6 @@ module Playbook
 
       def data
         Hash(values[:data]).merge(
-          pb_popover_append_to: append_to,
           pb_popover_kit: true,
           pb_popover_position: position,
           pb_popover_trigger_element_id: trigger_element_id,

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -143,16 +143,6 @@
       select {
         font-size: 12px;
       }
-      .pb_select_kit_wrapper.error {
-        .pb_select_kit_caret {
-          top: 13.7px;
-        }
-      }
-    }
-    .pb_select_kit_wrapper.error {
-      .pb_select_kit_caret {
-        top: 16.2px;
-      }
     }
   }
 }

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  error: "Please make a valid selection",
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
 
   const Content = () => {
     return (
-      <Card
+      <Card 
           borderNone
           borderRadius="none"
           padding="md"
@@ -37,7 +37,7 @@ return (
 
         </Table.Head>
         <Table.Body>
-          <Table.Row collapsible
+          <Table.Row collapsible 
               collapsibleContent={<Content/>}
               toggleCellId="cell-1"
               {...props}
@@ -47,7 +47,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer"
+            <Table.Cell cursor="pointer" 
                 id="cell-1"
                 textAlign="right"
             >
@@ -59,7 +59,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible
+          <Table.Row collapsible 
               collapsibleContent={<Content/>}
               toggleCellId="cell-2"
               {...props}
@@ -69,7 +69,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer"
+            <Table.Cell cursor="pointer" 
                 id="cell-2"
                 textAlign="right"
             >
@@ -81,7 +81,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible
+          <Table.Row collapsible 
               collapsibleContent={<Content/>}
               toggleCellId="cell-3"
               {...props}
@@ -91,7 +91,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer"
+            <Table.Cell cursor="pointer" 
                 id="cell-3"
                 textAlign="right"
             >

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -55,7 +55,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
-
+  
   const [isCollapsed, setIsCollapsed] = useCollapsible(true);
 
   const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
@@ -83,14 +83,14 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
       target instanceof SVGElement &&
       (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
 
-        if (clickedCell || (clickedCell && isIconClick)) {
+        if (clickedCell || isIconClick) { 
       setIsCollapsed(!isCollapsed);
       }
     } else {
       setIsCollapsed(!isCollapsed);
     }
   };
-
+    
   return (
     <>
       {collapsible ? (
@@ -116,7 +116,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content
+                <Collapsible.Content 
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"
@@ -149,7 +149,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content
+                <Collapsible.Content 
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -71,8 +71,7 @@
     }
     &.error {
       .text_input_wrapper {
-        // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
-        input:not(.iti__search-input),
+        input,
         .text_input {
           border-color: $error_dark;
         }
@@ -103,8 +102,7 @@
       [class*="pb_body_kit"] {
         margin-top: $space_xs / 2;
       }
-      // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
-      input:not(.iti__search-input),
+      input,
       .text_input {
         border-color: $error;
       }