@patternfly/react-core 4.202.26 → 4.202.29

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

@@ -0,0 +1,261 @@
+import React from 'react';
+import {
+  Button,
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListCell,
+  DataListAction,
+  DataListToggle,
+  DataListContent,
+  DataListItemCells,
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+
+export const DataListExpandable: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  const [isOpen3, setIsOpen3] = React.useState(false);
+  const [allExpanded, setAllExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
+
+  const onToggleAll = () => {
+    setAllExpanded(!allExpanded);
+  };
+
+  React.useEffect(() => {
+    if (allExpanded) {
+      setExpanded(['ex-toggle1', 'ex-toggle2', 'ex-toggle3']);
+    } else {
+      setExpanded([]);
+    }
+  }, [allExpanded]);
+
+  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);
+  };
+
+  const toggle = id => {
+    const index = expanded.indexOf(id);
+    const newExpanded =
+      index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
+    setExpanded(newExpanded);
+  };
+  return (
+    <React.Fragment>
+      <Button onClick={onToggleAll}>
+        {allExpanded && <AngleDownIcon />}
+        {!allExpanded && <AngleRightIcon />}
+        Expand/Collapse All
+      </Button>
+      <br />
+      <br />
+      <DataList aria-label="Expandable data list example">
+        <DataListItem aria-labelledby="ex-item1" isExpanded={expanded.includes('ex-toggle1')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('ex-toggle1')}
+              isExpanded={expanded.includes('ex-toggle1')}
+              id="ex-toggle1"
+              aria-controls="ex-expand1"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="primary content">
+                  <div id="ex-item1">Primary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                  <a href="#">link</a>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="ex-item1 ex-action1"
+              id="ex-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>
+          <DataListContent
+            aria-label="Primary Content Details"
+            id="ex-expand1"
+            isHidden={!expanded.includes('ex-toggle1')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+        <DataListItem aria-labelledby="ex-item2" isExpanded={expanded.includes('ex-toggle2')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('ex-toggle2')}
+              isExpanded={expanded.includes('ex-toggle2')}
+              id="ex-toggle2"
+              aria-controls="ex-expand2"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <div id="ex-item2">Secondary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content3">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="ex-item2 ex-action2"
+              id="ex-action2"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen2}
+                onSelect={onSelect2}
+                toggle={<KebabToggle onToggle={onToggle2} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="Primary Content Details"
+            id="ex-expand2"
+            isHidden={!expanded.includes('ex-toggle2')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+        <DataListItem aria-labelledby="ex-item3" isExpanded={expanded.includes('ex-toggle3')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('ex-toggle3')}
+              isExpanded={expanded.includes('ex-toggle3')}
+              id="ex-toggle3"
+              aria-controls="ex-expand3"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="tertiary content">
+                  <div id="ex-item3">Tertiary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="ex-item3 ex-action3"
+              id="ex-action3"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen3}
+                onSelect={onSelect3}
+                toggle={<KebabToggle onToggle={onToggle3} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="Primary Content Details"
+            id="ex-expand3"
+            isHidden={!expanded.includes('ex-toggle3')}
+            hasNoPadding
+          >
+            This expanded section has no padding.
+          </DataListContent>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  KebabToggle,
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListItemCells,
+  DataListAction
+} from '@patternfly/react-core';
+
+export const DataListSelectableRows: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+
+  const onToggle1 = isOpen1 => {
+    setIsOpen1(isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = isOpen2 => {
+    setIsOpen2(isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const onSelectDataListItem = id => {
+    setSelectedDataListItemId(id);
+  };
+
+  return (
+    <React.Fragment>
+      <DataList
+        aria-label="selectable data list example"
+        selectedDataListItemId={selectedDataListItemId}
+        onSelectDataListItem={onSelectDataListItem}
+      >
+        <DataListItem aria-labelledby="selectable-action-item1" id="item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary content">
+                  <span id="selectable-action-item1">Single actionable Primary content</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="selectable-action-item1 selectable-action-action1"
+              id="selectable-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="selectable-actions-item2" id="item2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary content">
+                  <span id="selectable-actions-item2">Selectable actions Primary content</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">Selectable actions Secondary content</DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="selectable-actions-item2 selectable-actions-action2"
+              id="selectable-actions-action2"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen2}
+                onSelect={onSelect2}
+                toggle={<KebabToggle onToggle={onToggle2} />}
+                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/DataListSmGridBreakpoint.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+
+export const DataListSmGridBreakpoint: React.FunctionComponent = () => (
+  <DataList aria-label="Simple data list example" gridBreakpoint="sm">
+    <DataListItem aria-labelledby="simple-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="simple-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">
+              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/DataListWidthModifiers.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListCheck,
+  DataListAction,
+  DataListToggle,
+  DataListContent,
+  DataListItemCells,
+  DataListItemRow,
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+  DropdownPosition,
+  Text,
+  TextVariants,
+  TextContent
+} from '@patternfly/react-core';
+
+export const DataListWidthModifiers: React.FunctionComponent = () => {
+  const [show, setShow] = React.useState(true);
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+
+  const onToggle1 = isOpen1 => {
+    setIsOpen1(isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = isOpen2 => {
+    setIsOpen2(isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const previewPlaceholder = {
+    display: 'block',
+    width: '100%',
+    padding: '.25rem .5rem',
+    color: '#004e8a',
+    backgroundColor: '#def3ff',
+    border: '1px solid rgba(0,0,0,.1)',
+    borderRadius: '4px'
+  };
+
+  return (
+    <>
+      <div key="example-1">
+        <TextContent>
+          <Text component={TextVariants.h4}>Default fitting - example 1</Text>
+        </TextContent>
+        <DataList aria-label="Width modifier data list example 1">
+          <DataListItem aria-labelledby="width-ex1-item1">
+            <DataListItemRow>
+              <DataListCheck aria-labelledby="width-ex1-item1" name="width-ex1-item1" />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell key="default">
+                    <div style={previewPlaceholder}>
+                      <b id="width-ex1-item1">default</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell key="default2">
+                    <div style={previewPlaceholder}>
+                      <b>default</b>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua.
+                      </p>
+                    </div>
+                  </DataListCell>
+                ]}
+              />
+            </DataListItemRow>
+          </DataListItem>
+        </DataList>
+      </div>
+      <div key="example-2">
+        <TextContent>
+          <Text component={TextVariants.h4}>Flex modifiers - example 2</Text>
+        </TextContent>
+        <DataList aria-label="Width modifier data list example 2">
+          <DataListItem aria-labelledby="width-ex2-item1">
+            <DataListItemRow>
+              <DataListCheck aria-labelledby="width-ex2-item1" name="width-ex2-item1" />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell width={2} key="width 2">
+                    <div style={previewPlaceholder}>
+                      <b id="width-ex2-item1">width 2</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell width={4} key="width 4">
+                    <div style={previewPlaceholder}>
+                      <b>width 4</b>
+                      <p>Lorem ipsum dolor sit amet.</p>
+                    </div>
+                  </DataListCell>
+                ]}
+              />
+              <DataListAction
+                aria-labelledby="width-ex2-item1 width-ex2-action1"
+                id="width-ex2-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>
+        </DataList>
+      </div>
+      <div key="example-3">
+        <TextContent>
+          <Text component={TextVariants.h4}>Flex modifiers - example 3</Text>
+        </TextContent>
+        <DataList aria-label="Width modifier data list example 3">
+          <DataListItem aria-labelledby="width-ex3-item1" isExpanded={show}>
+            <DataListItemRow>
+              <DataListToggle
+                isExpanded={show}
+                id="width-ex3-toggle1"
+                aria-controls="width-ex3-expand1"
+                onClick={() => setShow(!show)}
+              />
+              <DataListCheck aria-labelledby="width-ex3-item1" name="width-ex3-item1" />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell width={5} key="width 5">
+                    <div style={previewPlaceholder}>
+                      <b id="width-ex3-item1">width 5</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell width={2} key="width 2">
+                    <div style={previewPlaceholder}>
+                      <b>width 2</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell key="default">
+                    <div style={previewPlaceholder}>default</div>
+                  </DataListCell>
+                ]}
+              />
+              <DataListAction
+                aria-labelledby="width-ex3-item1 width-ex3-action1"
+                id="width-ex3-action1"
+                aria-label="Actions"
+                isPlainButtonAction
+              >
+                <Dropdown
+                  isPlain
+                  position={DropdownPosition.right}
+                  isOpen={isOpen2}
+                  onSelect={onSelect2}
+                  toggle={<KebabToggle onToggle={onToggle2} />}
+                  dropdownItems={[
+                    <DropdownItem key="link">Link</DropdownItem>,
+                    <DropdownItem key="action" component="button">
+                      Action
+                    </DropdownItem>,
+                    <DropdownItem key="disabled link" isDisabled>
+                      Disabled Link
+                    </DropdownItem>
+                  ]}
+                />
+              </DataListAction>
+            </DataListItemRow>
+            <DataListContent aria-label="Primary Content Details" id="width-ex3-expand1" isHidden={!show}>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua.
+              </p>
+            </DataListContent>
+          </DataListItem>
+        </DataList>
+      </div>
+    </>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -177,4 +177,4 @@ class SimpleExpandableSection extends React.Component {
     );
   }
 }
-```
+```

package/src/components/JumpLinks/JumpLinksItem.tsx

@@ -33,7 +33,11 @@ export const JumpLinksItem: React.FunctionComponent<JumpLinksItemProps> = ({
   children = childrenArr.filter(child => child.type !== JumpLinksList);
 
   return (
-    <li className={css(styles.jumpLinksItem, isActive && styles.modifiers.current, className)} {...props}>
+    <li
+      className={css(styles.jumpLinksItem, isActive && styles.modifiers.current, className)}
+      {...(isActive && { 'aria-current': 'location' })}
+      {...props}
+    >
       <a className={styles.jumpLinksLink} href={href} onClick={onClick}>
         <span className={styles.jumpLinksLinkText}>{children}</span>
       </a>

package/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap

@@ -89,6 +89,7 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-c-jump-links__list"
           >
             <li
+              aria-current="location"
               class="pf-c-jump-links__item pf-m-current"
             >
               <a
@@ -189,6 +190,7 @@ exports[`jumplinks centered 1`] = `
           </a>
         </li>
         <li
+          aria-current="location"
           class="pf-c-jump-links__item pf-m-current"
         >
           <a
@@ -255,6 +257,7 @@ exports[`jumplinks with label 1`] = `
           </a>
         </li>
         <li
+          aria-current="location"
           class="pf-c-jump-links__item pf-m-current"
         >
           <a
@@ -314,6 +317,7 @@ exports[`simple jumplinks 1`] = `
           </a>
         </li>
         <li
+          aria-current="location"
           class="pf-c-jump-links__item pf-m-current"
         >
           <a
@@ -380,6 +384,7 @@ exports[`vertical with label 1`] = `
           </a>
         </li>
         <li
+          aria-current="location"
           class="pf-c-jump-links__item pf-m-current"
         >
           <a