revert: icons-for-expandable-buttons (#3701)

Author: mariksav

pages/button-dropdown/icon-expandable.page.tsx

@@ -45,10 +45,6 @@ const checkRenderedGroup = (
       );
     }
   }
-
-  if (group.iconName || group.iconSvg || group.iconUrl) {
-    expect(renderedItem.findIcon()).toBeTruthy();
-  }
 };
 
 const checkElementItem = (
@@ -436,44 +432,6 @@ const items: ButtonDropdownProps.Items = [
         wrapper.openDropdown();
         expect(wrapper.findItemById('i1')!.findAllIcons()).toHaveLength(2);
       });
-
-      test.each([true, false])('in category headers when expandableGroups is %s', expandableGroups => {
-        const svg = (
-          <svg className="test-svg" focusable="false">
-            <circle className="test-svg-inner" cx="8" cy="8" r="7" />
-          </svg>
-        );
-        const groupedCategories: ButtonDropdownProps.ItemOrGroup[] = [
-          {
-            id: 'category1',
-            text: 'category1',
-            iconName: 'folder',
-            items: [{ id: 'i1', text: 'item1' }],
-          },
-          {
-            id: 'category2',
-            text: 'category2',
-            iconUrl: 'data:image/png;base64,aaaa',
-            items: [{ id: 'i2', text: 'item2' }],
-          },
-          {
-            id: 'category3',
-            text: 'category3',
-            iconSvg: svg,
-            items: [{ id: 'i3', text: 'item3' }],
-          },
-        ];
-        const wrapper = renderButtonDropdown({ ...props, expandableGroups, items: groupedCategories });
-        wrapper.openDropdown();
-
-        if (expandableGroups) {
-          expect(wrapper.findExpandableCategoryById('category1')!.findIcon()).toBeTruthy();
-          expect(wrapper.findExpandableCategoryById('category2')!.findIcon()).toBeTruthy();
-          expect(wrapper.findExpandableCategoryById('category3')!.findIcon()).toBeTruthy();
-        } else {
-          expect(wrapper.findOpenDropdown()!.findAllIcons()).toHaveLength(3);
-        }
-      });
     });
   });
 });

src/button-dropdown/__tests__/button-dropdown-items.test.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import MobileExpandableCategoryElement from '../../../lib/components/button-dropdown/category-elements/mobile-expandable-category-element';
 import MobileExpandableGroup from '../../../lib/components/button-dropdown/mobile-expandable-group/mobile-expandable-group';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
@@ -30,46 +29,3 @@ describe('MobileExpandableGroup Component', () => {
     expect(wrapper.find(`[data-open=true]`)).not.toBe(null);
   });
 });
-
-describe('MobileExpandableCategoryElement icon rendering', () => {
-  const mockProps = {
-    onItemActivate: jest.fn(),
-    onGroupToggle: jest.fn(),
-    targetItem: null,
-    isHighlighted: jest.fn(() => false),
-    isKeyboardHighlight: jest.fn(() => false),
-    isExpanded: jest.fn(() => false),
-    lastInDropdown: false,
-    highlightItem: jest.fn(),
-    disabled: false,
-    variant: 'normal' as const,
-    position: '1',
-  };
-
-  test('renders icon when iconName provided', () => {
-    const item = { id: 'test', text: 'Test', iconName: 'settings' as const, items: [] };
-    const wrapper = renderComponent(<MobileExpandableCategoryElement item={item} {...mockProps} />);
-    expect(wrapper.findIcon()).toBeTruthy();
-  });
-
-  test('renders icon when iconUrl provided', () => {
-    const item = { id: 'test', text: 'Test', iconUrl: 'data:image/png;base64,test', items: [] };
-    const wrapper = renderComponent(<MobileExpandableCategoryElement item={item} {...mockProps} />);
-    expect(wrapper.findIcon()).toBeTruthy();
-  });
-
-  test('renders icon when iconSvg provided', () => {
-    const item = {
-      id: 'test',
-      text: 'Test',
-      iconSvg: (
-        <svg focusable="false">
-          <circle />
-        </svg>
-      ),
-      items: [],
-    };
-    const wrapper = renderComponent(<MobileExpandableCategoryElement item={item} {...mockProps} />);
-    expect(wrapper.findIcon()).toBeTruthy();
-  });
-});

src/button-dropdown/__tests__/mobile-expandable-category.test.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 import clsx from 'clsx';
 
-import InternalIcon from '../../icon/internal';
 import { CategoryProps } from '../interfaces';
 import ItemsList from '../items-list';
 
@@ -32,9 +31,6 @@ const CategoryElement = ({
     >
       {item.text && (
         <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden="true">
-          {(item.iconName || item.iconUrl || item.iconSvg) && (
-            <InternalIcon name={item.iconName} url={item.iconUrl} svg={item.iconSvg} alt={item.iconAlt} />
-          )}
           {item.text}
         </p>
       )}

src/button-dropdown/category-elements/category-element.tsx

@@ -91,9 +91,6 @@ const ExpandableCategoryElement = ({
             } as GeneratedAnalyticsMetadataButtonDropdownExpand | GeneratedAnalyticsMetadataButtonDropdownCollapse)
       )}
     >
-      {(item.iconName || item.iconUrl || item.iconSvg) && (
-        <InternalIcon name={item.iconName} url={item.iconUrl} svg={item.iconSvg} alt={item.iconAlt} />
-      )}
       {item.text}
       <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>
         <InternalIcon name="caret-down-filled" />

src/button-dropdown/category-elements/expandable-category-element.tsx

@@ -83,9 +83,6 @@ const MobileExpandableCategoryElement = ({
             } as GeneratedAnalyticsMetadataButtonDropdownExpand)
       )}
     >
-      {(item.iconName || item.iconUrl || item.iconSvg) && (
-        <InternalIcon name={item.iconName} url={item.iconUrl} svg={item.iconSvg} alt={item.iconAlt} />
-      )}
       {item.text}
       <span
         className={clsx(styles['expand-icon'], {

src/button-dropdown/category-elements/mobile-expandable-category-element.tsx

@@ -17,7 +17,7 @@
   border-inline-width: 0;
   font-weight: bold;
   display: flex;
-  gap: awsui.$space-xxs;
+  justify-content: space-between;
   // to compensate for the loss of padding due to the removal of the left and right borders
   // and differences in default divider + selected border widths (visual refresh)
   padding-block: styles.$option-padding-with-border-placeholder-vertical;
@@ -113,7 +113,7 @@
 
   &-right {
     transform: rotate(-90deg);
-    margin-inline-start: auto;
+
     @include styles.with-direction('rtl') {
       transform: rotate(90deg);
     }