Skip to content

refactor(website): fold .outlineButton CSS class into the Button outline variant#6664

Draft
theosanderson wants to merge 5 commits into
mainfrom
integrate-outline-button
Draft

refactor(website): fold .outlineButton CSS class into the Button outline variant#6664
theosanderson wants to merge 5 commits into
mainfrom
integrate-outline-button

Conversation

@theosanderson

@theosanderson theosanderson commented Jun 12, 2026

Copy link
Copy Markdown
Member

What

The Button component library (introduced in #6604) already defines an outline variant in buttonStyles.ts, but a parallel global .outlineButton CSS class in base.css was still the de-facto standard for outline-style buttons (~10 usages) and was never folded into the library. The two weren't even consistent: the typed outline variant rendered dark/near-black, while .outlineButton rendered primary-coloured.

This PR integrates that style into the component library so there is a single, canonical outline button.

Addresses #6663 (and chips away at the broader button-variety cleanup in #6662).

Changes

  • buttonStyles.ts: redefine the outline variant to be primary-coloured (bg-white border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white), matching the dominant real-world .outlineButton look rather than the lone dark one.
  • buttonStyles.ts: standardise the shared button radius on rounded-md (6px) instead of rounded (4px). The migrated outline buttons already used 6px, so this keeps them pixel-identical and nudges every other library button (primary/neutral/ghost) to the same single radius. Circle buttons are unaffected (rounded-full still wins).
  • Migrate every .outlineButton call site to variant='outline':
    • DowloadDialogButton.tsx ("Download all entries")
    • DownloadSubmittedDataButton.tsx
    • LinkOutMenu.tsx — a Headless UI MenuButton, so it uses buttonClasses({ variant: 'outline', ... })
    • SeqSetItemActions.tsx (×5) and SeqSetItem.tsx
  • Remove .outlineButton from base.css.
  • SequenceEntryHistoryMenu.tsx (the version dropdown) previously used the outline variant, so it would have turned primary. It's kept dark instead — to match the black control icons it sits beside in SeqPreviewModal — via one-off utility classes rather than reviving a dark variant in the design system.

The related .outlineButtonDropdownItem class is a menu-item text style (not a button) and is left untouched. The broader "cut down button variety" work (#6662) is separate.

outline button before/after

Bonus: no greyed-out flash before hydration

Buttons are disabled until React hydration completes (DisabledUntilHydrated) so Playwright can't interact with them too early. That greyed-out disabled look lived in the shared button base as :disabled pseudo-classes, so it also applied during the brief pre-hydration window — buttons flashed the disabled style on load.

Now the disabled look is applied by intent instead: buttonClasses takes a disabled option (swapping the variant look for the greyed-out look) and the :disabled pseudo-classes are removed from base. The Button component distinguishes "genuinely disabled" (keeps the greyed-out look) from "only waiting for hydration" (keeps the normal enabled appearance and shows a cursor-wait loading cursor). Covered by a new Button.spec.tsx.

Notes

  • tsc on the changed files is clean; Button.spec.tsx, the DownloadDialog suite, and SequenceEntryHistoryMenu.spec.tsx pass. The repo's astro check / full tsc currently fail in this environment on pre-existing unrelated missing-dependency issues (flowbite-react plugin, minisearch, exceljs) — present on main too.

🤖 Generated with Claude Code

🚀 Preview: Add preview label to enable

@claude claude Bot added the website Tasks related to the web application label Jun 12, 2026
@theosanderson theosanderson added the preview Triggers a deployment to argocd label Jun 12, 2026
…ine variant

The Button component library (introduced in #6604) defines an `outline`
variant, but a parallel global `.outlineButton` CSS class in base.css was
still the de-facto standard for outline buttons (~10 usages) and never got
integrated. The two even looked different: the variant was dark/near-black
while `.outlineButton` was primary-coloured.

Consolidate to a single outline look:
- Make the `outline` variant primary-coloured, matching the dominant
  real-world `.outlineButton` style.
- Migrate all `.outlineButton` call sites to `variant='outline'` (or
  `buttonClasses({ variant: 'outline' })` for the Headless UI MenuButton).
- Remove `.outlineButton` from base.css.
- Standardise the shared button radius on `rounded-md` (6px) instead of
  `rounded` (4px), so the whole library matches the radius the migrated
  outline buttons already had.

The single previously-dark `outline` usage (SequenceEntryHistoryMenu) now
matches, which is the more harmonious outcome.

The related `.outlineButtonDropdownItem` (a menu-item text style, not a
button) is left as-is.

Closes #6663

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@theosanderson theosanderson force-pushed the integrate-outline-button branch from 33ccb37 to 9fa723a Compare June 12, 2026 15:57
theosanderson and others added 4 commits June 12, 2026 17:11
…lack

The version selector next to them is now primary-coloured (it uses the
outline variant), which made the adjacent dock/download/open/close icon
buttons look out of place in black (text-gray-900) with an off-palette
hover (bg-blue-200). Switch the shared BUTTONCLASS to text-primary-700 /
hover:bg-primary-100 so the whole control row is on-brand.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ntil hydration

Buttons are disabled until React hydration completes (DisabledUntilHydrated)
so Playwright can't interact with them too early. The greyed-out disabled
look lived in the shared button `base` as `:disabled` pseudo-classes, so it
also applied during that brief pre-hydration window — making buttons flash
the disabled style on load.

Apply the disabled look by intent instead: `buttonClasses` now takes a
`disabled` option (swapping the variant look for the greyed-out look), and
the `:disabled` pseudo-classes are removed from `base`. The Button component
distinguishes "genuinely disabled" from "only waiting for hydration": the
former keeps the greyed-out look, while the latter keeps the normal enabled
appearance and shows a `cursor-wait` loading cursor.

Added Button.spec.tsx covering the three states.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ead of black"

Reverts the SeqPreviewModal control-icon recolour; keeping the icons black
as before per review feedback. The .outlineButton integration (which makes
the adjacent version selector primary) stays.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…utline variant

After folding .outlineButton into the (now primary-coloured) `outline`
variant, the version selector in SequenceEntryHistoryMenu turned primary.
Per review, keep it dark to match the black control icons it sits beside in
SeqPreviewModal — applied as one-off utility classes rather than reviving a
dark variant in the design system.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@theosanderson theosanderson removed the preview Triggers a deployment to argocd label Jun 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

website Tasks related to the web application

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant