@patternfly/react-core 4.226.2 → 4.227.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.226.2",
+  "version": "4.227.0",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.77.2",
-    "@patternfly/react-styles": "^4.76.2",
-    "@patternfly/react-tokens": "^4.78.2",
+    "@patternfly/react-icons": "^4.78.0",
+    "@patternfly/react-styles": "^4.77.0",
+    "@patternfly/react-tokens": "^4.79.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "fb67d6b2dfbfd2b4080e1313101f4d663a0a09c3"
+  "gitHead": "9ab68189931ffebc2eb1d2dd3a39ad5d8bc88b58"
 }

package/src/components/Dropdown/DropdownToggle.tsx

@@ -120,6 +120,7 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
           styles.modifiers.splitButton,
           splitButtonVariant === 'action' && styles.modifiers.action,
           (toggleVariant === 'primary' || isPrimary) && splitButtonVariant === 'action' && styles.modifiers.primary,
+          toggleVariant === 'secondary' && splitButtonVariant === 'action' && styles.modifiers.secondary,
           isDisabled && styles.modifiers.disabled
         )}
       >

package/src/components/Dropdown/__tests__/DropdownToggle.test.tsx

@@ -184,6 +184,24 @@ describe('DropdownToggle', () => {
       expect(asFragment()).toMatchSnapshot();
     });
 
+    test('action split button - renders secondary variant', () => {
+      const { asFragment } = render(
+        <DropdownToggle
+          id="Dropdown Toggle"
+          toggleVariant="secondary"
+          splitButtonItems={[<div key="1">test</div>]}
+          splitButtonVariant="action"
+          parentRef={document.createElement('div')}
+        >
+          Dropdown
+        </DropdownToggle>
+      );
+
+      const dropdownToggle = screen.getByRole('button').parentElement;
+
+      expect(dropdownToggle).toHaveClass('pf-m-secondary');
+    });
+
     test('class changes', () => {
       const { asFragment } = render(
         <DropdownContext.Provider

package/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap

@@ -198,7 +198,7 @@ exports[`DropdownToggle state class changes 1`] = `
   <button
     aria-expanded="false"
     class="pf-c-dropdown__toggle"
-    data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
+    data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
     data-ouia-component-type="PF4/DropdownToggle"
     data-ouia-safe="true"
     id="Dropdown Toggle"

package/src/components/Dropdown/examples/Dropdown.md

@@ -113,6 +113,11 @@ import avatarImg from '../../Avatar/examples/avatarImg.svg';
 ```ts file="./DropdownSplitButtonActionPrimary.tsx"
 ```
 
+### Split button secondary action
+
+```ts file="./DropdownSplitButtonActionSecondary.tsx"
+```
+
 ### Basic panel
 
 ```ts file="./DropdownBasicPanel.tsx"

package/src/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const DropdownSplitButtonActionSecondary: React.FunctionComponent = () => {
+  const [isActionOpen, setIsActionOpen] = React.useState(false);
+  const [isCogOpen, setIsCogOpen] = React.useState(false);
+
+  const onActionToggle = (isActionOpen: boolean) => {
+    setIsActionOpen(isActionOpen);
+  };
+  const onCogToggle = (isCogOpen: boolean) => {
+    setIsCogOpen(isCogOpen);
+  };
+
+  const onActionClick = () => {
+    window.alert('You selected an action button!');
+  };
+  const onCogClick = () => {
+    window.alert('You selected the Cog!');
+  };
+
+  const onActionFocus = () => {
+    const element = document.getElementById('toggle-split-button-action-secondary');
+    element.focus();
+  };
+  const onCogFocus = () => {
+    const element = document.getElementById('toggle-split-button-cog-secondary');
+    element.focus();
+  };
+
+  const onActionSelect = () => {
+    setIsActionOpen(false);
+    onActionFocus();
+  };
+  const onCogSelect = () => {
+    setIsCogOpen(false);
+    onCogFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="action" component="button" onClick={onActionClick}>
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" component="button" isDisabled onClick={onActionClick}>
+      Disabled action
+    </DropdownItem>,
+    <DropdownItem key="other action" component="button" onClick={onActionClick}>
+      Other action
+    </DropdownItem>
+  ];
+
+  const dropdownIconItems = [
+    <DropdownItem key="action" component="button" icon={<CogIcon />} onClick={onActionClick}>
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" component="button" icon={<BellIcon />} isDisabled onClick={onActionClick}>
+      Disabled action
+    </DropdownItem>,
+    <DropdownItem key="other action" component="button" icon={<CubesIcon />} onClick={onActionClick}>
+      Other action
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <Dropdown
+        onSelect={onActionSelect}
+        toggle={
+          <DropdownToggle
+            id="toggle-split-button-action-secondary"
+            splitButtonItems={[
+              <DropdownToggleAction key="action" onClick={onActionClick}>
+                Action
+              </DropdownToggleAction>
+            ]}
+            toggleVariant="secondary"
+            splitButtonVariant="action"
+            onToggle={onActionToggle}
+          />
+        }
+        isOpen={isActionOpen}
+        dropdownItems={dropdownItems}
+      />{' '}
+      <Dropdown
+        onSelect={onCogSelect}
+        toggle={
+          <DropdownToggle
+            id="toggle-split-button-cog-secondary"
+            splitButtonItems={[
+              <DropdownToggleAction key="cog-action" aria-label="Action" onClick={onCogClick}>
+                <CogIcon />
+              </DropdownToggleAction>
+            ]}
+            toggleVariant="secondary"
+            splitButtonVariant="action"
+            onToggle={onCogToggle}
+          />
+        }
+        isOpen={isCogOpen}
+        dropdownItems={dropdownIconItems}
+      />
+    </React.Fragment>
+  );
+};