@patternfly/react-core 6.2.0-prerelease.1 → 6.2.0-prerelease.3

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.2","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.2","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.2","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.1",
+  "version": "6.2.0-prerelease.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "99e344c2f5d577d518bcae57d13b7ab5fa191c03"
+  "gitHead": "1ccc691a770cdf0fda24a569a14684199cdeef35"
 }

package/src/components/TextArea/TextArea.tsx

@@ -8,7 +8,8 @@ import { FormControlIcon } from '../FormControl/FormControlIcon';
 export enum TextAreResizeOrientation {
   horizontal = 'horizontal',
   vertical = 'vertical',
-  both = 'both'
+  both = 'both',
+  none = 'none'
 }
 
 export enum TextAreaReadOnlyVariant {
@@ -37,7 +38,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   /** A callback for when the text area value changes. */
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
   /** Sets the orientation to limit the resize to */
-  resizeOrientation?: 'horizontal' | 'vertical' | 'both';
+  resizeOrientation?: 'horizontal' | 'vertical' | 'both' | 'none';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
   'aria-label'?: string;
   /** @hide A reference object to attach to the text area. */
@@ -118,10 +119,10 @@ class TextAreaBase extends React.Component<TextAreaProps> {
       onFocus,
       ...props
     } = this.props;
-    const orientation = `resize${capitalize(resizeOrientation)}` as
-      | 'resizeVertical'
-      | 'resizeHorizontal'
-      | 'resizeBoth';
+    const orientation =
+      resizeOrientation !== 'none'
+        ? (`resize${capitalize(resizeOrientation)}` as 'resizeVertical' | 'resizeHorizontal' | 'resizeBoth')
+        : undefined;
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
@@ -130,7 +131,7 @@ class TextAreaBase extends React.Component<TextAreaProps> {
           styles.formControl,
           readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
-          resizeOrientation && styles.modifiers[orientation],
+          resizeOrientation !== 'none' && styles.modifiers[orientation],
           isDisabled && styles.modifiers.disabled,
           hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className

package/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@testing-library/jest-dom';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -93,6 +94,16 @@ test('Text area is not invalid by default', () => {
   expect(screen.getByRole('textbox')).not.toBeInvalid();
 });
 
+test('Renders vertically & resizable text area by default', () => {
+  render(<TextArea aria-label="vertical resize textarea" />);
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-both');
+});
+
+test('Renders vertically & resizable text area when resizeOrientation is set to both', () => {
+  render(<TextArea aria-label="vertical resize textarea" resizeOrientation="both" />);
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-both');
+});
+
 test('Renders vertically resizable text area', () => {
   render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
   expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-vertical');
@@ -103,6 +114,13 @@ test('Renders horizontally resizable text area', () => {
   expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-horizontal');
 });
 
+test('Disables resizable text area', () => {
+  render(<TextArea aria-label="disabled resize textarea" resizeOrientation="none" />);
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-vertical');
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-horizontal');
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-both');
+});
+
 test('Throws console error when no aria-label or id is given', () => {
   jest.spyOn(global.console, 'error');
 

package/src/components/TextArea/examples/TextArea.md

@@ -38,6 +38,12 @@ propComponents: ['TextArea']
 
 ```
 
+### Not resizable
+
+```ts file="./TextAreaResizableNone.tsx"
+
+```
+
 ### Uncontrolled
 
 ```ts file="./TextAreaUncontrolled.tsx"

package/src/components/TextArea/examples/TextAreaResizableNone.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaResizeNone: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={(_event, value) => setValue(value)}
+      resizeOrientation="none"
+      aria-label="text area resize none example"
+    />
+  );
+};

package/src/demos/DataList/examples/DataListActionable.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  Button,
+  Content,
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListItemCells,
+  DataListAction,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  PageSection,
+  Title
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const DataListActionable: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isDeleted, setIsDeleted] = React.useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
+      <PageSection>
+        <Content>
+          <Title headingLevel="h1">Projects</Title>
+          <Content component="p">This is a demo that showcases PatternFly Data List</Content>
+        </Content>
+      </PageSection>
+      <PageSection>
+        <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"
+              >
+                <Dropdown
+                  popperProps={{ position: 'right' }}
+                  onSelect={onSelect}
+                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen}
+                      onClick={onToggle}
+                      variant="plain"
+                      aria-label="Data list with actions example kebab toggle"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                  isOpen={isOpen}
+                  onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+                >
+                  <DropdownList>
+                    <DropdownItem key="action">Action</DropdownItem>
+                    {/* Prevent default onClick functionality for example
+                  purposes */}
+                    <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                      Link
+                    </DropdownItem>
+                    <DropdownItem key="disabled action" isDisabled>
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem
+                      key="disabled link"
+                      isDisabled
+                      to="#"
+                      onClick={(event: any) => event.preventDefault()}
+                    >
+                      Disabled Link
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
+              </DataListAction>
+            </DataListItemRow>
+          </DataListItem>
+        </DataList>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/DataListDemo.md

@@ -30,6 +30,11 @@ import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 ```
 
+### Actionable
+
+```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
+```
+
 ### Static bottom pagination
 
 ```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen

package/src/demos/DescriptionList/DescriptionList.md

@@ -4,6 +4,7 @@ section: components
 ---
 
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
@@ -11,4 +12,9 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 ### Basic
 
 ```js file='./examples/DescriptionListBasic.tsx' isFullscreen
-```
+```
+
+### In drawer
+
+```js file='./examples/DescriptionListInDrawer.tsx' isFullscreen
+```

package/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  Gallery,
+  Content,
+  PageSection,
+  GalleryItem,
+  Card,
+  CardBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelBody,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Button,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListInDrawer: React.FunctionComponent = () => {
+  const drawerRef = React.useRef<HTMLDivElement>(null);
+  const btnRef = React.useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = React.useState(true);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+    btnRef.current && btnRef.current.focus();
+  };
+
+  const onToggleDrawer = () => {
+    setIsExpanded((prevIsExpanded) => !prevIsExpanded);
+  };
+
+  const panelContent = (
+    <>
+      <DrawerHead>
+        <Title headingLevel="h2">
+          <span ref={drawerRef} tabIndex={isExpanded ? 0 : -1}>
+            test
+          </span>
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Name</DescriptionListTerm>
+            <DescriptionListDescription>test</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Namespace</DescriptionListTerm>
+            <DescriptionListDescription>
+              <a href="#">mary-test</a>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Labels</DescriptionListTerm>
+            <DescriptionListDescription>app=test</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod selector</DescriptionListTerm>
+            <DescriptionListDescription>Node selector is not available at this time</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Tolerations</DescriptionListTerm>
+            <DescriptionListDescription>No tolerations</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Annotations</DescriptionListTerm>
+            <DescriptionListDescription>No annotaions</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Status</DescriptionListTerm>
+            <DescriptionListDescription>Active</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Created at:</DescriptionListTerm>
+            <DescriptionListDescription>3 minutes agot</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod selector</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Button variant="link" isInline icon={<PlusCircleIcon />}>
+                app=MyApp
+              </Button>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Session affinity</DescriptionListTerm>
+            <DescriptionListDescription>None</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Latest version</DescriptionListTerm>
+            <DescriptionListDescription>1.0</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Update strategy</DescriptionListTerm>
+            <DescriptionListDescription>Rolling</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Timeout</DescriptionListTerm>
+            <DescriptionListDescription>600 seconds</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Max available</DescriptionListTerm>
+            <DescriptionListDescription>25% of 1 pod</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Max surge</DescriptionListTerm>
+            <DescriptionListDescription>25% greater than 1 pod</DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </DrawerPanelBody>
+    </>
+  );
+
+  const drawerContent = (
+    <Gallery hasGutter>
+      <GalleryItem key={0}>
+        <Card>
+          <CardBody>
+            <Button variant="link" isInline onClick={onToggleDrawer} ref={btnRef}>
+              {`${isExpanded ? 'Close' : 'Open'} drawer`}
+            </Button>
+          </CardBody>
+        </Card>
+      </GalleryItem>
+      {Array.from({ length: 30 }).map((_value, index) => (
+        <GalleryItem key={index + 1}>
+          <Card>
+            <CardBody>{`Card-${index + 1}`}</CardBody>
+          </Card>
+        </GalleryItem>
+      ))}
+    </Gallery>
+  );
+
+  return (
+    <DashboardWrapper
+      notificationDrawer={panelContent}
+      isNotificationDrawerExpanded={isExpanded}
+      onNotificationDrawerExpand={onExpand}
+    >
+      <PageSection>
+        <Content>
+          <Content component="h1">Main title</Content>
+          <Content component="p">This is a full page demo.</Content>
+        </Content>
+      </PageSection>
+      <PageSection>{drawerContent}</PageSection>
+    </DashboardWrapper>
+  );
+};