Fleet UI: PR #49292 follow-up — buttons, 8px gaps, focus ring - #50049
Merged
Conversation
…ng cleanup Bundles the quick-win tickets tracked under #49990: - #49820 ActionsDropdown focus ring — was an outset box-shadow that rendered as a full-contrast 1px halo and stacked against the secondary variant's grey border. Switched to inset outline via `outline-offset: -1px` so it overlays the border pixel and matches Button's own :focus-visible weight. - #49823 Controls > Scripts and Self-service categories row-action buttons → `variant="secondary"` to match Figma (both lists now consistent). - #49824 "Add fleet" button (and every other TableContainer action button) — removed the `__table-action-button.button { padding: $pad-small }` override; restores default primary padding (8px 16px). - #49825 Dead code cleanup: - `TeamDetailsWrapper`: removed unused `iconName` from Manage / Rename / Delete actions (no longer in Figma). - `DownloadABMKey` / `DownloadCSR`: dropped redundant `size="medium"` on `<Icon>` (medium is the default). - `RevealButton`: dropped the `variant?: "secondary" | "subdued"` prop entirely — every non-test call site passed `variant="secondary"`; hardcoded inside and stripped the redundant prop from 20 call sites. - #49826 2px extra horizontal padding: removed `padding: $pad-small $pad-xxsmall` from `.reveal-button .children-wrapper` so RevealButton matches sibling Buttons in the same row (Save / Cancel). - #49822 (previous commit context, on branch): `FleetAppDetailsModal` slug CopyButton — `size="small"` plus a local `margin: -4px` collapse so it sits inside the DataSet's x-small line-height. - #49819 (previous commit context, on branch): `BackButton` chevron — removed the explicit `color="ui-fleet-black-50"` so the icon uses the Figma default fill.
Closes #49472 (and folds in the OktaConditionalAccessModal gap called out in #49990). Aligns UI-element spacing with the Figma design system, which specifies 8px between related actions (buttons in a modal footer, grouped row actions, table header controls) rather than 16px. Shared primitives (drives every consumer): - `Modal.modal-cta-wrap` — 16→8px gap - `ModalFooter` primary/secondary buttons wrapper — 16→8px - `ActionButtons` — refactored `button { margin-left: $pad-medium }` to `gap: $pad-small` on the flex container (also matches the "use gap not margin" convention from #49472 review comment). - `DataTable.active-selection__inner` (bulk-select action bar) — refactored per-child `margin-right: $pad-medium` overrides to `gap: $pad-small` on `__inner`, `__inner-left`, `__inner-right`. - `styles/var/padding.scss` — `$gap-table-elements: $pad-medium` → `$pad-small`. Every table-header / filter-cluster gap that already used the semantic variable (HQRTable, HostSoftwareLibraryTable, TableContainer header/header-left, ManageHostsPage label filter) updates for free. Per-page tightening (couldn't ride the variable change): - `CustomLabelGroupHeading` filter row - `ScriptListItem` actions row - `SetupExperienceScriptCard` / `SetupAssistantProfileCard` actions - `HostHeader.title__actions` - `QueryDetailsPage.action-button-container` - `ManageHostsPage.__button-wrap` and `.__table-actions` `OktaConditionalAccessModal` (folded in from #49990): wrapped "Download certificate" text in a `<span>` so Button's `.children-wrapper` treats it as a distinct flex item, exposing the 8px `--secondary` gap between label and download icon (previously the raw text node + trailing space collapsed against the icon with no visible gap).
Contributor
There was a problem hiding this comment.
Pull request overview
This PR is a Fleet UI styling follow-up that standardizes button/control spacing (moving many clusters to consistent 8px gaps), removes some per-consumer padding overrides, and aligns focus/hover behaviors with the design system across shared primitives and key pages.
Changes:
- Refactors multiple shared UI containers from per-child margins to
gap: $pad-smalland updates$gap-table-elementsto inherit the tighter spacing everywhere. - Adjusts button-related styling and usage (e.g.,
RevealButtonno longer accepts avariantprop; various “Advanced options/Details” toggles stop passingvariant="secondary"). - Updates focus-visible treatment for
ActionsDropdown(outline inset instead of an outset box-shadow) and makes several icon/button tweaks across pages/modals.
Reviewed changes
Copilot reviewed 43 out of 43 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/styles/var/padding.scss | Tightens semantic table element gap token to 8px. |
| frontend/pages/SoftwarePage/SoftwareLibrary/SelfServiceCategoriesPage/SelfServiceCategoriesPage.tsx | Updates row action buttons to secondary variant. |
| frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx | Adjusts slug row rendering and copy button sizing/usage. |
| frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/_styles.scss | Adds modal-scoped spacing rules for slug row copy affordance. |
| frontend/pages/SoftwarePage/components/forms/PackageAdvancedOptions/PackageAdvancedOptions.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/queries/edit/components/SaveNewQueryModal/SaveNewQueryModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/queries/details/QueryDetailsPage/_styles.scss | Reduces action cluster gap to 8px. |
| frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/_styles.scss | Reduces actions gap to 8px. |
| frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/AdvancedOptionsForm/AdvancedOptionsForm.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/SetupExperienceScriptCard/_styles.scss | Reduces actions gap to 8px. |
| frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/ManageControlsPage/Scripts/components/ScriptListItem/_styles.scss | Reduces row actions gap to 8px. |
| frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss | Reduces heading control gap to 8px. |
| frontend/pages/hosts/ManageHostsPage/_styles.scss | Reduces multiple control clusters to 8px gap. |
| frontend/pages/hosts/details/DeviceUserPage/components/SettingUpYourDevice/SettingUpYourDevice.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/hosts/details/cards/HostHeader/_styles.scss | Reduces header action gap to 8px. |
| frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/DashboardPage/cards/ChartCard/ChartFilterModal/SoftwareFilters/SoftwareFilters.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/pages/admin/ManageFleetsPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx | Removes unused team action iconName fields. |
| frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/OktaConditionalAccessModal/OktaConditionalAccessModal.tsx | Wraps button text to ensure consistent icon/text spacing. |
| frontend/pages/admin/components/DownloadFileButtons/DownloadCSR.tsx | Removes redundant size="medium" from icon usage. |
| frontend/pages/admin/components/DownloadFileButtons/DownloadABMKey.tsx | Removes redundant size="medium" from icon usage. |
| frontend/components/TableContainer/DataTable/_styles.scss | Converts active selection spacing from margins to gap. |
| frontend/components/TableContainer/_styles.scss | Removes table action button padding override to restore defaults. |
| frontend/components/ModalFooter/_styles.scss | Reduces secondary button wrapper gap to 8px. |
| frontend/components/Modal/_styles.scss | Reduces modal CTA wrap gap to 8px. |
| frontend/components/LiveQuery/SelectTargets.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/components/buttons/RevealButton/RevealButton.tsx | Removes variant prop support; hardcodes secondary. |
| frontend/components/buttons/RevealButton/_styles.scss | Removes extra inner padding that inflated horizontal size. |
| frontend/components/buttons/ActionButtons/_styles.scss | Replaces per-button margins with container gap. |
| frontend/components/BackButton/BackButton.tsx | Removes explicit icon color prop. |
| frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/components/ActivityDetails/InstallDetails/CertificateInstallDetailsModal/CertificateInstallDetailsModal.tsx | Removes explicit variant="secondary" from RevealButton usage. |
| frontend/components/ActionsDropdown/ActionsDropdown.tsx | Changes keyboard focus ring to inset outline with negative offset. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
85
to
88
| <> | ||
| {slug} <CopyButton copyText={slug} variant="subdued" /> | ||
| {slug}{" "} | ||
| <CopyButton copyText={slug} variant="subdued" size="small" /> | ||
| </> |
Member
Author
There was a problem hiding this comment.
swapped to variant="compact" + delete override + delete {" "} at the slug row
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #50049 +/- ##
==========================================
+ Coverage 67.97% 68.03% +0.06%
==========================================
Files 3922 3929 +7
Lines 250031 250265 +234
Branches 13334 13430 +96
==========================================
+ Hits 169948 170272 +324
+ Misses 64781 64688 -93
- Partials 15302 15305 +3
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
- Policies table filter dropdowns and Activity feed dropdown filters — 16→8px gap. - ActionButtons secondary buttons group — added missing gap. - `ChevronLeft` default color: `core-fleet-black` → `ui-fleet-black-75` so the back-arrow matches the surrounding subdued Button text tone without every call site having to repeat the override. Removed the now-redundant `color="ui-fleet-black-75"` from `BackButton`, `Pagination`, and `LoginForm`.
Introduces `$gap-action-elements: $pad-small` in
`styles/var/padding.scss` as the design-system semantic for grouped
button/CTA gaps, so a future value change is a one-line lever.
Action-cluster locations now on `$gap-action-elements`:
- Global: `form, .form > .button-wrap` (base + `--center`)
- Shared: `Modal.modal-cta-wrap`, `Modal.__actions-footer > *`,
`ModalFooter`, `ActionButtons` (`.action-buttons` and
`__secondary-buttons` inside its media block)
- List/row/card action rows: `ScriptListItem __actions`,
`SetupExperienceScriptCard __actions`,
`SetupAssistantProfileCard __actions`
- Page-header action rows: `HostHeader.title__actions`,
`QueryDetailsPage __action-button-container`,
`ManageHostsPage __button-wrap`,
`ManageQueriesPage __action-button-container`
- Software forms: `FleetAppDetailsForm __action-buttons`,
`SoftwarePage __action-buttons`, `SoftwareAndroidForm`,
`SoftwareVppForm` (16 -> 8), `PackageForm` (24 -> 8)
- Modals: `RenewCertModal __button-wrap`
- `ManagePoliciesPage __action-button-container`: converted per-child
`__advanced-button { margin-right }` to `gap` on the flex parent
- `LiveQueryPage __targets-button-wrap`: same conversion, dropped
`button:not(:first-of-type) { margin-left: 16px }` and the
duplicated `margin-left: 16px` on `__targets-total-count`
Table-context locations now on `$gap-table-elements`:
- `DataTable.active-selection__inner*` (bulk-select bar)
- `PoliciesTable __filter-dropdowns`
- `ManageHostsPage __table-actions`
- `ActivityFeedFilters __dropdown-filters`
Other tweaks:
- Top-level `.table-container` gap: `$gap-table-elements` ->
`$gap-page-component-inner` (search block <-> table body is a page
component gap, not a table-element gap).
- `ActionsDropdown` control: added `gap: "8px"` between placeholder /
text / caret. Placeholder margin: `marginTop: "1px"` -> `margin: 0`.
- `ActionsDropdown __wrapper button .children-wrapper` gap:
`$pad-xsmall` -> `$pad-small`.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 59 out of 59 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (2)
frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx:88
DataSet ddis alreadydisplay: flexand this modal addsdd { gap: ... }, so the extra{" "}becomes its own flex item and can inflate spacing. Also, CopyButton already has a purpose-builtvariant="compact"for inline-with-text copy actions (20×20 hit area + inset focus ring) so we don’t needvariant="subdued" size="small"+ custom CSS overrides.
frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/_styles.scss:25- This overrides the CopyButton size globally for this modal and duplicates the existing
CopyButtonvariant="compact"styling (which already provides a 20×20 footprint and an inset focus ring). Keeping this override makes the layout dependent on a brittle selector and may regress focus-visible styling.
Removed the local .chart-card__settings-btn block that was overriding Button's subdued 36px height + padding to squeeze the settings icon into the header. The class was also removed from the JSX — the Button now renders with its normal subdued sizing.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 61 out of 61 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (3)
frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx:88
- CopyButton already supports
variant="compact"specifically for inline-with-text copy actions (20×20 footprint without growing the row). Usingvariant="subdued"+size="small"here forces a modal-specific CSS override to shrink the button, duplicating existing component behavior.
frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/_styles.scss:23 - This modal-specific
.copy-button__buttonwidth/height override duplicates CopyButton’s existingvariant="compact"styling (and the comment mentions trimming margin, but the code changes width/height). Prefer relying on the component’s compact variant and removing this override to avoid future drift.
frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx:487 - After removing the
chart-card__settings-btnclass (and its SCSS), this icon-onlyvariant="subdued"Button will render at the default 36px height/width (see.buttonbase styles andbutton--icon-only), which can make the chart card header taller than adjacent card headers. Settingsize="small"keeps the icon-only button at 28px to match the header’smin-height: 28px.
<Button
type="button"
variant="subdued"
ariaLabel="Configure chart filters"
onClick={() => openFilterModal()}
- FleetAppDetailsModal slug row: switched CopyButton to
variant="compact" (the purpose-built inline-with-text variant with
the 20x20 hit area and inset focus ring) and dropped the "{" "}"
that was becoming its own flex item inside the modal's dd gap.
Deleted the local .copy-button__button width/height override that
was reinventing what compact already provides.
- ChartCard settings Button: added size="small" so the icon-only
subdued Button renders at 28px, matching the chart-card __header's
min-height: 28px (it was going to 36px after the __settings-btn
override was removed).
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 60 out of 60 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
frontend/components/TableContainer/_styles.scss:4
$gap-page-component-inneris$pad-medium(16px) in padding.scss, so switching the top-level.table-containergap to that value preventsTableContainerfrom inheriting the new 8px$gap-table-elementsspacing used throughout the rest of this component (e.g..container,.stackable-header). If the intent of this PR is the 8px gap sweep for table controls/layout (#49472), keep the top-level gap on$gap-table-elementsso it tightens consistently with the other table element gaps.
gap: $gap-page-component-inner;
RachelElysia
commented
Jul 28, 2026
| hideText="Details" | ||
| caretPosition="after" | ||
| onClick={toggleInstallDetails} | ||
| variant="secondary" |
Member
Author
There was a problem hiding this comment.
variant: secondary is now default variant
RachelElysia
commented
Jul 28, 2026
|
|
||
| return ( | ||
| <Button variant="subdued" onClick={onClick} className={classes}> | ||
| <Icon name="chevron-left" color="ui-fleet-black-50" /> |
Member
Author
There was a problem hiding this comment.
ui-fleet-black-75 default color is correct
cdcme
approved these changes
Jul 28, 2026
RachelElysia
commented
Jul 28, 2026
| $gap-data-sets: $pad-medium; | ||
| $gap-table-elements: $pad-medium; | ||
| $gap-table-elements: $pad-small; | ||
| $gap-action-elements: $pad-small; |
Member
Author
There was a problem hiding this comment.
gaps between action buttons everywhere
RachelElysia
commented
Jul 28, 2026
| $gap-form-component: $pad-small; | ||
| $gap-data-sets: $pad-medium; | ||
| $gap-table-elements: $pad-medium; | ||
| $gap-table-elements: $pad-small; |
Member
Author
There was a problem hiding this comment.
gaps between table buttons/filters/search/etc
12 tasks
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (60)
💤 Files with no reviewable changes (22)
WalkthroughStandardizes frontend spacing through new action and table gap tokens and applies them across shared layouts. Simplifies 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This was referenced Jul 29, 2026
12 tasks
This was referenced Aug 11, 2026
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue
Parent: #49990. Closes:
BackButtonicon color doesn't match Figma #49819 —BackButtonicon colorActionsDropdownfocus-visibleoutline renders thicker than standard button focus outline #49820 —ActionsDropdownfocus-visible outlineFleetAppDetailsModalbutton needssize="small"(currently pushes layout) #49822 —FleetAppDetailsModalslug copy buttonsecondary#49823 — Scripts + Self-service categories row actions (both →secondary, matches Figma — see comment)iconName, redundantsize="medium",RevealButtonvariantunion)RevealButtonAlso folds in the
OktaConditionalAccessModalicon-gap called out on #49990.Description
Shared primitives (drive every consumer):
Modal.modal-cta-wrap,ModalFooter,ActionButtons,DataTable.active-selection__inner— refactoredmargin-*cluster spacing togap: $pad-small(usesgapper convention, not per-child margins).styles/var/padding.scss:$gap-table-elements: $pad-medium→$pad-small; every consumer that already used the semantic variable inherits automatically.ActionsDropdownfocus ring: outset box-shadow →outline+outline-offset: -1px, so the 1px ring sits inside the box (matches Button's::afterweight; no more stacking against the secondary variant's grey border).TableContainer.__table-action-button.button { padding: $pad-small }override deleted — "Add fleet" and every other table action button restore primary default padding (8px 16px).RevealButton: droppedvariant?: "secondary" | "subdued"union (onlysecondarywas used across 20 call sites); hardcoded inside; strippedvariant="secondary"from all call sites. Also removed the inner.children-wrapper { padding: … $pad-xxsmall }that was inflating horizontal padding by 2px.Per-page tightening:
CustomLabelGroupHeading,ScriptListItem,SetupExperiencecards,HostHeader,QueryDetailsPage,ManageHostsPage— 16px → 8px.Screenrecording
Screen.Recording.2026-07-28.at.10.37.31.AM.mov
Screen.Recording.2026-07-28.at.10.41.13.AM.mov
Testing
Modal footers (
FleetAppDetailsModal,EnrollSecretModal, install-details modals, etc.) — buttons now 8px apart, no visual regressions.Controls > Scripts row: hover reveals bordered
secondaryEdit / Download / Delete buttons with 8px gaps.Software > Self-service categories: row actions match Scripts (bordered
secondary).Tab to any
<ActionsDropdown>— focus ring reads the same weight as tabbing aButtonnext to it (no ~2px band).Settings > Fleets: "Add fleet" now matches other primary buttons (wider padding).
Fleet details header: Manage / Rename / Delete actions render without icons, 8px apart.
Any
<RevealButton>(query editor advanced options, activity install-details "Show more", etc.) — horizontal padding matches sibling Save/Cancel buttons.Okta conditional access modal: "Download certificate" button — text and download icon have visible 8px gap.
FleetAppDetailsModalslug row — copy button sits inline with slug text, doesn't push row taller than sibling DataSet rows.BackButton— chevron matches Figma tone (no explicit black-50).QA'd all new/changed functionality manually
Notes
changes/entry — parent#49990is~unreleased bug, nothing user-visible was ever shipped.InfoBannerbackground color,ChartFilterModalCancel button variant) are not in this PR — they need product/design input first.Summary by CodeRabbit