[EuiListGroupItem] Respect isDisabled on extraAction config (#4359)

* use extraAction isDisabled * add test * CL
elastic · Dec 9, 2020 · a019e8c · a019e8c
1 parent 33221ca
commit a019e8c
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Added `!default` to SASS variables of `EuiCollapsibleNav` ([#4335](https://github.com/elastic/eui/pull/4335))
 - Fixed `EuiDataGrid` column property `displayAsText`. Column headers prefer `displayAsText` over `id`; `display` still takes precedence. If provided, the filter in the sort-popover will search against `displayAsText` instead of `id`. ([#4351](https://github.com/elastic/eui/pull/4351))
 - Fixed propagation of `esc` key presses closing parent popovers ([#4336](https://github.com/elastic/eui/pull/4336))
+- Fixed overwritten `isDisabled` prop on `EuiListGroupItem` `extraAction` config ([#4359](https://github.com/elastic/eui/pull/4359))
 
 
 **Theme: Amsterdam**

diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -102,6 +102,34 @@ exports[`EuiListGroupItem props color text is rendered 1`] = `
 </li>
 `;
 
+exports[`EuiListGroupItem props extraAction can be disabled 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+  <button
+    class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction"
+    disabled=""
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+      class="euiButtonIcon__icon"
+      data-euiicon-type="empty"
+    />
+  </button>
+</li>
+`;
+
 exports[`EuiListGroupItem props extraAction is rendered 1`] = `
 <li
   class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction"

diff --git a/src/components/list_group/list_group_item.test.tsx b/src/components/list_group/list_group_item.test.tsx
@@ -124,6 +124,20 @@ describe('EuiListGroupItem', () => {
 
         expect(component).toMatchSnapshot();
       });
+
+      test('can be disabled', () => {
+        const component = render(
+          <EuiListGroupItem
+            label="Label"
+            extraAction={{
+              iconType: 'empty',
+              isDisabled: true,
+            }}
+          />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
     });
 
     describe('href', () => {

diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
@@ -196,7 +196,13 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   let extraActionNode;
 
   if (extraAction) {
-    const { iconType, alwaysShow, className, ...rest } = extraAction;
+    const {
+      iconType,
+      alwaysShow,
+      className,
+      isDisabled: actionIsDisabled,
+      ...rest
+    } = extraAction;
 
     const extraActionClasses = classNames(
       'euiListGroupItem__extraAction',
@@ -211,7 +217,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
         className={extraActionClasses}
         iconType={iconType}
         {...rest}
-        disabled={isDisabled}
+        disabled={isDisabled || actionIsDisabled}
       />
     );
   }