RubyGems - playbook_ui - Versions diffs - 14.16.0 → 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7192 - Mend

playbook_ui 14.16.0 → 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7192

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

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

@@ -60,123 +60,120 @@ const DraggableDropZones = (props) => {
   return (
     <>
-    <Flex justify="between"
-        {...props}
-    >
-      <FlexItem marginRight="xl">
-        <DraggableProvider
-            dropZone={{type: "shadow"}}
-            initialItems={dataShadow}
-            onReorder={(items) => setInitialShadowState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Shadow"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialShadowState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
+      <Flex justify="between"
+          {...props}
+      >
+        <FlexItem marginRight="xl">
+          <DraggableProvider
+              dropZone={{type: "shadow"}}
+              initialItems={dataShadow}
+              onReorder={(items) => setInitialShadowState(items)}
+          >
+              <Caption
                   marginBottom="xs"
-                  padding="xs"
+                  text="Shadow"
+                  textAlign="center"
+              />
+              <Draggable.Container
+                  htmlOptions={{style:{ width: "200px"}}}
                   {...props}
               >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
+              {initialShadowState.map(({ id, text }) => (
+                <Card dragId={id}
+                    draggableItem
+                    key={id}
+                    marginBottom="xs"
+                    padding="xs"
+                    {...props}
                 >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem marginRight="xl">
-        <DraggableProvider
-            dropZone={{type: "outline"}}
-            initialItems={dataOutline}
-            onReorder={(items) => setInitialOutlineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Outline"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialOutlineState.map(({ id, text }) => (
-              <Card
-                  dragId={id}
-                  draggableItem
-                  key={id}
+                  <Flex alignItems="stretch"
+                      flexDirection="column"
+                  >
+                    <Body
+                        text={text}
+                        {...props}
+                    />
+                  </Flex>
+                </Card>
+              ))}
+              </Draggable.Container>
+          </DraggableProvider>
+        </FlexItem>
+        <FlexItem marginRight="xl">
+          <DraggableProvider
+              dropZone={{type: "outline"}}
+              initialItems={dataOutline}
+              onReorder={(items) => setInitialOutlineState(items)}
+          >
+              <Caption
                   marginBottom="xs"
-                  padding="xs"
+                  text="Outline"
+                  textAlign="center"
+              />
+              <Draggable.Container
+                  htmlOptions={{style:{ width: "200px"}}}
                   {...props}
               >
-                <Flex
-                    alignItems="stretch"
-                    flexDirection="column"
+              {initialOutlineState.map(({ id, text }) => (
+                <Card
+                    dragId={id}
+                    draggableItem
+                    key={id}
+                    marginBottom="xs"
+                    padding="xs"
+                    {...props}
                 >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem>
-        <DraggableProvider
-            dropZone={{type: "line"}}
-            initialItems={dataLine}
-            onReorder={(items) => setInitialLineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Line"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialLineState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
+                  <Flex
+                      alignItems="stretch"
+                      flexDirection="column"
+                  >
+                    <Body
+                        text={text}
+                        {...props}
+                    />
+                  </Flex>
+                </Card>
+              ))}
+              </Draggable.Container>
+          </DraggableProvider>
+        </FlexItem>
+        <FlexItem>
+          <DraggableProvider
+              dropZone={{type: "line"}}
+              initialItems={dataLine}
+              onReorder={(items) => setInitialLineState(items)}
+          >
+              <Caption
                   marginBottom="xs"
-                  padding="xs"
+                  text="Line"
+                  textAlign="center"
+              />
+              <Draggable.Container
+                  htmlOptions={{style:{ width: "200px"}}}
                   {...props}
               >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
+              {initialLineState.map(({ id, text }) => (
+                <Card dragId={id}
+                    draggableItem
+                    key={id}
+                    marginBottom="xs"
+                    padding="xs"
+                    {...props}
                 >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-    </Flex>
+                  <Flex alignItems="stretch"
+                      flexDirection="column"
+                  >
+                    <Body
+                        text={text}
+                        {...props}
+                    />
+                  </Flex>
+                </Card>
+              ))}
+              </Draggable.Container>
+          </DraggableProvider>
+        </FlexItem>
+      </Flex>
     </>
   );
 };

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

@@ -1,5 +1,5 @@
-The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
+  The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
-By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
+By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
-Additionally, when using the "line" style, be sure to set the proper `direction` attribute within the `dropZone` prop depending on the orentation of your draggable view. By default, this attribute is set to "vertical", but can also be used with a "horizontal" direction. The `direction` attribute only applies to the "line" style and will not affect other drop zone styles.
+When using the "line" type, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones-line).

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

@@ -6,6 +6,8 @@ import Caption from '../../pb_caption/_caption'
 import Draggable from '../../pb_draggable/_draggable'
 import { DraggableProvider } from '../../pb_draggable/context'
 // Initial items to be dragged
 const dataPrimary = [
   {
@@ -42,54 +44,54 @@ const DraggableDropZonesColors = (props) => {
   return (
     <>
-    <Caption marginBottom="xs">
-      Primary
-    </Caption>
-    <DraggableProvider
-        dropZone={{type: "shadow", color: "primary"}}
-        initialItems={dataPrimary}
-        onReorder={(items) => setInitialPrimaryState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialPrimaryState.map(({ id, url }) => (
-              <Draggable.Item dragId={id}
-                  key={id}
-                  marginRight="sm"
-              >
-                <Image alt={id}
-                    size="md"
-                    url={url}
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
-    <Caption marginBottom="xs">
-      Purple
-    </Caption>
-    <DraggableProvider
-        dropZone={{type: "outline", color: "purple"}}
-        initialItems={dataPurple}
-        onReorder={(items) => setInitialPurpleState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialPurpleState.map(({ id, url }) => (
-              <Draggable.Item dragId={id}
-                  key={id}
-                  marginRight="sm"
-              >
-                <Image alt={id}
-                    size="md"
-                    url={url}
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
+      <Caption marginBottom="xs"
+          text="Primary"
+      />
+      <DraggableProvider
+          dropZone={{type: "shadow", color: "primary"}}
+          initialItems={dataPrimary}
+          onReorder={(items) => setInitialPrimaryState(items)}
+      >
+          <Draggable.Container {...props}>
+              <Flex>
+                  {initialPrimaryState.map(({ id, url }) => (
+                    <Draggable.Item dragId={id}
+                        key={id}
+                        marginRight="sm"
+                    >
+                        <Image alt={id}
+                            size="md"
+                            url={url}
+                        />
+                    </Draggable.Item>
+                  ))}
+              </Flex>
+          </Draggable.Container>
+      </DraggableProvider>
+      <Caption marginBottom="xs"
+          text="Purple"
+      />
+      <DraggableProvider
+          dropZone={{type: "outline", color: "purple"}}
+          initialItems={dataPurple}
+          onReorder={(items) => setInitialPurpleState(items)}
+      >
+          <Draggable.Container {...props}>
+              <Flex>
+                  {initialPurpleState.map(({ id, url }) => (
+                    <Draggable.Item dragId={id}
+                        key={id}
+                        marginRight="sm"
+                    >
+                        <Image alt={id}
+                            size="md"
+                            url={url}
+                        />
+                    </Draggable.Item>
+                  ))}
+              </Flex>
+          </Draggable.Container>
+      </DraggableProvider>
     </>
   );
 };

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

	@@ -1 +1 @@
1	- By default, ~~the~~ Draggable kit ~~sets~~ ~~the~~ ~~default~~ ~~color~~ of ~~drop~~ ~~zones~~ to "~~neutral~~" ~~(or~~ "primary" if ~~using~~ the ~~"line"~~ ~~style~~.)
1	+ The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options. When `type` is set to "line", the default color is "primary" and "purple" is the only other option.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx ADDED Viewed

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import Flex from '../../pb_flex/_flex'
+import Caption from '../../pb_caption/_caption'
+import Draggable from '../_draggable'
+import { DraggableProvider } from '../context'
+import Image from '../../pb_image/_image'
+const dataLineVertical = [
+  {
+    id: "211",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "212",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "213",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+const dataLineHorizontal = [
+  {
+    id: "2111",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "2122",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "2133",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+const DraggableDropZones = (props) => {
+  const [initialLineVerticalState, setInitialLineVerticalState] = useState(dataLineVertical);
+  const [initialLineHorizontalState, setInitialLineHorizontalState] = useState(dataLineHorizontal);
+  return (
+    <>
+      <Caption marginBottom="xs"
+          marginTop="xl"
+          text="Vertical"
+      />
+      <DraggableProvider
+          dropZone={{ type: "line", color: "purple" }}
+          initialItems={dataLineVertical}
+          onReorder={(items) => setInitialLineVerticalState(items)}
+      >
+        <Draggable.Container {...props}>
+          <Flex flexDirection="column"
+              height="367px"
+          >
+              {initialLineVerticalState.map(({ id, url }) => (
+                <Draggable.Item dragId={id}
+                    key={id}
+                    marginBottom="sm"
+                >
+                  <Image alt={id}
+                      size="md"
+                      url={url}
+                  />
+                </Draggable.Item>
+              ))}
+          </Flex>
+        </Draggable.Container>
+      </DraggableProvider>
+      <Caption marginBottom="xs"
+          marginTop="xl"
+          text="Horizontal"
+      />
+      <Flex>
+        <DraggableProvider
+            dropZone={{ type: "line", direction: "horizontal" }}
+            initialItems={dataLineHorizontal}
+            onReorder={(items) => setInitialLineHorizontalState(items)}
+        >
+          <Draggable.Container
+              htmlOptions={{style:{ width: "285px"}}}
+              {...props}
+          >
+            <Flex alignItems="stretch"
+                flexDirection="row"
+                height="110px"
+            >
+              {initialLineHorizontalState.map(({ id, url }) => (
+                <Draggable.Item dragId={id}
+                    key={id}
+                    marginRight="sm"
+                >
+                  <Image alt={id}
+                      size="md"
+                      url={url}
+                  />
+                </Draggable.Item>
+              ))}
+            </Flex>
+          </Draggable.Container>
+        </DraggableProvider>
+      </Flex>
+    </>
+  );
+};
+export default DraggableDropZones;

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

@@ -0,0 +1,5 @@
+When using the "line" style, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. The default `color` for "line" is "primary" and "purple" is the only alternative color option.
+The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items.
+Additionally, if the parent container of the `DraggableProvider`/`DraggableContainer` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} RENAMED Viewed

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import Flex from '../../pb_flex/_flex'
-import { DraggableProvider } from '../../pb_draggable/context'
+import { DraggableProvider } from '../context'
 import Avatar from '../../pb_avatar/_avatar'
 import Body from '../../pb_body/_body'
 import Table from '../../pb_table/_table'

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

@@ -2,4 +2,6 @@ The draggable kit can also be used in conjunction with the table kit to create d
 - Wrap the Table with the `DraggableProvider` and manage state as shown.
 - use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
-- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
+We recommending using the default `dropZone type` with the Table kit.

data/app/pb_kits/playbook/pb_draggable/docs/example.yml CHANGED Viewed

@@ -4,14 +4,17 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_with_table_react: Draggable with Table
+  - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_drop_zones: Draggable Drop Zones
+  - draggable_drop_zones_colors: Draggable Drop Zones Colors
+  - draggable_drop_zones_line: Draggable Drop Zones Line
   rails:
-  - draggable_default_rails: Default
-  - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
-  - draggable_with_cards_rails: Draggable with Cards
+  - draggable_default: Default
+  - draggable_with_list: Draggable with List Kit
+  - draggable_with_selectable_list: Draggable with SelectableList Kit
+  - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
+  - draggable_multiple_containers: Dragging Across Multiple Containers

data/app/pb_kits/playbook/pb_draggable/docs/index.js CHANGED Viewed

@@ -3,4 +3,7 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
 export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
+export { default as DraggableWithTable } from './_draggable_with_table.jsx'
+export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
+export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
+export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'

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

@@ -128,6 +128,58 @@ const DraggableKitWithCard = () => {
   );
 };
+const DraggableWithLineVertical = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid={testId}>
+      <DraggableProvider
+          dropZone={{ type: "line" }}
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <Draggable>
+          <Draggable.Container>
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item
+                  dragId={id}
+                  key={id}
+              >
+                {text}
+              </Draggable.Item>
+            ))}
+          </Draggable.Container>
+        </Draggable>
+      </DraggableProvider>
+    </div>
+  );
+};
+const DraggableWithLineHorizontal = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid={testId}>
+      <DraggableProvider
+          dropZone={{ type: "line", direction: "horizontal" }}
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <Draggable>
+          <Draggable.Container>
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item
+                  dragId={id}
+                  key={id}
+              >
+                {text}
+              </Draggable.Item>
+            ))}
+          </Draggable.Container>
+        </Draggable>
+      </DraggableProvider>
+    </div>
+  );
+};
 test("generated default kit and classname", () => {
   render(<DefaultDraggableKit />);
   const kit = screen.getByTestId(testId);
@@ -165,7 +217,7 @@ test("generated dragHandle with List", () => {
   const list = kit.querySelector(".pb_list_kit");
   expect(list).toBeInTheDocument();
-  const dragHandle = list.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = list.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
@@ -175,7 +227,7 @@ test("generated dragHandle with SelectableList", () => {
   const selectabellist = kit.querySelector(".pb_selectable_list_kit");
   expect(selectabellist).toBeInTheDocument();
-  const dragHandle = selectabellist.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = selectabellist.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
@@ -185,6 +237,22 @@ test("generated dragHandle with Card", () => {
   const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
   expect(card).toBeInTheDocument();
-  const dragHandle = card.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
+test("line dropZone with default direction applies 'line_vertical' class to container", () => {
+  render(<DraggableWithLineVertical />);
+  const kit = screen.getByTestId(testId);
+  const container = kit.querySelector(".pb_draggable_container");
+  expect(container).toHaveClass("line_vertical");
+});
+test("line dropZone with horizontal direction applies 'line_horizontal' class to container", () => {
+  render(<DraggableWithLineHorizontal />);
+  const kit = screen.getByTestId(testId);
+  const container = kit.querySelector(".pb_draggable_container");
+  expect(container).toHaveClass("line_horizontal");
+});

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

@@ -31,7 +31,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   } = contextValues;
   // Only get direction if dropZone is 'line'
-  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
+  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : null;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -41,8 +41,9 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
-    // Only add vertical class if dropZone is 'line' and direction is 'vertical'
-    (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
+    // Line variant gets line_{direction} classname on container no matter what
+    dropZone === 'line' && direction === 'vertical' ? 'line_vertical' : '',
+    dropZone === 'line' && direction === 'horizontal' ? 'line_horizontal' : '',
     globalProps(props),
     className
   );