RubyGems - playbook_ui - Versions diffs - 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096 → 13.30.0.pre.alpha.play1367contenttagnoninputkits3159 - Mend

playbook_ui 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096 → 13.30.0.pre.alpha.play1367contenttagnoninputkits3159

Files changed (81) hide show

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx CHANGED Viewed

@@ -32,13 +32,14 @@ const DraggableDefault = (props) => {
         <Draggable.Container {...props}>
           <SelectableList variant="checkbox">
             {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id}
+              <Draggable.Item dragId={id}
                   key={id}
               >
                 <SelectableList.Item
                     label={text}
                     name={id}
                     value={id}
+                    {...props}
                 />
               </Draggable.Item>
             ))}

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md CHANGED Viewed

@@ -1,4 +1,4 @@
 To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
 The `Draggable.Container` specifies the container within which items can be dropped.
-The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.
+The `Draggable.Item` specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx CHANGED Viewed

@@ -113,12 +113,13 @@ const DraggableMultipleContainer = (props) => {
                       }) => (
                         <Draggable.Item
                             container={container}
-                            id={id}
+                            dragId={id}
                             key={id}
                         >
                           <Card
                               marginBottom="sm"
                               padding="sm"
+                              {...props}
                           >
                             <Flex justify="between">
                               <FlexItem>
@@ -131,6 +132,7 @@ const DraggableMultipleContainer = (props) => {
                                   <Title paddingLeft="xs"
                                       size={4}
                                       text={title}
+                                      {...props}
                                   />
                                 </Flex>
                               </FlexItem>
@@ -139,10 +141,12 @@ const DraggableMultipleContainer = (props) => {
                                   rounded
                                   text={badgeProperties(container).text}
                                   variant={badgeProperties(container).color}
+                                  {...props}
                               />
                             </Flex>
                             <Body paddingTop="xs"
                                 text={description}
+                                {...props}
                             />
                           </Card>
                         </Draggable.Item>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx CHANGED Viewed

@@ -36,29 +36,32 @@ const DraggableWithCards = (props) => {
     >
         <Draggable.Container  {...props}>
           {initialState.map(({ id, text }) => (
-              <Card
+              <Card dragId={id}
                   draggableItem
                   highlight={{ color: "primary", position: "side" }}
-                  id={id}
                   key={id}
                   marginBottom="xs"
                   padding="xs"
+                  {...props}
               >
                 <Flex alignItems="stretch"
                     flexDirection="column"
                 >
                   <Flex gap="xs">
                     <Title size={4}
-                        text={text}
+                        text={text}
+                        {...props}
                     />
                     <Badge
                         text="35-12345"
                         variant="primary"
+                        {...props}
                     />
                   </Flex>
                       <Caption
                           size="xs"
                           text="8:00A • Township Name • 90210"
+                          {...props}
                       />
                   <Flex gap="xxs"
                       spacing="between"
@@ -66,6 +69,7 @@ const DraggableWithCards = (props) => {
                     <Flex gap="xxs">
                       <Caption color="error"
                           size="xs"
+                          {...props}
                       >
                         <Icon icon="house-circle-exclamation" />
                       </Caption>
@@ -78,14 +82,17 @@ const DraggableWithCards = (props) => {
                       <Badge rounded
                           text="Schedule QA"
                           variant="warning"
+                          {...props}
                        />
                       <Badge rounded
                           text="Flex"
-                          variant="primary"
+                          variant="primary"
+                          {...props}
                       />
                       <Badge rounded
                           text="R99"
                           variant="primary"
+                          {...props}
                       />
                     </Flex>
                   </Flex>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md CHANGED Viewed

@@ -1,3 +1,5 @@
-For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop on Card. The dragHandle is added by default but this can be opted out off by setting `dragHandle` to false on the Card kit.
+For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the Card kit.
-The dev must manage state as shown and pass in id to the Card for dragging to work.
+In addition to the above `dragId` is a REQUIRED prop to be passedd to the Card kit when implementing dragging.
+The dev must manage state as shown.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx CHANGED Viewed

@@ -30,11 +30,11 @@ const DraggableWithList = (props) => {
     <DraggableProvider initialItems={data}
         onReorder={(items) => setInitialState(items)}
     >
-        <List draggable
+        <List enableDrag
             {...props}
         >
             {initialState.map(({ id, text }) => (
-                <ListItem id={id}
+                <ListItem dragId={id}
                     key={id}
                 >
                     {text}

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md CHANGED Viewed

@@ -1 +1,7 @@
-For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem for dragging to work.
+For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `enableDrag` prop.
+In addition to the above `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
+The dev must manage state as shown.
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx CHANGED Viewed

@@ -29,16 +29,18 @@ const DraggableWithSelectableList = (props) => {
     <DraggableProvider initialItems={data}
         onReorder={(items) => setInitialState(items)}
     >
-          <SelectableList draggable
-              variant="checkbox"
+          <SelectableList enableDrag
+              variant="radio"
               {...props}
               >
             {initialState.map(({ id, text }) => (
-                <SelectableList.Item id={id}
+                <SelectableList.Item
+                    dragId={id}
                     key={id}
                     label={text}
-                    name={id}
+                    name="radio-test"
                     value={id}
+                    {...props}
                 />
             ))}
           </SelectableList>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md ADDED Viewed

@@ -0,0 +1,7 @@
+For a simplified version of the Draggable API for the SelectableList kit, use the DraggableProvider to wrap the SelectableList kit and use the `enableDrag` prop.
+In addition to the above `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
+The dev must manage state as shown.
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx CHANGED Viewed

@@ -1,9 +1,16 @@
-import React, {useState} from "react"
-import { render, screen } from "../utilities/test-utils"
+import React, { useState } from "react";
+import { render, screen } from "../utilities/test-utils";
-import { Draggable, DraggableProvider, SelectableList } from '../'
+import {
+  Draggable,
+  DraggableProvider,
+  SelectableList,
+  List,
+  ListItem,
+  Card,
+} from "../";
-const testId = 'draggable'
+const testId = "draggable";
 const data = [
   {
@@ -24,7 +31,6 @@ const data = [
   },
 ];
 const DefaultDraggableKit = () => {
   const [initialState, setInitialState] = useState(data);
@@ -33,13 +39,11 @@ const DefaultDraggableKit = () => {
         initialItems={data}
         onReorder={(items) => setInitialState(items)}
     >
-      <Draggable
-          data={{ testid: testId }}
-      >
+      <Draggable data={{ testid: testId }}>
         <Draggable.Container>
           <SelectableList variant="checkbox">
             {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id}
+              <Draggable.Item dragId={id}
                   key={id}
               >
                 <SelectableList.Item label={text}
@@ -55,9 +59,132 @@ const DefaultDraggableKit = () => {
   );
 };
-test('generated default kit and classname', () => {
-render(<DefaultDraggableKit/>)
-const kit = screen.getByTestId(testId)
-expect(kit).toBeInTheDocument()
-expect(kit).toHaveClass('pb_draggable')
-})
+const DraggableKitWithList = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid="draggable">
+      <DraggableProvider
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <List enableDrag>
+          {initialState.map(({ id, text }) => (
+            <ListItem dragId={id}
+                key={id}
+            >
+              {text}
+            </ListItem>
+          ))}
+        </List>
+      </DraggableProvider>
+    </div>
+  );
+};
+const DraggableKitWithSelectableList = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid="draggable">
+      <DraggableProvider
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <SelectableList enableDrag>
+          {initialState.map(({ id, text }) => (
+            <SelectableList.Item
+                dragId={id}
+                key={id}
+                label={text}
+                name={id}
+                value={id}
+            />
+          ))}
+        </SelectableList>
+      </DraggableProvider>
+    </div>
+  );
+};
+const DraggableKitWithCard = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid="draggable">
+      <DraggableProvider
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <Draggable.Container>
+          {initialState.map(({ id, text }) => (
+            <Card dragId={id}
+                draggableItem
+                key={id}
+            >
+              {text}
+            </Card>
+          ))}
+        </Draggable.Container>
+      </DraggableProvider>
+    </div>
+  );
+};
+test("generated default kit and classname", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+  expect(kit).toBeInTheDocument();
+  expect(kit).toHaveClass("pb_draggable");
+});
+test("generated Draggable Container", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+  const container = kit.querySelector(".pb_draggable_container");
+  expect(container).toBeInTheDocument();
+});
+test("generated Draggable Item", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+  const item = kit.querySelector(".pb_draggable_item");
+  expect(item).toBeInTheDocument();
+});
+test("Attached draggable HTML attributes", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+  const item = kit.querySelector(".pb_draggable_item");
+  expect(item).toHaveAttribute("draggable");
+});
+test("generated dragHandle with List", () => {
+  render(<DraggableKitWithList />);
+  const kit = screen.getByTestId(testId);
+  const list = kit.querySelector(".pb_list_kit");
+  expect(list).toBeInTheDocument();
+  const dragHandle = list.querySelector(".fa-grip-dots-vertical");
+  expect(dragHandle).toBeInTheDocument();
+});
+test("generated dragHandle with SelectableList", () => {
+  render(<DraggableKitWithSelectableList />);
+  const kit = screen.getByTestId(testId);
+  const selectabellist = kit.querySelector(".pb_selectable_list_kit");
+  expect(selectabellist).toBeInTheDocument();
+  const dragHandle = selectabellist.querySelector(".fa-grip-dots-vertical");
+  expect(dragHandle).toBeInTheDocument();
+});
+test("generated dragHandle with Card", () => {
+  render(<DraggableKitWithCard />);
+  const kit = screen.getByTestId(testId);
+  const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
+  expect(card).toBeInTheDocument();
+  const dragHandle = card.querySelector(".fa-grip-dots-vertical");
+  expect(dragHandle).toBeInTheDocument();
+});

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx CHANGED Viewed

@@ -17,10 +17,11 @@ type DraggableItemProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
+  dragId?: string;
 };
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -31,7 +32,7 @@ const DraggableItem = (props: DraggableItemProps) => {
   const classes = classnames(
     buildCss("pb_draggable_item"),
-    `${isDragging === id ? "is_dragging" : ""}`,
+    `${isDragging === dragId ? "is_dragging" : ""}`,
     globalProps(props),
     className
   );
@@ -44,10 +45,10 @@ const DraggableItem = (props: DraggableItemProps) => {
         className={classes}
         draggable
         id={id}
-        key={id}
+        key={dragId}
         onDragEnd={() => handleDragEnd()}
-        onDragEnter={() => handleDragEnter(id, container)}
-        onDragStart={() => handleDragStart(id, container)}
+        onDragEnter={() => handleDragEnter(dragId, container)}
+        onDragStart={() => handleDragStart(dragId, container)}
     >
       {children}
     </div>

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

@@ -96,6 +96,7 @@
         width: 100%;
       }
     }
     .close {
       display: none;
       animation-name: fadeOut;
@@ -111,6 +112,17 @@
       animation-timing-function: linear;
       animation-fill-mode: forwards;
     }
+    &.error {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+      [class*="dropdown_trigger_wrapper"] {
+        border-color: $error;
+        box-shadow: none !important;
+      }
+    }
   }
   &.dark {
@@ -138,6 +150,12 @@
           color: $white;
         }
       }
+      &.error {
+        [class*="dropdown_trigger_wrapper"] {
+          border-color: $error_dark;
+        }
+      }
     }
     .pb_dropdown_container {
       background-color: $bg_dark !important;