From 21d4d0196d4c2dad9297fe4ee25861440f0bb57e Mon Sep 17 00:00:00 2001 From: Jake Howell Date: Fri, 13 Feb 2026 05:25:04 +1100 Subject: [PATCH] fix: resolve manual button icon sizes (#22058) Closes #21830 Remove redundant icon sizing across the frontend. Components like `Button`, `DropdownMenuItem`, and `CommandItem` already control child SVG sizes via CSS selectors (e.g., `[&>svg]:size-icon-lg`), so explicit `size` props and `className` overrides on icons nested inside them are unnecessary. This PR strips those out and lets parent components handle sizing consistently. As a bonus, also migrates the `DropdownArrow` component from Emotion CSS-in-JS to Tailwind utilities, replaces raw `` tags with the `` component in the Premium page, and adds Storybook coverage for `PremiumPageView`. --- site/src/components/Alert/Alert.tsx | 2 +- .../components/Autocomplete/Autocomplete.tsx | 2 +- .../Collapsible/Collapsible.stories.tsx | 2 +- site/src/components/Combobox/Combobox.tsx | 2 +- .../DropdownArrow/DropdownArrow.stories.tsx | 1 - .../DropdownArrow/DropdownArrow.tsx | 24 +------- site/src/components/Filter/Filter.tsx | 2 +- .../MultiSelectCombobox.tsx | 8 ++- site/src/components/PageHeader/PageHeader.tsx | 2 +- site/src/components/Select/Select.tsx | 2 +- .../dashboard/Navbar/DeploymentDropdown.tsx | 2 +- .../modules/dashboard/Navbar/NavbarView.tsx | 4 +- .../modules/dashboard/Navbar/ProxyMenu.tsx | 2 +- .../management/OrganizationSidebarView.tsx | 4 +- .../modules/resources/PortForwardButton.tsx | 10 +--- .../tasks/TaskPrompt/PromptSelectTrigger.tsx | 2 +- .../tasks/TasksSidebar/UserCombobox.tsx | 2 +- .../WorkspaceTiming/WorkspaceTimings.tsx | 6 +- .../RequestLogsRow/RequestLogsRow.tsx | 6 +- .../IdpOrgSyncPage/ExportPolicyButton.tsx | 2 +- .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx | 2 +- .../LicensesSettingsPageView.tsx | 2 +- .../PremiumPage/PremiumPageView.stories.tsx | 23 ++++++++ .../PremiumPage/PremiumPageView.tsx | 57 +++++++------------ .../IdpSyncPage/IdpGroupSyncForm.tsx | 2 +- .../IdpSyncPage/IdpRoleSyncForm.tsx | 2 +- site/src/pages/TasksPage/TasksPage.tsx | 2 +- .../TemplateInsightsPage/IntervalMenu.tsx | 2 +- .../TemplateInsightsPage/WeekPicker.tsx | 2 +- .../ProvisionerTagsPopover.tsx | 7 +-- .../WorkspacesPage/WorkspacesPageView.tsx | 2 +- 31 files changed, 81 insertions(+), 109 deletions(-) create mode 100644 site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.stories.tsx diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx index 9bb73908c2..0e4dee8c53 100644 --- a/site/src/components/Alert/Alert.tsx +++ b/site/src/components/Alert/Alert.tsx @@ -116,7 +116,7 @@ export const Alert: FC = ({ data-testid="dismiss-banner-btn" aria-label="Dismiss" > - + )} diff --git a/site/src/components/Autocomplete/Autocomplete.tsx b/site/src/components/Autocomplete/Autocomplete.tsx index 5872927420..4acb994680 100644 --- a/site/src/components/Autocomplete/Autocomplete.tsx +++ b/site/src/components/Autocomplete/Autocomplete.tsx @@ -189,7 +189,7 @@ export function Autocomplete({ diff --git a/site/src/components/Collapsible/Collapsible.stories.tsx b/site/src/components/Collapsible/Collapsible.stories.tsx index ad099b03c2..2e6c5274b8 100644 --- a/site/src/components/Collapsible/Collapsible.stories.tsx +++ b/site/src/components/Collapsible/Collapsible.stories.tsx @@ -20,7 +20,7 @@ const meta: Meta = { diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx index 7793107544..3db02836f5 100644 --- a/site/src/components/Combobox/Combobox.tsx +++ b/site/src/components/Combobox/Combobox.tsx @@ -86,7 +86,7 @@ export const Combobox: FC = ({ {optionsMap.get(value)?.displayName || value || placeholder} - + diff --git a/site/src/components/DropdownArrow/DropdownArrow.stories.tsx b/site/src/components/DropdownArrow/DropdownArrow.stories.tsx index 7413bbc70f..5ce4be92d9 100644 --- a/site/src/components/DropdownArrow/DropdownArrow.stories.tsx +++ b/site/src/components/DropdownArrow/DropdownArrow.stories.tsx @@ -14,4 +14,3 @@ type Story = StoryObj; export const Open: Story = {}; export const Close: Story = { args: { close: true } }; -export const WithColor: Story = { args: { color: "#f00" } }; diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx index a791f2e26e..770e8023aa 100644 --- a/site/src/components/DropdownArrow/DropdownArrow.tsx +++ b/site/src/components/DropdownArrow/DropdownArrow.tsx @@ -1,37 +1,19 @@ -import type { Interpolation, Theme } from "@emotion/react"; import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import type { FC } from "react"; +import { cn } from "utils/cn"; interface ArrowProps { margin?: boolean; - color?: string; close?: boolean; } -export const DropdownArrow: FC = ({ - margin = true, - color, - close, -}) => { +export const DropdownArrow: FC = ({ margin = true, close }) => { const Arrow = close ? ChevronUpIcon : ChevronDownIcon; return ( ); }; - -const styles = { - base: { - color: "currentcolor", - width: 16, - height: 16, - }, - - withMargin: { - marginLeft: 8, - }, -} satisfies Record>; diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx index 2e23869108..10dcce3219 100644 --- a/site/src/components/Filter/Filter.tsx +++ b/site/src/components/Filter/Filter.tsx @@ -288,7 +288,7 @@ const PresetMenu: FC = ({ diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx index 1976cb790d..69afb3cc1c 100644 --- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx +++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx @@ -486,7 +486,7 @@ export const MultiSelectCombobox = forwardRef<
svg]:p-0.5`, { "pl-3 py-1": selected.length !== 0, "cursor-text": !disabled && selected.length !== 0, @@ -598,7 +598,9 @@ export const MultiSelectCombobox = forwardRef< } }} className={cn( - "bg-transparent mt-1 border-none rounded-sm cursor-pointer text-content-secondary hover:text-content-primary outline-none focus:ring-2 focus:ring-content-link", + "bg-transparent mt-1 border-none rounded-sm", + "cursor-pointer text-content-secondary hover:text-content-primary", + "outline-none focus:ring-2 focus:ring-content-link [&>svg]:p-0.5", (hideClearAllButton || disabled || selected.length < 1 || @@ -608,7 +610,7 @@ export const MultiSelectCombobox = forwardRef< > - +
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx index 3ace2383ad..96366114dc 100644 --- a/site/src/components/PageHeader/PageHeader.tsx +++ b/site/src/components/PageHeader/PageHeader.tsx @@ -23,7 +23,7 @@ export const PageHeader: FC = ({ >
{children}
{actions && ( -
+
{actions}
)} diff --git a/site/src/components/Select/Select.tsx b/site/src/components/Select/Select.tsx index 030b1944a1..65c71623de 100644 --- a/site/src/components/Select/Select.tsx +++ b/site/src/components/Select/Select.tsx @@ -34,7 +34,7 @@ export const SelectTrigger: React.FC = ({ > {children} - + ); diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx index 11b4854f62..e07cf62df4 100644 --- a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx @@ -43,7 +43,7 @@ export const DeploymentDropdown: FC = ({ diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx index dbb7bcbb73..8f9b606a1f 100644 --- a/site/src/modules/dashboard/Navbar/NavbarView.tsx +++ b/site/src/modules/dashboard/Navbar/NavbarView.tsx @@ -271,9 +271,7 @@ const SupportButton: FC = ({ name, target, icon }) => { rel="noreferrer" className="inline-block" > - {icon && ( - - )} + {icon && } {name} (link opens in new tab) diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx index 9b6b43e5e8..1edf588196 100644 --- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx +++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx @@ -95,7 +95,7 @@ export const ProxyMenu: FC = ({ proxyContextValue }) => { "Select Proxy" )} - + diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index 5f7fb6dd3b..d8e3d8d223 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -78,7 +78,7 @@ export const OrganizationSidebarView: FC< ) : ( No organization selected )} - + @@ -109,7 +109,7 @@ export const OrganizationSidebarView: FC< {organization?.display_name || organization?.name} {activeOrganization?.name === organization.name && ( - + )} ))} diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index 4a5e17bcce..0359e3d3de 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -98,7 +98,7 @@ export const PortForwardButton: FC = ({ {listeningPorts?.length} Open ports - + = ({ }); }} > - + diff --git a/site/src/modules/tasks/TaskPrompt/PromptSelectTrigger.tsx b/site/src/modules/tasks/TaskPrompt/PromptSelectTrigger.tsx index acedadedea..ed813a1101 100644 --- a/site/src/modules/tasks/TaskPrompt/PromptSelectTrigger.tsx +++ b/site/src/modules/tasks/TaskPrompt/PromptSelectTrigger.tsx @@ -29,7 +29,7 @@ export const PromptSelectTrigger: FC = ({ {...props} className={cn([ `w-full md:w-auto max-w-full overflow-hidden border-0 bg-surface-secondary text-sm text-content-primary gap-2 px-4 md:px-3 - [&_svg]:text-inherit cursor-pointer hover:bg-surface-quaternary rounded-full + [&_svg]:text-inherit [&>svg]:p-0.5 cursor-pointer hover:bg-surface-quaternary rounded-full h-10 md:h-8 data-[state=open]:bg-surface-tertiary`, className, ])} diff --git a/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx b/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx index fa568421c8..f43d9351b1 100644 --- a/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx +++ b/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx @@ -74,7 +74,7 @@ export const UserCombobox: FC = ({ "Loading users..." )} - + = ({ css={styles.collapseTrigger} onClick={() => setIsOpen((o) => !o)} > - {isOpen ? ( - - ) : ( - - )} + {isOpen ? : } Build timeline ({ diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx index a60462614e..8df49b73c1 100644 --- a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx +++ b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx @@ -143,11 +143,7 @@ export const RequestLogsRow: FC = ({ interception }) => { isOpen && "text-content-primary", ])} > - {isOpen ? ( - - ) : ( - - )} + {isOpen ? : } ({isOpen ? "Hide" : "Show more"}) {formatDate(new Date(interception.started_at))}
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/ExportPolicyButton.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/ExportPolicyButton.tsx index f2bb076bf7..3ba3a88897 100644 --- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/ExportPolicyButton.tsx +++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/ExportPolicyButton.tsx @@ -40,7 +40,7 @@ export const ExportPolicyButton: FC = ({ } }} > - + Export Policy ); diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx index 89e6a00188..4c66b62add 100644 --- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx @@ -290,7 +290,7 @@ export const IdpOrgSyncPageView: FC = ({ }} > - + Add IdP organization diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index b6096d2b78..62df8c904e 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -95,7 +95,7 @@ const LicensesSettingsPageView: FC = ({ variant="outline" > - + Refresh diff --git a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.stories.tsx new file mode 100644 index 0000000000..c59ffeb0a7 --- /dev/null +++ b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { PremiumPageView } from "./PremiumPageView"; + +const meta: Meta = { + title: "pages/DeploymentSettingsPage/PremiumPageView", + component: PremiumPageView, +}; + +export default meta; + +type Story = StoryObj; + +export const Enterprise: Story = { + args: { + isEnterprise: true, + }, +}; + +export const OSS: Story = { + args: { + isEnterprise: false, + }, +}; diff --git a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx index b6915a7cca..622b69abb5 100644 --- a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx @@ -1,4 +1,5 @@ import { Button } from "components/Button/Button"; +import { Link } from "components/Link/Link"; import { Activity, Coins, Expand, SquareArrowOutUpRight } from "lucide-react"; import type { FC } from "react"; import { docs } from "utils/docs"; @@ -23,24 +24,18 @@ const EnterpriseVersion: FC = () => {
- - -

- Multi-Organization access controls  -

- - - +

+ + Multi-Organization access controls + +

Manage multiple teams and projects within a single deployment, each with isolated access. @@ -48,15 +43,11 @@ const EnterpriseVersion: FC = () => {

- - -

Custom role 

- - - +

+ + Custom role + +

Configure specific permissions for teams or contractors with tailored roles. @@ -64,17 +55,11 @@ const EnterpriseVersion: FC = () => {

- - -

- Org-Level quotas for chargeback  -

- - - +

+ + Org-Level quotas for chargeback + +

Set and monitor resource quotas at the organization level to support internal cost tracking. @@ -108,7 +93,7 @@ const OSSVersion: FC = () => { @@ -117,7 +102,7 @@ const OSSVersion: FC = () => {

- +   Deploy coder at scale

@@ -162,7 +147,7 @@ const OSSVersion: FC = () => {

- +   Control infrastructure costs

@@ -207,7 +192,7 @@ const OSSVersion: FC = () => {

- +   Govern workspace activity

diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx index fd5071a141..75d85137d7 100644 --- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx +++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx @@ -295,7 +295,7 @@ export const IdpGroupSyncForm: FC = ({ }} > - + Add IdP group diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx index 2ff88054a3..28b1c79ce2 100644 --- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx +++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx @@ -235,7 +235,7 @@ export const IdpRoleSyncForm: FC = ({ }} > - + Add IdP role diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx index 478d4b48b8..a0fe7f9642 100644 --- a/site/src/pages/TasksPage/TasksPage.tsx +++ b/site/src/pages/TasksPage/TasksPage.tsx @@ -239,7 +239,7 @@ const TasksPage: FC = () => { > Bulk actions - + diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx index 2292de61cc..3297a1a432 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx @@ -31,7 +31,7 @@ export const IntervalMenu: FC = ({ value, onChange }) => { diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx index 080a0d7311..ef0a41835d 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx @@ -32,7 +32,7 @@ export const WeekPicker: FC = ({ value, onChange }) => { diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx index 6b4c16100d..69e3fb3570 100644 --- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx +++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx @@ -27,11 +27,8 @@ export const ProvisionerTagsPopover: FC = ({ return ( - - + + Expand provisioner tags diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index c6c7e05ec5..d123c0123e 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -150,7 +150,7 @@ export const WorkspacesPageView: FC = ({ > Bulk actions - +