Add icons to collapsed buttons inside dropdowns

.changeset/fluffy-hotels-divide.md

@@ -0,0 +1,5 @@
+---
+"landscape-ui": patch
+---
+
+Keep icons in the collapsed buttons inside button dropdowns

src/components/ui/ResponsiveButtons/ResponsiveButtons.test.tsx

@@ -113,4 +113,18 @@ describe("ResponsiveButtons", () => {
       screen.getByRole("button", { name: "Disabled button" }),
     ).toHaveAttribute("aria-disabled");
   });
+
+  it("preserves icon children in collapsed menu items", async () => {
+    setScreenSize("xs");
+
+    render(<ResponsiveButtons buttons={buttons} />);
+
+    await userEvent.click(screen.getByRole("button", { name: /actions/i }));
+
+    const buttonWithIcon = screen.getByRole("button", {
+      name: "Button with icon",
+    });
+
+    expect(buttonWithIcon.querySelector(".p-icon--code")).toBeInTheDocument();
+  });
 });

src/components/ui/ResponsiveButtons/ResponsiveButtons.tsx

@@ -69,6 +69,7 @@ const ResponsiveButtons: FC<ResponsiveButtonGroupProps> = ({
                       }
                     }}
                     disabled={link.disabled}
+                    hasIcon={link.hasIcon}
                   >
                     {link.children}
                   </Button>
@@ -99,9 +100,11 @@ const ResponsiveButtons: FC<ResponsiveButtonGroupProps> = ({
 
         collapsed.push({
           key: `action-${index}`,
-          children: textFromNode(el) || `Action ${index + 1}`,
+          children:
+            el.props.children || textFromNode(el) || `Action ${index + 1}`,
           onClick: el.props.onClick,
           disabled: el.props.disabled,
+          hasIcon: el.props.hasIcon,
         });
 
         return;
@@ -185,6 +188,7 @@ const ResponsiveButtons: FC<ResponsiveButtonGroupProps> = ({
                         }
                       }}
                       disabled={item.disabled}
+                      hasIcon={item.hasIcon}
                     >
                       {item.children}
                     </Button>

src/components/ui/ResponsiveButtons/types.ts

@@ -8,6 +8,7 @@ export interface ButtonLikeProps {
   className?: string;
   "aria-label"?: string;
   title?: string;
+  hasIcon?: boolean;
 }
 
 export interface ContextualMenuProps {

src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx

@@ -208,17 +208,35 @@ const InstancesPageActions = memo(function InstancesPageActions({
   const proServicesLinks = [
     allInstancesHaveToken
       ? {
-          children: <span>Replace token</span>,
+          children: (
+            <>
+              <Icon name="change-version" />
+              <span>Replace token</span>
+            </>
+          ),
           onClick: handleReplaceToken,
+          hasIcon: true,
         }
       : {
-          children: <span>Attach token</span>,
+          children: (
+            <>
+              <Icon name="private-key" />
+              <span>Attach token</span>
+            </>
+          ),
           onClick: handleAttachToken,
+          hasIcon: true,
         },
     isFeatureEnabled("ubuntu_pro_licensing")
       ? {
-          children: <span>Detach token</span>,
+          children: (
+            <>
+              <Icon name="disconnect" />
+              <span>Detach token</span>
+            </>
+          ),
           onClick: openDetachModal,
+          hasIcon: true,
         }
       : {},
   ].filter((link) => link.children);
@@ -230,7 +248,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
         buttons={[
           <Button
             key="shutdown-instances"
-            className="has-icon"
+            hasIcon
             type="button"
             disabled={0 === selectedInstances.length || isGettingInstances}
             onClick={openShutdownModal}
@@ -255,6 +273,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
               className="u-no-margin--bottom"
               onClick={proServicesLinks[0].onClick}
               disabled={0 === selectedInstances.length}
+              hasIcon={proServicesLinks[0].hasIcon}
             >
               {proServicesLinks[0].children}
             </Button>
@@ -274,6 +293,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
             <Button
               key="report-view"
               type="button"
+              hasIcon
               onClick={handleReportView}
               disabled={0 === selectedInstances.length}
             >

src/features/packages/components/PackageActions/PackageActions.tsx

@@ -81,6 +81,7 @@ const PackageActions: FC<PackageActionsProps> = ({ selectedPackages }) => {
               onClick={() => {
                 handleExistingPackages(packageAction);
               }}
+              hasIcon
             >
               <Icon name={INSTALLED_PACKAGE_ACTIONS[packageAction].icon} />
               <span>{INSTALLED_PACKAGE_ACTIONS[packageAction].label}</span>

src/features/snaps/components/SnapsActions/SnapsActions.tsx

@@ -34,7 +34,7 @@
 
   const handleEditSnap = (action: EditSnapType) => {
     const count =
       action === EditSnapType.Unhold
         ? held
         : action === EditSnapType.Hold
           ? unheld
@@ -81,6 +81,7 @@
               onClick={() => {
                 handleEditSnap(EditSnapType.Switch);
               }}
+              hasIcon
             >
               <Icon name="fork" />
               <span>Switch channel</span>
@@ -94,6 +95,7 @@
             onClick={() => {
               handleEditSnap(EditSnapType.Uninstall);
             }}
+            hasIcon
           >
             <Icon name={ICONS.delete} />
             <span>Uninstall</span>
@@ -107,6 +109,7 @@
               onClick={() => {
                 handleEditSnap(EditSnapType.Hold);
               }}
+              hasIcon
             >
               <Icon name="pause" />
               <span>Hold</span>
@@ -121,6 +124,7 @@
               onClick={() => {
                 handleEditSnap(EditSnapType.Unhold);
               }}
+              hasIcon
             >
               <Icon name="play" />
               <span>Unhold</span>
@@ -134,6 +138,7 @@
             onClick={() => {
               handleEditSnap(EditSnapType.Refresh);
             }}
+            hasIcon
           >
             <Icon name="change-version" />
             <span>Refresh</span>