From 5e3a16cf70ed92288433069a9f05cdb278f6108d Mon Sep 17 00:00:00 2001 From: mcoker Date: Mon, 11 Sep 2023 22:08:40 -0500 Subject: [PATCH 1/2] chore: update breadcrumb dropdown item arrow to work in RTL --- .../Breadcrumb/examples/BreadcrumbDropdown.tsx | 7 +++---- .../Menu/examples/MenuWithDrilldownBreadcrumbs.tsx | 9 ++++----- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx index ca6d166c18c..b0f178a6377 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx @@ -10,17 +10,16 @@ import { MenuToggle, MenuToggleElement } from '@patternfly/react-core'; -import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; const dropdownItems = [ - } key="edit"> + Edit , - } key="action"> + Deployment , - } key="apps"> + Applications ]; diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx index cbeb81777dd..4da4a3792c6 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx @@ -21,7 +21,6 @@ import { import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon'; -import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; @@ -129,7 +128,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => { } + direction="up" onClick={(event: any) => drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb) } @@ -169,7 +168,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => { } + direction="up" onClick={(event: any) => drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb) } @@ -221,7 +220,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => { } + direction="up" onClick={(event: any) => drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb) } @@ -266,7 +265,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => { } + direction="up" onClick={(event: any) => drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb) } From 53bcbdb2e4c723d7d5f9547f10d8f63af49e04da Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 19 Sep 2023 13:29:38 -0500 Subject: [PATCH 2/2] chore: use icon with shouldMirrorRTL instead --- .../examples/BreadcrumbDropdown.tsx | 29 +++++++++-- .../examples/MenuWithDrilldownBreadcrumbs.tsx | 48 +++++++++++++------ 2 files changed, 59 insertions(+), 18 deletions(-) diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx index b0f178a6377..946f7b8253b 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx @@ -7,19 +7,42 @@ import { Dropdown, DropdownList, DropdownItem, + Icon, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; +import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; const dropdownItems = [ - + + + + } + key="edit" + > Edit , - + + + + } + key="action" + > Deployment , - + + + + } + key="apps" + > Applications ]; diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx index 4da4a3792c6..daffdd4da10 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx @@ -1,26 +1,28 @@ import React from 'react'; import { - Menu, - MenuContent, - MenuList, - MenuItem, - Divider, - DrilldownMenu, + Badge, Breadcrumb, - BreadcrumbItem, BreadcrumbHeading, - MenuBreadcrumb, + BreadcrumbItem, Checkbox, + Divider, + DrilldownMenu, Dropdown, - DropdownList, DropdownItem, + DropdownList, + Icon, + Menu, + MenuBreadcrumb, + MenuContent, + MenuItem, + MenuList, MenuToggle, - MenuToggleElement, - Badge + MenuToggleElement } from '@patternfly/react-core'; import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon'; +import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; @@ -128,7 +130,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => { + + + } onClick={(event: any) => drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb) } @@ -168,7 +174,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => { + + + } onClick={(event: any) => drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb) } @@ -220,7 +230,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => { + + + } onClick={(event: any) => drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb) } @@ -265,7 +279,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => { + + + } onClick={(event: any) => drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb) }