playbook_ui 15.3.0.pre.alpha.play262912095 → 15.3.0.pre.rc.0

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md

@@ -1 +1 @@
-The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.
+The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md

@@ -1 +1 @@
-All Nav variants' navItems accept our global Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!
+All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -2,4 +2,4 @@ The optional `layout` prop accepts the `position` and `size` of the overlay as a
 
 The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value is `full` (100%) by default, but accepts our spacing tokens([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react"
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildCss, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 import Highcharts from "highcharts"
 import HighchartsReact from "highcharts-react-official"
 
@@ -18,25 +18,23 @@ type PbBarGraphProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)};
 }
 
-const PbBarGraph = ( props: PbBarGraphProps): React.ReactElement => {
-const {
+const PbBarGraph = ({
   aria = {},
   data = {},
   id,
   htmlOptions = {},
   options,
-  className,
-} = props
+  className = "pb_pb_bar_graph",
+}: PbBarGraphProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(buildCss('pb_pb_bar_graph'), globalProps(props), className)
 
   const mergedOptions = useMemo(() => {
     if (!options || typeof options !== "object") {
       // eslint-disable-next-line no-console
-      console.error("❌ Invalid options passed to <PbBarGraph />", options)
+      console.error("❌ Invalid options passed to <BarGraph />", options)
       return {}
     }
 
@@ -48,7 +46,7 @@ const {
     <div>
       <HighchartsReact
           containerProps={{
-                  className: classnames(classes),
+                  className: classnames(globalProps, className),
                   id: id,
                   ...ariaProps,
                   ...dataProps,

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb

@@ -4,21 +4,24 @@ module Playbook
   module PbPbBarGraph
     class PbBarGraph < ::Playbook::KitBase
       prop :options, default: {}
+      prop :container_props, default: {}
 
       def react_props
         {
-          className: classname,
-          data: data,
           options: options,
-          id: id,
+          containerProps: container_props_hash,
         }
       end
 
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
+      end
+
       def classname
-        # Highcharts react needs classname attached to the container div,
-        # we pass an empty string here to avoid conflicts, classname is built in the TSX
-        # We still need generate_classnames to retain ability to pass in custom classnames or global props
-        generate_classname("")
+        generate_classname("pb_pb_bar_graph")
       end
     end
   end

data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx

@@ -15,41 +15,6 @@ afterEach(() => {
   console.warn.mockRestore();
 });
 
-const chartData = [{
-    name: 'Installation',
-    data: [1475, 200, 3000, 654, 656],
-  }, {
-    name: 'Manufacturing',
-    data: [4434, 524, 2320, 440, 500],
-  }, {
-    name: 'Sales & Distribution',
-    data: [3387, 743, 1344, 434, 440],
-  }, {
-    name: 'Project Development',
-    data: [3227, 878, 999, 780, 1000],
-  }, {
-    name: 'Other',
-    data: [1111, 677, 3245, 500, 200],
-  }]
-
-  const chartOptions = {
-    series: chartData,
-    title: {
-      text: 'Solar Employment Growth by Sector, 2010-2016',
-    },
-    subtitle: {
-      text: 'Source: thesolarfoundation.com',
-    },
-    xAxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-    },
-    yAxis: {
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-  }
-
 const testId = 'bargraph1';
 
 test('bargraph uses exact classname', () => {
@@ -58,46 +23,9 @@ test('bargraph uses exact classname', () => {
         className='super_important_class'
         data={{ testid: testId }}
         id='bar-default'
-        options={chartOptions}
     />
   );
  
   const kit = screen.getByTestId(testId);
   expect(kit).toHaveClass('super_important_class');
-});
-
-test('Kit to apply base classname', () => {
-  render(
-    <PbBarGraph
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_bar_graph')
-})
-
-
-test('Kit to apply global props', () => {
-  render(
-    <PbBarGraph
-        data={{testid: testId}} 
-        margin="lg"
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
-})
-
-test('kit to apply id', () => {
-  render(
-    <PbBarGraph
-        data={{testid: testId}} 
-        id='bar-graph-id'
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'bar-graph-id')
-})
+});

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx

@@ -46,7 +46,7 @@ const PbCircleChart = (props: PbCircleChartProps) => {
     <div>
       <HighchartsReact
           containerProps={{
-                  className: classnames(classes),
+                  className: classnames(globalProps, className),
                   id: id,
                   ...ariaProps,
                   ...dataProps,

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb

@@ -4,21 +4,24 @@ module Playbook
   module PbPbCircleChart
     class PbCircleChart < ::Playbook::KitBase
       prop :options, default: {}
+      prop :container_props, default: {}
 
       def react_props
         {
-          className: classname,
-          data: data,
           options: options,
-          id: id,
+          containerProps: container_props_hash,
         }
       end
 
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
+      end
+
       def classname
-        # Highcharts react needs classname attached to the container div,
-        # we pass an empty string here to avoid conflicts, classname is built in the TSX
-        # We still need generate_classnames to retain ability to pass in custom classnames or global props
-        generate_classname("")
+        generate_classname("pb_pb_circle_chart")
       end
     end
   end

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx

@@ -49,50 +49,3 @@ test('Kit to exist', () => {
   expect(screen.getByTestId(testId)).toBeInTheDocument()
 })
 
-test('Kit to apply base classname', () => {
-  render(
-    <PbCircleChart
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_circle_chart')
-})
-
-test('Kit to have custom class', () => {
-  render(
-    <PbCircleChart
-        className='custom-class'
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
-})
-
-test('Kit to apply global props', () => {
-  render(
-    <PbCircleChart
-        data={{testid: testId}} 
-        margin="lg"
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
-})
-
-test('kit to apply id', () => {
-  render(
-    <PbCircleChart
-        data={{testid: testId}} 
-        id='circle-chart-id'
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'circle-chart-id')
-})
-

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

@@ -314,18 +314,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (!hasTyped) setHasTyped(true)
-
     setInputValue(evt.target.value)
-
     let phoneNumberData
-
     if (formatAsYouType) {
       const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
       phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
     } else {
       phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
     }
-
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
     isValid(itiRef.current.isValidNumber())
@@ -374,26 +370,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
       inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
       inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
-
-      // Handle formatAsYouType with input event
-      if (formatAsYouType) {
-        inputRef.current.addEventListener("input", (evt: Event) => {
-          const target = evt.target as HTMLInputElement
-          const formattedValue = target.value
-
-          // Update internal state
-          setInputValue(formattedValue)
-          setHasTyped(true)
-
-          // Get phone number data with unformatted number
-          const formattedPhoneNumberData = getCurrentSelectedData(telInputInit, formattedValue)
-          const phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
-
-          setSelectedData(phoneNumberData)
-          onChange(phoneNumberData)
-          isValid(telInputInit.isValidNumber())
-        })
-      }
+    }
+    if (formatAsYouType) {
+      inputRef.current?.addEventListener("input", (evt) => {
+        handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
+      });
     }
   }, [])
 
@@ -408,7 +389,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     label,
     name,
     onBlur: validateErrors,
-    onChange: formatAsYouType ? undefined : handleOnChange,
+    onChange: handleOnChange,
     value: inputValue
   }
 

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/global_props/colors" target="_blank">here</a>.
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

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

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -24,7 +24,6 @@ import { uniqueId } from '../utilities/object';
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
-  appendTo?: string;
   aria?: { [key: string]: string };
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
@@ -63,25 +62,6 @@ const popoverModifiers = ({
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
 };
 
-const getAppendTarget = (
-  appendTo: string | undefined,
-  targetId: string
-): HTMLElement => {
-  if (!appendTo || appendTo === "body") return document.body;
-
-  if (appendTo === "parent") {
-    const referenceWrapper = document.querySelector(`#reference-${targetId}`);
-    if (referenceWrapper?.parentElement) {
-      return referenceWrapper.parentElement;
-    }
-  }
-
-  const selectorMatch = document.querySelector(appendTo);
-  if (selectorMatch instanceof HTMLElement) return selectorMatch;
-
-  return document.body;
-};
-
 const Popover = (props: PbPopoverProps) => {
   const {
     aria = {},
@@ -109,7 +89,7 @@ const Popover = (props: PbPopoverProps) => {
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps
       ? "p_sm"
-      : filteredGlobalProps
+      : filteredGlobalProps 
   const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
   const widthHeightStyles = () => {
@@ -133,7 +113,7 @@ const Popover = (props: PbPopoverProps) => {
 
   return (
     <Popper
-        modifiers={popoverModifiers({ modifiers, offset: offset || false })}
+        modifiers={popoverModifiers({ modifiers, offset })}
         placement={placement}
         referenceElement={referenceElement}
     >
@@ -174,7 +154,6 @@ const Popover = (props: PbPopoverProps) => {
 const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   const [targetId] = useState(uniqueId('id-'))
   const {
-    appendTo,
     className,
     children,
     modifiers = [],
@@ -191,56 +170,42 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     minHeight,
     minWidth,
     width,
-    closeOnClick,
-    shouldClosePopover = noop,
   } = props;
 
-  // Store latest callback in a ref to avoid re-runs
-  const shouldClosePopoverRef = useRef(shouldClosePopover);
-
-  // Update ref on change
   useEffect(() => {
-    shouldClosePopoverRef.current = shouldClosePopover;
-  }, [shouldClosePopover]);
+    const { closeOnClick, shouldClosePopover = noop } = props;
 
-  useEffect(() => {
     if (!closeOnClick) return;
 
-    // Function to handle popover event listener and targetId.
-    // Ensure that whenever the component is conditionally rendered
-    // that the old listener is removed and the new listener is
-    // updated with the targetId.
-    const handleClick = (e: MouseEvent) => {
-      const target = e.target as HTMLElement
-
-      const targetIsPopover =
-        target.closest("#" + targetId) !== null;
-      const targetIsReference =
-        target.closest("#reference-" + targetId) !== null;
+    document.body.addEventListener(
+      "click",
+      (e: MouseEvent) => {
+        const target = e.target as HTMLElement
 
-      const shouldClose = () => {
-        setTimeout(() => shouldClosePopoverRef.current(true), 0);
-      }
+        const targetIsPopover =
+          target.closest("#" + targetId) !== null;
+        const targetIsReference =
+          target.closest("#reference-" + targetId) !== null;
 
-      switch (closeOnClick) {
-        case "outside":
-          if (!targetIsPopover && !targetIsReference) shouldClose();
-          break;
-        case "inside":
-          if (targetIsPopover) shouldClose();
-          break;
-        case "any":
-          if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
-          break;
-      }
-    };
+        const shouldClose = () => {
+          setTimeout(() => shouldClosePopover(true), 0);
+        }
 
-    document.body.addEventListener("click", handleClick, { capture: true });
-
-    return () => {
-      document.body.removeEventListener("click", handleClick, { capture: true });
-    };
-  }, [targetId, closeOnClick]);
+        switch (closeOnClick) {
+          case "outside":
+            if (!targetIsPopover && !targetIsReference) shouldClose();
+            break;
+          case "inside":
+            if (targetIsPopover) shouldClose();
+            break;
+          case "any":
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
+            break;
+        }
+      },
+      { capture: true }
+    );
+  }, []);
 
   const popoverComponent = (
     <Popover
@@ -281,10 +246,10 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         {show &&
           (usePortal ? (
             <>
-                {ReactDOM.createPortal(
-                  popoverComponent,
-                  getAppendTarget(appendTo, targetId)
-                )}
+              {ReactDOM.createPortal(
+                popoverComponent,
+                document.querySelector(portal)
+              )}
             </>
           ) : (
             { popoverComponent }

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

@@ -15,4 +15,3 @@ 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

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

@@ -4,4 +4,3 @@ export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
 export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
-export { default as PopoverAppendTo } from './_popover_append_to.jsx'

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -159,62 +159,6 @@ const PopoverTestClicktoClose3 = () => {
   )
 };
 
-//Test Popover with appendTo="parent"
-const PopoverTestAppendToParent = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-    <div data-testid="parent-container"
-        id="parent-container"
-    >
-      <PbReactPopover
-          appendTo="parent"
-          offset
-          reference={popoverReference}
-          show={mockState}
-      >
-        {"Appended to parent"}
-      </PbReactPopover>
-    </div>
-  )
-};
-
-//Test Popover with appendTo CSS selector
-const PopoverTestAppendToSelector = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-    <div data-testid="custom-container"
-        id="custom-container"
-    >
-      <PbReactPopover
-          appendTo="#custom-container"
-          offset
-          reference={popoverReference}
-          show={mockState}
-      >
-        {"Appended to custom container"}
-      </PbReactPopover>
-    </div>
-  )
-};
-
 
   test("renders Popover", () => {
     render(<PopoverTest data={{ testid: testId}}/>)
@@ -273,28 +217,4 @@ const PopoverTestAppendToSelector = () => {
     fireEvent.click(btn);
 
     expect(kit).not.toBeInTheDocument;
-  });
-
-  test("renders Popover with appendTo parent", () => {
-    render(<PopoverTestAppendToParent data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Appended to parent");
-    expect(kit).toBeInTheDocument();
-    
-    // Check that the popover is rendered inside the parent container
-    const parentContainer = screen.getByTestId("parent-container");
-    expect(parentContainer).toContainElement(kit);
-  });
-
-  test("renders Popover with appendTo CSS selector", () => {
-    render(<PopoverTestAppendToSelector data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Appended to custom container");
-    expect(kit).toBeInTheDocument();
-    
-    // Check that the popover is rendered inside the custom container
-    const customContainer = screen.getByTestId("custom-container");
-    expect(customContainer).toContainElement(kit);
   });