From 17669eca029e1653c3aafe7d59b986672aab037d Mon Sep 17 00:00:00 2001 From: Rajendra Kadam Date: Mon, 27 Jul 2026 19:42:22 +0530 Subject: [PATCH] Center-align setup experience app icons (#49962) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Related issue:** Resolves #46973 > **Draft:** on-device QA (Mac/iPhone/iPad) is pending hardware, expected next week. Opening as draft for early review of the approach. ## Description FMA and custom-package app icons were misaligned on the macOS setup experience ("Setting up your device") screen — icons rendered at different sizes and their "Install …" labels didn't line up. **Root cause:** `SetupSoftwareProcessCell` forced `.software-icon__small { width: $pad-xlarge }` (32px, width only). That class lands on different elements in `SoftwareIcon`'s two render paths, so it hit them differently: - **Fleet-maintained / VPP apps (icon URL)** → the class is on the wrapper `
`; the 24px `` inside stayed 24px, left-aligned. - **Custom packages (no URL)** → the class is on the fallback **SVG** itself, which got stretched to 32px wide. Result: different icon sizes/positions by app type → the misalignment. **Fix:** remove the width override so every app type renders `SoftwareIcon` at its consistent, vertically-centered 24px "small" size. ## Testing Verified in Storybook (added `SetupSoftwareProcessCell.stories.tsx`, `MixedAlignment` story) with real matched brand icons (Chrome, 1Password, VS Code, Zoom), a generic custom-package icon, and a URL/`` icon stacked together: - **Before** (with the override): icons render at mixed 24/32px sizes; "Install …" labels don't align. before - **After** (this change): all icons render at 24px, centered, labels aligned. after On-device QA to follow once hardware is available. ## Notes for reviewer - The `width: $pad-xlarge` (32px) was added in #33770, so 32px may have been the *intended* icon size. This change makes them a consistent **24px**. If a larger icon is desired, that's a follow-up done properly via a real `SoftwareIcon` size (not a width-only override) — flagging for PD input since this is `:product`-labeled. - Included a Storybook story for visual verification/regression; happy to drop it if that's not wanted here. # Checklist for submitter - [x] Changes file added for user-visible changes in `changes/`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files) for more information. ## Testing - [ ] QA'd all new/changed functionality manually - Added a Storybook story for visual verification (not an automated test). ## Summary by CodeRabbit * **Bug Fixes** * Improved software process cell styling for more consistent icon sizing and alignment. * **Tests** * Added Storybook scenarios covering fleet-maintained apps, custom packages, uploaded icons, and mixed app layouts. --- .../46973-setup-experience-icon-alignment.md | 1 + .../SetupSoftwareProcessCell.stories.tsx | 69 +++++++++++++++++++ .../SetupSoftwareProcessCell/_styles.scss | 4 -- 3 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 changes/46973-setup-experience-icon-alignment.md create mode 100644 frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/SetupSoftwareProcessCell.stories.tsx diff --git a/changes/46973-setup-experience-icon-alignment.md b/changes/46973-setup-experience-icon-alignment.md new file mode 100644 index 0000000000..8208f92260 --- /dev/null +++ b/changes/46973-setup-experience-icon-alignment.md @@ -0,0 +1 @@ +- Fixed misaligned app icons on the macOS setup experience "Setting up your device" screen. diff --git a/frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/SetupSoftwareProcessCell.stories.tsx b/frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/SetupSoftwareProcessCell.stories.tsx new file mode 100644 index 0000000000..4bb5088234 --- /dev/null +++ b/frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/SetupSoftwareProcessCell.stories.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; +import { + QueryClient, + QueryClientProvider, + QueryClientProviderProps, +} from "react-query"; + +import SetupSoftwareProcessCell from "./SetupSoftwareProcessCell"; + +// SoftwareIcon calls `useQuery` unconditionally (even when it doesn't fetch), so +// stories need a QueryClientProvider in scope or they throw "No QueryClient set". +const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false } }, +}); +type CustomQueryClientProviderProps = React.PropsWithChildren; +const CustomQueryClientProvider: React.FC = QueryClientProvider; + +// Small inline SVG data URI to exercise the render path (VPP apps or an +// app with an uploaded custom icon). +const iconURL = + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' rx='5' fill='%234a90d9'/%3E%3C/svg%3E"; + +const meta: Meta = { + title: "Components/TableContainer/SetupSoftwareProcessCell", + component: SetupSoftwareProcessCell, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; + +type Story = StoryObj; + +// Fleet-maintained app — renders its real matched brand icon (SVG fallback). +export const FleetMaintainedApp: Story = { + args: { name: "Google Chrome" }, +}; + +// Custom package with no matched icon — renders the generic package icon. +export const CustomPackage: Story = { + args: { name: "Acme Corp Agent" }, +}; + +// App with an uploaded icon URL (VPP / custom icon) — renders an . +export const WithIconURL: Story = { + args: { name: "Company Portal", url: iconURL }, +}; + +// Real FMA brand icons, a custom package (generic icon), and a URL-based icon +// stacked together, to verify icons and "Install …" labels align across app +// types. Regression coverage for #46973. +export const MixedAlignment: Story = { + render: () => ( +
+ + + + + + +
+ ), +}; diff --git a/frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/_styles.scss b/frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/_styles.scss index b5ef499b6a..a7a8955ea3 100644 --- a/frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/_styles.scss @@ -2,8 +2,4 @@ display: flex; align-items: center; gap: $pad-small; - - .software-icon__small { - width: $pad-xlarge; - } }