diff --git a/frontend/components/IconStatusMessage/_styles.scss b/frontend/components/IconStatusMessage/_styles.scss index 761cc6d984..c89d483eef 100644 --- a/frontend/components/IconStatusMessage/_styles.scss +++ b/frontend/components/IconStatusMessage/_styles.scss @@ -1,7 +1,7 @@ .icon-status-message { display: flex; align-items: flex-start; - gap: $pad-small; + gap: $gap-icon-text; font-size: $x-small; } diff --git a/frontend/components/StatusIndicatorWithIcon/_styles.scss b/frontend/components/StatusIndicatorWithIcon/_styles.scss index 35009c7d95..13d81bc6e3 100644 --- a/frontend/components/StatusIndicatorWithIcon/_styles.scss +++ b/frontend/components/StatusIndicatorWithIcon/_styles.scss @@ -4,10 +4,7 @@ display: inline-flex; align-items: center; vertical-align: middle; - - .icon { - margin-right: $pad-xsmall; - } + gap: $gap-icon-text; span { white-space: nowrap; diff --git a/frontend/components/TableContainer/DataTable/HostMdmStatusCell/_styles.scss b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/_styles.scss index 8e9a8b2f94..f7bb282e5e 100644 --- a/frontend/components/TableContainer/DataTable/HostMdmStatusCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/_styles.scss @@ -2,6 +2,6 @@ display: inline-flex; flex-direction: row; text-wrap: nowrap; - gap: $pad-small; + gap: $gap-icon-text; align-items: center; } diff --git a/frontend/components/TableContainer/DataTable/SetupScriptProcessCell/_styles.scss b/frontend/components/TableContainer/DataTable/SetupScriptProcessCell/_styles.scss index 371e5a2931..e0e7072a18 100644 --- a/frontend/components/TableContainer/DataTable/SetupScriptProcessCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/SetupScriptProcessCell/_styles.scss @@ -4,7 +4,7 @@ gap: $pad-small; .graphic { - width: $pad-xlarge; - scale: 60%; + width: $pad-xlarge; + scale: 60%; } } diff --git a/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/SetupScriptStatusCell.stories.tsx b/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/SetupScriptStatusCell.stories.tsx new file mode 100644 index 0000000000..e84190d8ce --- /dev/null +++ b/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/SetupScriptStatusCell.stories.tsx @@ -0,0 +1,28 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import SetupScriptStatusCell from "./SetupScriptStatusCell"; + +const meta: Meta = { + title: "Components/TableContainer/SetupScriptStatusCell", + component: SetupScriptStatusCell, +}; + +export default meta; + +type Story = StoryObj; + +export const Pending: Story = { + args: { status: "pending" }, +}; + +export const Running: Story = { + args: { status: "running" }, +}; + +export const Success: Story = { + args: { status: "success" }, +}; + +export const Failure: Story = { + args: { status: "failure" }, +}; diff --git a/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/SetupScriptStatusCell.tsx b/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/SetupScriptStatusCell.tsx index 8753d9ab44..b100d9cfcd 100644 --- a/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/SetupScriptStatusCell.tsx +++ b/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/SetupScriptStatusCell.tsx @@ -34,8 +34,14 @@ const SetupScriptStatusCell = ({ status }: ISetupScriptStatusCell) => { const { label, icon } = serverToUiStatus(status); return (
- {icon === "spinner" ? : } - {label} +
+ {icon === "spinner" ? ( + + ) : ( + + )} +
+ {label}
); }; diff --git a/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/_styles.scss b/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/_styles.scss index b72b27fb5a..22d51874f4 100644 --- a/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/SetupScriptStatusCell/_styles.scss @@ -1,11 +1,18 @@ .setup-script-status-cell { display: flex; align-items: center; - gap: $pad-xsmall; + gap: $gap-icon-text; + font-size: $x-small; // Already applied but on component level for storybook - .loading-spinner { - margin: 0; + &__icon { + display: flex; + align-items: center; + justify-content: center; width: $pad-medium; height: $pad-medium; } + + &__label { + min-width: 14ch; // 14 characters — Prevents jitter, fits longest label ("Installing") + } } diff --git a/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/SetupSoftwareStatusCell.stories.tsx b/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/SetupSoftwareStatusCell.stories.tsx new file mode 100644 index 0000000000..6a9b121560 --- /dev/null +++ b/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/SetupSoftwareStatusCell.stories.tsx @@ -0,0 +1,28 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import SetupSoftwareStatusCell from "./SetupSoftwareStatusCell"; + +const meta: Meta = { + title: "Components/TableContainer/SetupSoftwareStatusCell", + component: SetupSoftwareStatusCell, +}; + +export default meta; + +type Story = StoryObj; + +export const Pending: Story = { + args: { status: "pending" }, +}; + +export const Installing: Story = { + args: { status: "running" }, +}; + +export const Installed: Story = { + args: { status: "success" }, +}; + +export const Failure: Story = { + args: { status: "failure" }, +}; diff --git a/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/SetupSoftwareStatusCell.tsx b/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/SetupSoftwareStatusCell.tsx index 305c1bc3b7..cbb65292cb 100644 --- a/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/SetupSoftwareStatusCell.tsx +++ b/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/SetupSoftwareStatusCell.tsx @@ -34,8 +34,14 @@ const SetupSoftwareStatusCell = ({ status }: ISetupSoftwareStatusCell) => { const { label, icon } = serverToUiStatus(status); return (
- {icon === "spinner" ? : } - {label} +
+ {icon === "spinner" ? ( + + ) : ( + + )} +
+ {label}
); }; diff --git a/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/_styles.scss b/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/_styles.scss index db304cf608..b89f48f6e7 100644 --- a/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/_styles.scss @@ -1,11 +1,18 @@ .setup-software-status-cell { display: flex; align-items: center; - gap: $pad-xsmall; + gap: $gap-icon-text; + font-size: $x-small; // Already applied but on component level for storybook - .loading-spinner { - margin: 0; + &__icon { + display: flex; + align-items: center; + justify-content: center; width: $pad-medium; height: $pad-medium; } + + &__label { + min-width: 14ch; // 14 characters — Prevents jitter, fits longest label ("Installing") + } } diff --git a/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss b/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss index 54fbb2a58c..bbac0f0337 100644 --- a/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss @@ -1,7 +1,7 @@ .tooltip-truncated-cell { display: flex; align-items: center; // For badges, etc - gap: $pad-small; + gap: $gap-icon-text; max-width: 100%; .text-muted { @@ -55,7 +55,7 @@ .data-table__suffix, .data-table__prefix { display: flex; - gap: $pad-small; + gap: $gap-icon-text; height: 24px; align-items: center; flex-shrink: 0; /* Prevent suffix from shrinking */ diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss index 21d8011c29..79033d872a 100644 --- a/frontend/components/TableContainer/DataTable/_styles.scss +++ b/frontend/components/TableContainer/DataTable/_styles.scss @@ -149,7 +149,7 @@ $shadow-transition-width: 16px; span { display: flex; align-items: center; - gap: 3px; + gap: $gap-icon-text; } } diff --git a/frontend/components/side_panels/QuerySidePanel/EventedTableTag/_styles.scss b/frontend/components/side_panels/QuerySidePanel/EventedTableTag/_styles.scss index 75455117fd..31e6be8176 100644 --- a/frontend/components/side_panels/QuerySidePanel/EventedTableTag/_styles.scss +++ b/frontend/components/side_panels/QuerySidePanel/EventedTableTag/_styles.scss @@ -7,5 +7,5 @@ border-radius: 6px; font-size: $xxx-small; font-weight: $bold; - gap: $pad-small + gap: $gap-icon-text; } diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/OSTypeCell/_styles.scss b/frontend/pages/ManageControlsPage/OSUpdates/components/OSTypeCell/_styles.scss index dac9084a82..ed036fea3d 100644 --- a/frontend/pages/ManageControlsPage/OSUpdates/components/OSTypeCell/_styles.scss +++ b/frontend/pages/ManageControlsPage/OSUpdates/components/OSTypeCell/_styles.scss @@ -5,7 +5,7 @@ overflow: hidden; text-overflow: ellipsis; align-items: center; - gap: $pad-small; + gap: $gap-icon-text; &__tooltip-wrapper { display: flex; diff --git a/frontend/pages/hosts/components/IssuesIndicator/_styles.scss b/frontend/pages/hosts/components/IssuesIndicator/_styles.scss index 1b765fef1a..de19071e63 100644 --- a/frontend/pages/hosts/components/IssuesIndicator/_styles.scss +++ b/frontend/pages/hosts/components/IssuesIndicator/_styles.scss @@ -2,6 +2,6 @@ .component__tooltip-wrapper__element { display: inline-flex; align-items: center; - gap: $pad-small; + gap: $gap-icon-text; } } diff --git a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/_styles.scss b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/_styles.scss index e217e28245..d2364a67dd 100644 --- a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/_styles.scss +++ b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/_styles.scss @@ -10,7 +10,7 @@ .component__tooltip-wrapper__element { display: flex; align-items: center; - gap: $pad-small; + gap: $gap-icon-text; } .component__tooltip-wrapper__tip-text { diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/components/TileActionStatus/_styles.scss b/frontend/pages/hosts/details/cards/Software/SelfService/components/TileActionStatus/_styles.scss index fe7eb5f434..d1ecdaa14b 100644 --- a/frontend/pages/hosts/details/cards/Software/SelfService/components/TileActionStatus/_styles.scss +++ b/frontend/pages/hosts/details/cards/Software/SelfService/components/TileActionStatus/_styles.scss @@ -1,7 +1,7 @@ .tile-action-status { display: flex; align-items: center; - gap: $pad-small; + gap: $gap-icon-text; font-size: $x-small; height: 36px; // Min height of button to keep height the same when switching to active action "Installing..." } diff --git a/frontend/styles/var/padding.scss b/frontend/styles/var/padding.scss index 3fbad1243b..db287c8edb 100644 --- a/frontend/styles/var/padding.scss +++ b/frontend/styles/var/padding.scss @@ -21,4 +21,5 @@ $gap-form-component: $pad-small; $gap-data-sets: $pad-medium; $gap-table-elements: $pad-medium; $gap-modal-component: $pad-large; +$gap-icon-text: $pad-small; $table-cell-padding: $pad-large;