playbook_ui 14.7.0.pre.alpha.dependabotnpmandyarnfloatinguireact026284532 → 14.7.0.pre.alpha.dependabotnpmandyarnintltelinput24704448

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -1,12 +1,8 @@
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
+import Modal from "react-modal";
 
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-  buildHtmlProps,
-} from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 import { DialogContext } from "../pb_dialog/_dialog_context";
@@ -57,19 +53,13 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   let globalPropsString: string = globalProps(props);
 
   // Check if the string contains any of the prefixes
-  const containsPrefix = [
-    "p_",
-    "pb_",
-    "pt_",
-    "pl_",
-    "pr_",
-    "px_",
-    "py_",
-  ].some((prefix) => globalPropsString.includes(prefix));
+  const containsPrefix = ['p_', 'pb_', 'pt_', 'pl_', 'pr_', 'px_', 'py_'].some((prefix) =>
+    globalPropsString.includes(prefix)
+  );
 
   // If none of the prefixes are found, append 'p_sm' to the string
   if (!containsPrefix) {
-    globalPropsString += " p_sm";
+    globalPropsString += ' p_sm';
   }
 
   const drawerClassNames = {
@@ -77,9 +67,9 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
       "pb_drawer",
       buildCss("pb_drawer", size, placement),
       {
-        drawer_border_full: border === "full",
-        drawer_border_right: border === "right",
-        drawer_border_left: border === "left",
+        "drawer_border_full": border === "full",
+        "drawer_border_right": border === "right",
+        "drawer_border_left": border === "left",
       }
     )} ${globalPropsString}`,
     afterOpen: "pb_drawer_after_open",
@@ -92,18 +82,19 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   };
 
   const overlayClassNames = {
-    base: `pb_drawer${overlay ? "_overlay" : "_no_overlay"} ${
-      fullHeight !== null && fullHeightClassNames()
-    } ${!overlay ? "no-background" : ""}`,
+    base: `pb_drawer${overlay ? '_overlay' : '_no_overlay'} ${fullHeight !== null && fullHeightClassNames()} ${!overlay ? 'no-background' : ''}`,
     afterOpen: "pb_drawer_overlay_after_open",
     beforeClose: "pb_drawer_overlay_before_close",
   };
 
-  const classes = classnames(buildCss("pb_drawer_wrapper"), className);
+  const classes = classnames(
+    buildCss("pb_drawer_wrapper"),
+    className
+  );
 
   const [triggerOpened, setTriggerOpened] = useState(false);
 
-  const breakpointWidths: Record<DrawerProps["breakpoint"], number> = {
+  const breakpointWidths: Record<DrawerProps['breakpoint'], number> = {
     none: 0,
     xs: 575,
     sm: 768,
@@ -116,7 +107,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   const [isBreakpointOpen, setIsBreakpointOpen] = useState(false);
 
   useEffect(() => {
-    if (breakpoint === "none") return;
+    if (breakpoint === 'none') return;
 
     const handleResize = () => {
       const width = window.innerWidth;
@@ -129,57 +120,39 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
       }
     };
 
-    window.addEventListener("resize", handleResize);
+    window.addEventListener('resize', handleResize);
 
     // Call handler once on mount to set initial state
     handleResize();
 
     return () => {
-      window.removeEventListener("resize", handleResize);
+      window.removeEventListener('resize', handleResize);
     };
   }, [breakpoint]);
 
-  const modalIsOpened = trigger ? triggerOpened : opened || isBreakpointOpen;
-
-  const [animationState, setAnimationState] = useState("");
-
-  useEffect(() => {
-    if (modalIsOpened) {
-      setAnimationState("afterOpen");
-    } else if (!modalIsOpened && animationState === "afterOpen") {
-      setAnimationState("beforeClose");
-      setTimeout(() => {
-        setAnimationState("");
-      }, 200); // closeTimeoutMS
-    }
-  }, [modalIsOpened]);
-
-  const isModalVisible = modalIsOpened || animationState === "beforeClose";
+  const modalIsOpened = trigger ? triggerOpened : (opened || isBreakpointOpen);
 
   useEffect(() => {
-    const sizeMap: Record<DrawerProps["size"], string> = {
-      xl: "365px",
-      lg: "300px",
-      md: "250px",
-      sm: "200px",
-      xs: "64px",
+    const sizeMap: Record<DrawerProps['size'], string> = {
+      xl: '365px',
+      lg: '300px',
+      md: '250px',
+      sm: '200px',
+      xs: '64px',
     };
-    const body = document.querySelector("body");
+    const body = document.querySelector('body');
 
-    if (modalIsOpened && behavior === "push" && body) {
-      if (placement === "left") {
+    if (modalIsOpened && behavior === 'push' && body) {
+      if (placement === 'left') {
         body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`;
-      } else if (placement === "right") {
+      } else if (placement === 'right') {
         body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`;
       }
 
-      body.classList.add("PBDrawer__Body--open");
+      body.classList.add('ReactModal__Body--open');
     } else if (body) {
-      if (body.classList.contains("PBDrawer__Body--open")) {
-        body.classList.add("PBDrawer__Body--close");
-      }
-      body.style.cssText = ""; // Clear the styles when modal is closed or behavior is not 'push'
-      body.classList.remove("PBDrawer__Body--open");
+      body.style.cssText = ''; // Clear the styles when modal is closed or behavior is not 'push'
+      body.classList.remove('ReactModal__Body--open');
     }
   }, [modalIsOpened, behavior, placement, size]);
 
@@ -199,27 +172,22 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
           {...htmlProps}
           className={classes}
       >
-          {isModalVisible && (
-            <div
-                className={classnames(overlayClassNames.base, {
-              [overlayClassNames.afterOpen]: animationState === "afterOpen",
-              [overlayClassNames.beforeClose]: animationState === "beforeClose",
-            })}
-                id={id}
-                onClick={overlay ? onClose : undefined}
-            >
-            <div
-                className={classnames(drawerClassNames.base, {
-              [drawerClassNames.afterOpen]: animationState === "afterOpen",
-              [drawerClassNames.beforeClose]: animationState === "beforeClose",
-            })}
-                onClick={(e) => e.stopPropagation()}
-            >
+        <Modal
+            ariaHideApp={false}
+            className={drawerClassNames}
+            closeTimeoutMS={200}
+            contentLabel="Minimal Modal Example"
+            id={id}
+            isOpen={modalIsOpened}
+            onRequestClose={onClose}
+            overlayClassName={overlayClassNames}
+            shouldCloseOnOverlayClick={overlay}
+        >
+          <>
             {children}
-            </div>
-            </div>
-          )}
-          </div>
+          </>
+        </Modal>
+      </div>
     </DialogContext.Provider>
   );
 };

data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { render, fireEvent, screen } from '../utilities/test-utils';
+import { render, cleanup, fireEvent, screen } from '../utilities/test-utils';
 import { Drawer, Button } from 'playbook-ui';
-import { waitFor } from '@testing-library/react';
 
 const size = 'sm';
 
@@ -12,10 +11,9 @@ function DrawerTest({ props }) {
 
   return (
     <>
-    <Button onClick={open}>{'Open Drawer'}</Button>
+      <Button onClick={open}>{'Open Drawer'}</Button>
       <Drawer
           className="wrapper"
-          id="drawer-id"
           onClose={close}
           opened={isOpen}
           placement="left"
@@ -29,17 +27,24 @@ function DrawerTest({ props }) {
   );
 }
 
+afterEach(cleanup);
+
 test('renders with the right border class when border prop is right', async () => {
   render(<DrawerTest props={{ border: 'right' }} />);
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
+  const drawer = await screen.findByRole('dialog');
+  expect(drawer).toHaveClass('drawer_border_right');
+});
 
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
+test('renders with the left border class when border prop is left', async () => {
+  render(<DrawerTest props={{ border: 'left' }} />);
 
-  expect(drawer).toHaveClass('drawer_border_right');
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  const drawer = await screen.findByRole('dialog');
+  expect(drawer).toHaveClass('drawer_border_left');
 });
 
 test('renders with the full border class when border prop is full', async () => {
@@ -47,10 +52,7 @@ test('renders with the full border class when border prop is full', async () =>
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
+  const drawer = await screen.findByRole('dialog');
   expect(drawer).toHaveClass('drawer_border_full');
 });
 
@@ -59,10 +61,7 @@ test('does not have a border class when border prop is none', async () => {
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
+  const drawer = await screen.findByRole('dialog');
   expect(drawer).not.toHaveClass('drawer_border_right');
   expect(drawer).not.toHaveClass('drawer_border_left');
   expect(drawer).not.toHaveClass('drawer_border_full');
@@ -73,9 +72,6 @@ test('renders the correct size class for a large drawer', async () => {
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
+  const drawer = await screen.findByRole('dialog');
   expect(drawer).toHaveClass('pb_drawer pb_drawer_lg_left');
 });

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -8,12 +8,6 @@ $icon_margin: $space_xs/2;
 $icon_height: 28px;
 $height_from_top: $icon_height/2 - $connector_width/2;
 
-// Add gap variables
-$gap_xs: $height_from_top + $space_xs;
-$gap_sm: $height_from_top + $space_sm;
-$gap_md: $height_from_top + $space_md;
-$gap_lg: $height_from_top + $space_lg;
-
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;
     height: $height;
@@ -162,7 +156,7 @@ $gap_lg: $height_from_top + $space_lg;
                         }
                     }
                 }
-            }
+            } 
         }
     }
     &[class*=_vertical] {
@@ -272,41 +266,5 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &[class*=_gap_xs] {
-            [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_xs !important;
-                    }
-                }
-            }
-        }
-        &[class*=_gap_sm] {
-            [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_sm !important;
-                    }
-                }
-            }
-        }
-        &[class*=_gap_md] {
-            [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_md !important;
-                    }
-                }
-            }
-        }
-        &[class*=_gap_lg] {
-            [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_lg !important;
-                    }
-                }
-            }
-        }
     }
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -20,7 +20,6 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -32,16 +31,13 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
-  gap = 'none',
   ...props
 }: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
-  const gapStyle = gap === 'none' ? '' : `gap_${gap}`
-  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
-
+  const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
   return (
     <div
         {...ariaProps}
@@ -60,4 +56,4 @@ Timeline.Step = TimelineStep
 Timeline.Label = TimelineLabel
 Timeline.Detail = TimelineDetail
 
-export default Timeline
+export default Timeline

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

@@ -1,16 +1,14 @@
 examples:
-
+  
   rails:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_with_gap: With Gap
-
-
+  
+  
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_with_gap: With Gap

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

@@ -2,5 +2,3 @@ export { default as TimelineDefault } from './_timeline_default.jsx'
 export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
-export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
-

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -8,15 +8,9 @@ module Playbook
                          default: "horizontal"
       prop :show_date, type: Playbook::Props::Boolean,
                        default: false
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xs sm md lg none],
-                 default: "none"
 
       def classname
-        generate_classname("pb_timeline_kit",
-                           orientation,
-                           date_class,
-                           gap_class)
+        generate_classname("pb_timeline_kit", orientation, date_class)
       end
 
     private
@@ -24,10 +18,6 @@ module Playbook
       def date_class
         show_date ? "with_date" : nil
       end
-
-      def gap_class
-        gap == "none" ? nil : "gap_#{gap}"
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_timeline/timeline.test.js

@@ -147,26 +147,26 @@ test('should pass id prop', () => {
 test('should have horizontal orientation by default', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_horizontal')
+    expect(kit).toHaveClass('pb_timeline_kit__horizontal')
 })
 
 test('should pass vertical orientation', () => {
     const props = { orientation: 'vertical' }
     render(<TimelineDefault {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_vertical')
+    expect(kit).toHaveClass('pb_timeline_kit__vertical')
 })
 
 test('should pass showDate prop', () => {
     const props = { showDate: true }
     render(<TimelineDefault {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
 })
 
 test('should pass showDate prop with Children', () => {
     const props = { showDate: true }
     render(<TimelineWithChildren {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
 })

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -21,47 +21,34 @@
 }
 
 @mixin hover-color-classes($colors-list) {
-    @each $name, $color in $colors-list {
-      .hover_background-#{"" + $name}:hover {
-        background-color: $color !important;
-        transition: background-color $transition-speed ease;
-      }
-      .hover_color-#{"" + $name}:hover {
-        color: $color !important;
-        transition: color $transition-speed ease;
-      }
+  @each $name, $color in $colors-list {
+    .hover_background_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_background_#{"" + $name} {
+      background-color: $color !important;
+      transition: background-color $transition-speed ease;
+    }
+    .hover_color_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_color_#{"" + $name} {
+      color: $color !important;
+      transition: color $transition-speed ease;
     }
-  }
-  
-  @include hover-scale-classes($scales);
-  @include hover-shadow-classes($box_shadows);
-  @include hover-color-classes($product_colors);
-  @include hover-color-classes($status_colors);
-  @include hover-color-classes($data_colors);
-  @include hover-color-classes($shadow_colors);
-  @include hover-color-classes($colors);
-  @include hover-color-classes($interface_colors);
-  @include hover-color-classes($main_colors);
-  @include hover-color-classes($background_colors);
-  @include hover-color-classes($card_colors);
-  @include hover-color-classes($active_colors);
-  @include hover-color-classes($action_colors);
-  @include hover-color-classes($hover_colors);
-  @include hover-color-classes($border_colors);
-  @include hover-color-classes($text_colors);
-  @include hover-color-classes($category_colors);
-
-.hover_visibility {
-  opacity: 0;
-  transition: opacity $transition-speed ease;
-
-  &:hover {
-    opacity: 1;
   }
 }
 
-.group_hover:hover {
-  .group_hover.hover_visibility {
-    opacity: 1;
-  }
-}
+@include hover-scale-classes($scales);
+@include hover-shadow-classes($box_shadows);
+@include hover-color-classes($product_colors);
+@include hover-color-classes($status_colors);
+@include hover-color-classes($data_colors);
+@include hover-color-classes($shadow_colors);
+@include hover-color-classes($colors);
+@include hover-color-classes($interface_colors);
+@include hover-color-classes($main_colors);
+@include hover-color-classes($background_colors);
+@include hover-color-classes($card_colors);
+@include hover-color-classes($active_colors);
+@include hover-color-classes($action_colors);
+@include hover-color-classes($hover_colors);
+@include hover-color-classes($border_colors);
+@include hover-color-classes($text_colors);
+@include hover-color-classes($category_colors);

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -63,8 +63,7 @@ type FlexWrap = {
 type Hover = Shadow & {
   background?: string,
   color?: string,
-  scale?: "sm" | "md" | "lg",
-  visibility?: boolean,
+  scale?: "sm" | "md" | "lg"
 }
 
 type GroupHover  = {
@@ -231,10 +230,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       let css = '';
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
-      css += hover.background ? `hover_background-${hover.background } ` : '';
+      css += hover.background ? `hover_background_${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
-      css += hover.color ? `hover_color-${hover.color } ` : '';
-      css += hover.visibility ? `hover_visibility` : '';
+      css += hover.color ? `hover_color_${hover.color } ` : '';
       return css;
   },