From 3c2db98183db1498fde26ce815ce6572a61f2467 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Tue, 3 Jan 2023 11:37:21 -0500
Subject: [PATCH 1/5] fix(DualListSelector): added empty state to composable
 examples

---
 .../DualListSelector/DualListSelectorPane.tsx |  16 ++-
 .../examples/DualListSelector.md              |   1 +
 .../examples/DualListSelectorComposable.tsx   | 128 +++++++++++-------
 .../DualListSelectorComposableTree.tsx        |  39 +++++-
 4 files changed, 129 insertions(+), 55 deletions(-)

diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
index a633181e03f..e0c3398010a 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
@@ -13,7 +13,7 @@ import { SearchInput } from '../SearchInput';
  * such as sorting, can also be passed into this sub-component.
  */
 
-export interface DualListSelectorPaneProps {
+export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
   /** Additional classes applied to the dual list selector pane. */
   className?: string;
   /** A dual list selector list or dual list selector tree to be rendered in the pane. */
@@ -65,6 +65,8 @@ export interface DualListSelectorPaneProps {
   searchInputAriaLabel?: string;
   /** @hide Callback for updating the filtered options in DualListSelector. To be used when isSearchable is true. */
   onFilterUpdate?: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
+  /** Height of the list of options rendered in the pane. **/
+  listHeight?: string;
 }
 
 export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps> = ({
@@ -87,6 +89,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   filterOption,
   id = getUniqueId('dual-list-selector-pane'),
   isDisabled = false,
+  listHeight,
   ...props
 }: DualListSelectorPaneProps) => {
   const [input, setInput] = React.useState('');
@@ -198,12 +201,21 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             displayOption={displayOption}
             id={`${id}-list`}
             isDisabled={isDisabled}
+            {...(listHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listHeight } as React.CSSProperties
+            })}
           >
             {children}
           </DualListSelectorListWrapper>
         )}
         {isTree && (
-          <DualListSelectorListWrapper aria-labelledby={`${id}-status`} id={`${id}-list`}>
+          <DualListSelectorListWrapper
+            aria-labelledby={`${id}-status`}
+            id={`${id}-list`}
+            {...(listHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listHeight } as React.CSSProperties
+            })}
+          >
             {options.length > 0 ? (
               <DualListSelectorList>
                 <DualListSelectorTree
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
index b70977ba16e..194dd24aa3e 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
@@ -20,6 +20,7 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
index 2afbf31970c..14319ee30b6 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -8,13 +8,21 @@ import {
   DualListSelectorListItem,
   DualListSelectorControlsWrapper,
   DualListSelectorControl,
-  SearchInput
+  SearchInput,
+  Title,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStatePrimary,
+  EmptyStateSecondaryActions
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Option {
   text: string;
@@ -86,25 +94,23 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     }
   };
 
-  // builds a search input - used in each dual list selector pane
-  const buildSearchInput = (isAvailable: boolean) => {
-    const onChange = (value: string) => {
-      isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
-      const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
-      toFilter.forEach(option => {
-        option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
-      });
-    };
-
-    return (
-      <SearchInput
-        value={isAvailable ? availableFilter : chosenFilter}
-        onChange={onChange}
-        onClear={() => onChange('')}
-      />
-    );
+  const onFilterChange = (value: string, isAvailable: boolean) => {
+    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+    toFilter.forEach(option => {
+      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+    });
   };
 
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => (
+    <SearchInput
+      value={isAvailable ? availableFilter : chosenFilter}
+      onChange={value => onFilterChange(value, isAvailable)}
+      onClear={() => onFilterChange('', isAvailable)}
+    />
+  );
+
   // builds a sort control - passed to both dual list selector panes
   const buildSort = (isAvailable: boolean) => {
     const onSort = () => {
@@ -141,21 +147,36 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         } options selected`}
         searchInput={buildSearchInput(true)}
         actions={[buildSort(true)]}
+        listHeight="270px"
       >
-        <DualListSelectorList>
-          {availableOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-available-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {availableFilter !== '' && availableOptions.filter(option => option.isVisible).length === 0 && (
+          <EmptyState variant={EmptyStateVariant.small}>
+            <EmptyStateIcon icon={SearchIcon} />
+            <Title headingLevel="h4" size="md">
+              No results found
+            </Title>
+            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+            <Button variant="link" onClick={() => onFilterChange('', true)}>
+              Clear all filters
+            </Button>
+          </EmptyState>
+        )}
+        {availableOptions.filter(option => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {availableOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-available-option-${index}`}
+                  onOptionSelect={e => onOptionSelect(e, index, false)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl
@@ -199,21 +220,36 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         searchInput={buildSearchInput(false)}
         actions={[buildSort(false)]}
         isChosen
+        listHeight="270px"
       >
-        <DualListSelectorList>
-          {chosenOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-chosen-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, true)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {chosenFilter !== '' && chosenOptions.filter(option => option.isVisible).length === 0 && (
+          <EmptyState variant={EmptyStateVariant.small}>
+            <EmptyStateIcon icon={SearchIcon} />
+            <Title headingLevel="h4" size="md">
+              No results found
+            </Title>
+            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+            <Button variant="link" onClick={() => onFilterChange('', false)}>
+              Clear all filters
+            </Button>
+          </EmptyState>
+        )}
+        {chosenOptions.filter(option => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {chosenOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-chosen-option-${index}`}
+                  onOptionSelect={e => onOptionSelect(e, index, true)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     </DualListSelector>
   );
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
index c88ae3a46ee..c3bef7e8c43 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
@@ -7,12 +7,21 @@ import {
   DualListSelectorControl,
   DualListSelectorTree,
   DualListSelectorTreeItemData,
-  SearchInput
+  SearchInput,
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStatePrimary,
+  EmptyStateSecondaryActions
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface FoodNode {
   id: string;
@@ -235,19 +244,35 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)
     ).length;
     const status = `${numSelected} of ${numOptions} options selected`;
+    const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';
     return (
       <DualListSelectorPane
         title={isChosen ? 'Chosen' : 'Available'}
         status={status}
         searchInput={buildSearchInput(isChosen)}
         isChosen={isChosen}
+        listHeight="270px"
       >
-        <DualListSelectorList>
-          <DualListSelectorTree
-            data={options}
-            onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
-          />
-        </DualListSelectorList>
+        {filterApplied && options.length === 0 && (
+          <EmptyState variant={EmptyStateVariant.small}>
+            <EmptyStateIcon icon={SearchIcon} />
+            <Title headingLevel="h4" size="md">
+              No results found
+            </Title>
+            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+            <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
+              Clear all filters
+            </Button>
+          </EmptyState>
+        )}
+        {options.length > 0 && (
+          <DualListSelectorList>
+            <DualListSelectorTree
+              data={options}
+              onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
+            />
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     );
   };

From 366b71ddeeb166c9f61cea200ce9593f4a1aebc4 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Tue, 3 Jan 2023 11:44:50 -0500
Subject: [PATCH 2/5] remove unused imports

---
 .../DualListSelector/examples/DualListSelectorComposable.tsx  | 4 +---
 .../examples/DualListSelectorComposableTree.tsx               | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
index 14319ee30b6..23e282e7719 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -13,9 +13,7 @@ import {
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStatePrimary,
-  EmptyStateSecondaryActions
+  EmptyStateBody
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
index c3bef7e8c43..6268eaa7746 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
@@ -13,9 +13,7 @@ import {
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStatePrimary,
-  EmptyStateSecondaryActions
+  EmptyStateBody
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';

From de4cc0aa90347de8c67cc902f70fb2e32d3028f6 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Wed, 4 Jan 2023 08:35:02 -0500
Subject: [PATCH 3/5] update per PR comments

---
 .../DualListSelector/DualListSelectorPane.tsx | 14 +++----
 .../examples/DualListSelectorComposable.tsx   | 39 ++++++++-----------
 .../DualListSelectorComposableTree.tsx        |  2 +-
 3 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
index e0c3398010a..178de4d296b 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
@@ -65,8 +65,8 @@ export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivE
   searchInputAriaLabel?: string;
   /** @hide Callback for updating the filtered options in DualListSelector. To be used when isSearchable is true. */
   onFilterUpdate?: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
-  /** Height of the list of options rendered in the pane. **/
-  listHeight?: string;
+  /** Minimum height of the list of options rendered in the pane. **/
+  listMinHeight?: string;
 }
 
 export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps> = ({
@@ -89,7 +89,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   filterOption,
   id = getUniqueId('dual-list-selector-pane'),
   isDisabled = false,
-  listHeight,
+  listMinHeight,
   ...props
 }: DualListSelectorPaneProps) => {
   const [input, setInput] = React.useState('');
@@ -201,8 +201,8 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             displayOption={displayOption}
             id={`${id}-list`}
             isDisabled={isDisabled}
-            {...(listHeight && {
-              style: { '--pf-c-dual-list-selector__menu--MinHeight': listHeight } as React.CSSProperties
+            {...(listMinHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
             })}
           >
             {children}
@@ -212,8 +212,8 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
           <DualListSelectorListWrapper
             aria-labelledby={`${id}-status`}
             id={`${id}-list`}
-            {...(listHeight && {
-              style: { '--pf-c-dual-list-selector__menu--MinHeight': listHeight } as React.CSSProperties
+            {...(listMinHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
             })}
           >
             {options.length > 0 ? (
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
index 23e282e7719..55feaf74947 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -136,6 +136,19 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     );
   };
 
+  const buildEmptyState = (isAvailable: boolean) => (
+    <EmptyState variant={EmptyStateVariant.small}>
+      <EmptyStateIcon icon={SearchIcon} />
+      <Title headingLevel="h4" size="md">
+        No results found
+      </Title>
+      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+      <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+        Clear all filters
+      </Button>
+    </EmptyState>
+  );
+
   return (
     <DualListSelector>
       <DualListSelectorPane
@@ -145,19 +158,10 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         } options selected`}
         searchInput={buildSearchInput(true)}
         actions={[buildSort(true)]}
-        listHeight="270px"
+        listMinHeight="270px"
       >
         {availableFilter !== '' && availableOptions.filter(option => option.isVisible).length === 0 && (
-          <EmptyState variant={EmptyStateVariant.small}>
-            <EmptyStateIcon icon={SearchIcon} />
-            <Title headingLevel="h4" size="md">
-              No results found
-            </Title>
-            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-            <Button variant="link" onClick={() => onFilterChange('', true)}>
-              Clear all filters
-            </Button>
-          </EmptyState>
+          buildEmptyState(true)
         )}
         {availableOptions.filter(option => option.isVisible).length > 0 && (
           <DualListSelectorList>
@@ -218,19 +222,10 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         searchInput={buildSearchInput(false)}
         actions={[buildSort(false)]}
         isChosen
-        listHeight="270px"
+        listMinHeight="270px"
       >
         {chosenFilter !== '' && chosenOptions.filter(option => option.isVisible).length === 0 && (
-          <EmptyState variant={EmptyStateVariant.small}>
-            <EmptyStateIcon icon={SearchIcon} />
-            <Title headingLevel="h4" size="md">
-              No results found
-            </Title>
-            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-            <Button variant="link" onClick={() => onFilterChange('', false)}>
-              Clear all filters
-            </Button>
-          </EmptyState>
+          buildEmptyState(false)
         )}
         {chosenOptions.filter(option => option.isVisible).length > 0 && (
           <DualListSelectorList>
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
index 6268eaa7746..96ece9db799 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
@@ -249,7 +249,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         status={status}
         searchInput={buildSearchInput(isChosen)}
         isChosen={isChosen}
-        listHeight="270px"
+        listMinHeight="270px"
       >
         {filterApplied && options.length === 0 && (
           <EmptyState variant={EmptyStateVariant.small}>

From 8dc969c8d2432fb215db0244921aac1ed2010fe8 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Wed, 4 Jan 2023 22:07:27 -0500
Subject: [PATCH 4/5] attempt to fix linting errors

---
 .../examples/DualListSelectorComposable.tsx            | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
index 55feaf74947..97ac6288807 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -160,9 +160,9 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         actions={[buildSort(true)]}
         listMinHeight="270px"
       >
-        {availableFilter !== '' && availableOptions.filter(option => option.isVisible).length === 0 && (
-          buildEmptyState(true)
-        )}
+        {availableFilter !== '' &&
+          availableOptions.filter(option => option.isVisible).length === 0 &&
+          buildEmptyState(true)}
         {availableOptions.filter(option => option.isVisible).length > 0 && (
           <DualListSelectorList>
             {availableOptions.map((option, index) =>
@@ -224,9 +224,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         isChosen
         listMinHeight="270px"
       >
-        {chosenFilter !== '' && chosenOptions.filter(option => option.isVisible).length === 0 && (
-          buildEmptyState(false)
-        )}
+        {chosenFilter !== '' && chosenOptions.filter(option => option.isVisible).length === 0 && buildEmptyState(false)}
         {chosenOptions.filter(option => option.isVisible).length > 0 && (
           <DualListSelectorList>
             {chosenOptions.map((option, index) =>

From 3a49a3ae539c622e20929509907af961da372113 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Mon, 9 Jan 2023 13:54:20 -0500
Subject: [PATCH 5/5] wrap clear button in EmptyStatePrimary

---
 .../examples/DualListSelectorComposable.tsx       | 15 +++++++++------
 .../examples/DualListSelectorComposableTree.tsx   | 13 ++++++++-----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
index 97ac6288807..08bf7c82752 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -13,7 +13,8 @@ import {
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
-  EmptyStateBody
+  EmptyStateBody,
+  EmptyStatePrimary
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
@@ -143,9 +144,11 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         No results found
       </Title>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-      <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
-        Clear all filters
-      </Button>
+      <EmptyStatePrimary>
+        <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+          Clear all filters
+        </Button>
+      </EmptyStatePrimary>
     </EmptyState>
   );
 
@@ -158,7 +161,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         } options selected`}
         searchInput={buildSearchInput(true)}
         actions={[buildSort(true)]}
-        listMinHeight="270px"
+        listMinHeight="300px"
       >
         {availableFilter !== '' &&
           availableOptions.filter(option => option.isVisible).length === 0 &&
@@ -222,7 +225,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         searchInput={buildSearchInput(false)}
         actions={[buildSort(false)]}
         isChosen
-        listMinHeight="270px"
+        listMinHeight="300px"
       >
         {chosenFilter !== '' && chosenOptions.filter(option => option.isVisible).length === 0 && buildEmptyState(false)}
         {chosenOptions.filter(option => option.isVisible).length > 0 && (
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
index 96ece9db799..e711d7baa99 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
@@ -13,7 +13,8 @@ import {
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
-  EmptyStateBody
+  EmptyStateBody,
+  EmptyStatePrimary
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
@@ -249,7 +250,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         status={status}
         searchInput={buildSearchInput(isChosen)}
         isChosen={isChosen}
-        listMinHeight="270px"
+        listMinHeight="300px"
       >
         {filterApplied && options.length === 0 && (
           <EmptyState variant={EmptyStateVariant.small}>
@@ -258,9 +259,11 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
               No results found
             </Title>
             <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-            <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
-              Clear all filters
-            </Button>
+            <EmptyStatePrimary>
+              <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
+                Clear all filters
+              </Button>
+            </EmptyStatePrimary>
           </EmptyState>
         )}
         {options.length > 0 && (