@patternfly/react-core 4.202.24 → 4.202.27

package/src/components/DataList/examples/DataListActions.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  KebabToggle,
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListItemCells,
+  DataListAction
+} from '@patternfly/react-core';
+
+export const DataListActions: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isDeleted, setIsDeleted] = React.useState(false);
+
+  const onToggle = isOpen => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <DataList aria-label="single action data list example ">
+        {!isDeleted && (
+          <DataListItem aria-labelledby="single-action-item1">
+            <DataListItemRow>
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell key="primary content">
+                    <span id="single-action-item1">Single actionable Primary content</span>
+                  </DataListCell>,
+                  <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
+                ]}
+              />
+              <DataListAction
+                aria-labelledby="single-action-item1 single-action-action1"
+                id="single-action-action1"
+                aria-label="Actions"
+              >
+                <Button
+                  onClick={() => {
+                    if (confirm('Are you sure?')) {
+                      setIsDeleted(true);
+                    }
+                  }}
+                  variant="primary"
+                  key="delete-action"
+                >
+                  Delete
+                </Button>
+              </DataListAction>
+            </DataListItemRow>
+          </DataListItem>
+        )}
+        <DataListItem aria-labelledby="multi-actions-item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary content">
+                  <span id="multi-actions-item1">Multi actions Primary content</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="multi-actions-item1 multi-actions-action1"
+              id="multi-actions-action1"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen}
+                onSelect={onSelect}
+                toggle={<KebabToggle onToggle={onToggle} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+};

package/src/components/DataList/examples/DataListBasic.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+
+export const DataListBasic: React.FunctionComponent = () => (
+  <DataList aria-label="Simple data list example">
+    <DataListItem aria-labelledby="simple-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="simple-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">Secondary content</DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+    <DataListItem aria-labelledby="simple-item2">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell isFilled={false} key="secondary content fill">
+              <span id="simple-item2">Secondary content (pf-m-no-fill)</span>
+            </DataListCell>,
+            <DataListCell isFilled={false} alignRight key="secondary content align">
+              Secondary content (pf-m-align-right pf-m-no-fill)
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import {
+  Button,
+  DataList,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  DataListCell,
+  DataListCheck,
+  DataListAction,
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core';
+
+export const DataListCheckboxes: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  const [isOpen3, setIsOpen3] = React.useState(false);
+
+  const onToggle1 = isOpen1 => {
+    setIsOpen1(isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = isOpen2 => {
+    setIsOpen2(isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+  const onToggle3 = isOpen3 => {
+    setIsOpen3(isOpen3);
+  };
+
+  const onSelect3 = () => {
+    setIsOpen3(!isOpen3);
+  };
+  return (
+    <DataList aria-label="Checkbox and action data list example">
+      <DataListItem aria-labelledby="check-action-item1">
+        <DataListItemRow>
+          <DataListCheck aria-labelledby="check-action-item1" name="check-action-check1" />
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary content">
+                <span id="check-action-item1">Primary content</span> Dolor sit amet, consectetur adipisicing elit, sed
+                do eiusmod.
+              </DataListCell>,
+              <DataListCell key="secondary content 1">
+                Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
+              </DataListCell>,
+              <DataListCell key="secondary content 2">
+                <span>Tertiary content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
+              </DataListCell>,
+              <DataListCell key="more content 1">
+                <span>More content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
+              </DataListCell>,
+              <DataListCell key="more content 2">
+                <span>More content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
+              </DataListCell>
+            ]}
+          />
+          <DataListAction
+            aria-labelledby="check-action-item1 check-action-action1"
+            id="check-action-action1"
+            aria-label="Actions"
+            isPlainButtonAction
+          >
+            <Dropdown
+              isPlain
+              position={DropdownPosition.right}
+              isOpen={isOpen1}
+              onSelect={onSelect1}
+              toggle={<KebabToggle onToggle={onToggle1} />}
+              dropdownItems={[
+                <DropdownItem key="link">Link</DropdownItem>,
+                <DropdownItem key="action" component="button">
+                  Action
+                </DropdownItem>,
+                <DropdownItem key="disabled link" isDisabled>
+                  Disabled Link
+                </DropdownItem>
+              ]}
+            />
+          </DataListAction>
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem aria-labelledby="check-action-item2">
+        <DataListItemRow>
+          <DataListCheck aria-labelledby="check-action-item2" name="check-action-check2" />
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary content">
+                <span id="check-action-item2">Primary content - Lorem ipsum</span> dolor sit amet, consectetur
+                adipisicing elit, sed do eiusmod.
+              </DataListCell>,
+              <DataListCell key="secondary content">
+                Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
+              </DataListCell>
+            ]}
+          />
+          <DataListAction
+            visibility={{ lg: 'hidden' }}
+            aria-labelledby="check-action-item2 check-action-action2"
+            id="check-action-action2"
+            aria-label="Actions"
+            isPlainButtonAction
+          >
+            <Dropdown
+              isPlain
+              position={DropdownPosition.right}
+              isOpen={isOpen2}
+              onSelect={onSelect2}
+              toggle={<KebabToggle onToggle={onToggle2} />}
+              dropdownItems={[
+                <DropdownItem key="pri-action2" component="button">
+                  Primary
+                </DropdownItem>,
+                <DropdownItem key="sec-action2" component="button">
+                  Secondary
+                </DropdownItem>
+              ]}
+            />
+          </DataListAction>
+          <DataListAction
+            visibility={{ default: 'hidden', lg: 'visible' }}
+            aria-labelledby="check-action-item2 check-action-action2"
+            id="check-action-action2"
+            aria-label="Actions"
+          >
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+          </DataListAction>
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem aria-labelledby="check-action-item3">
+        <DataListItemRow>
+          <DataListCheck aria-labelledby="check-action-item3" name="check-action-check3" />
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary content">
+                <span id="check-action-item3">Primary content - Lorem ipsum</span> dolor sit amet, consectetur
+                adipisicing elit, sed do eiusmod.
+              </DataListCell>,
+              <DataListCell key="secondary content">
+                Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
+              </DataListCell>
+            ]}
+          />
+          <DataListAction
+            visibility={{ xl: 'hidden' }}
+            aria-labelledby="check-action-item3 check-action-action3"
+            id="check-actiokn-action3"
+            aria-label="Actions"
+            isPlainButtonAction
+          >
+            <Dropdown
+              isPlain
+              position={DropdownPosition.right}
+              isOpen={isOpen3}
+              onSelect={onSelect3}
+              toggle={<KebabToggle onToggle={onToggle3} />}
+              dropdownItems={[
+                <DropdownItem key="pri-action3" component="button">
+                  Primary
+                </DropdownItem>,
+                <DropdownItem key="sec1-action3" component="button">
+                  Secondary
+                </DropdownItem>,
+                <DropdownItem key="sec2-action3" component="button">
+                  Secondary
+                </DropdownItem>,
+                <DropdownItem key="sec3-action3" component="button">
+                  Secondary
+                </DropdownItem>
+              ]}
+            />
+          </DataListAction>
+          <DataListAction
+            visibility={{ default: 'hidden', xl: 'visible' }}
+            aria-labelledby="check-action-item3 check-action-action3"
+            id="check-action-action3"
+            aria-label="Actions"
+          >
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="secondary">Secondary</Button>
+          </DataListAction>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
+};

package/src/components/DataList/examples/DataListCompact.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+
+export const DataListCompact: React.FunctionComponent = () => (
+  <DataList aria-label="Compact data list example" isCompact>
+    <DataListItem aria-labelledby="simple-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="simple-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">Secondary content</DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+    <DataListItem aria-labelledby="simple-item2">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell isFilled={false} key="secondary content fill">
+              <span id="simple-item2">Secondary content (pf-m-no-fill)</span>
+            </DataListCell>,
+            <DataListCell isFilled={false} alignRight key="secondary content align">
+              Secondary content (pf-m-align-right pf-m-no-fill)
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);

package/src/components/DataList/examples/DataListControllingText.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCell,
+  DataListWrapModifier
+} from '@patternfly/react-core';
+
+export const DataListControllingText: React.FunctionComponent = () => (
+  <DataList aria-label="Simple data list example">
+    <DataListItem aria-labelledby="simple-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content" wrapModifier={DataListWrapModifier.breakWord}>
+              <span id="simple-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content" wrapModifier={DataListWrapModifier.truncate}>
+              Really really really really really really really really really really really really really really long
+              description that should be truncated before it ends
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);

package/src/components/DataList/examples/DataListDraggable.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListCheck,
+  DataListControl,
+  DataListDragButton,
+  DataListItemCells,
+  DragDrop,
+  Draggable,
+  Droppable
+} from '@patternfly/react-core';
+
+interface ItemType {
+  id: string;
+  content: string;
+}
+
+const getItems = (count: number) =>
+  Array.from({ length: count }, (_, idx) => idx).map(idx => ({
+    id: `item-${idx}`,
+    content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
+  }));
+
+const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
+  const result = list;
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+export const DataListDraggable: React.FunctionComponent = () => {
+  const [items, setItems] = React.useState(getItems(10));
+  const [liveText, setLiveText] = React.useState('');
+
+  function onDrag(source) {
+    setLiveText(`Started dragging ${items[source.index].content}`);
+    // Return true to allow drag
+    return true;
+  }
+
+  function onDragMove(source, dest) {
+    const newText = dest ? `Move ${items[source.index].content} to ${items[dest.index].content}` : 'Invalid drop zone';
+    if (newText !== liveText) {
+      setLiveText(newText);
+    }
+  }
+
+  function onDrop(source, dest) {
+    if (dest) {
+      const newItems = reorder(items, source.index, dest.index);
+      setItems(newItems);
+
+      setLiveText('Dragging finished.');
+      return true; // Signal that this is a valid drop and not to animate the item returning home.
+    } else {
+      setLiveText('Dragging cancelled. List unchanged.');
+    }
+  }
+
+  return (
+    <DragDrop onDrag={onDrag} onDragMove={onDragMove} onDrop={onDrop}>
+      <Droppable hasNoWrapper>
+        <DataList aria-label="draggable data list example" isCompact>
+          {items.map(({ id, content }) => (
+            <Draggable key={id} hasNoWrapper>
+              <DataListItem aria-labelledby={id} ref={React.createRef()}>
+                <DataListItemRow>
+                  <DataListControl>
+                    <DataListDragButton
+                      aria-label="Reorder"
+                      aria-labelledby={id}
+                      aria-describedby="Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
+                      aria-pressed="false"
+                    />
+                    <DataListCheck aria-labelledby={id} name={id} otherControls />
+                  </DataListControl>
+                  <DataListItemCells
+                    dataListCells={[
+                      <DataListCell key={id}>
+                        <span id={id}>{content}</span>
+                      </DataListCell>
+                    ]}
+                  />
+                </DataListItemRow>
+              </DataListItem>
+            </Draggable>
+          ))}
+        </DataList>
+      </Droppable>
+      <div className="pf-screen-reader" aria-live="assertive">
+        {liveText}
+      </div>
+    </DragDrop>
+  );
+};