refactor(website): fold .outlineButton CSS class into the Button outline variant#6664
Draft
theosanderson wants to merge 5 commits into
Draft
refactor(website): fold .outlineButton CSS class into the Button outline variant#6664theosanderson wants to merge 5 commits into
.outlineButton CSS class into the Button outline variant#6664theosanderson wants to merge 5 commits into
Conversation
…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>
33ccb37 to
9fa723a
Compare
…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>
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.
What
The Button component library (introduced in #6604) already defines an
outlinevariant inbuttonStyles.ts, but a parallel global.outlineButtonCSS class inbase.csswas 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 typedoutlinevariant rendered dark/near-black, while.outlineButtonrendered 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 theoutlinevariant to be primary-coloured (bg-white border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white), matching the dominant real-world.outlineButtonlook rather than the lone dark one.buttonStyles.ts: standardise the shared button radius onrounded-md(6px) instead ofrounded(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-fullstill wins)..outlineButtoncall site tovariant='outline':DowloadDialogButton.tsx("Download all entries")DownloadSubmittedDataButton.tsxLinkOutMenu.tsx— a Headless UIMenuButton, so it usesbuttonClasses({ variant: 'outline', ... })SeqSetItemActions.tsx(×5) andSeqSetItem.tsx.outlineButtonfrombase.css.SequenceEntryHistoryMenu.tsx(the version dropdown) previously used theoutlinevariant, so it would have turned primary. It's kept dark instead — to match the black control icons it sits beside inSeqPreviewModal— via one-off utility classes rather than reviving a dark variant in the design system.The related
.outlineButtonDropdownItemclass is a menu-item text style (not a button) and is left untouched. The broader "cut down button variety" work (#6662) is separate.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 buttonbaseas:disabledpseudo-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:
buttonClassestakes adisabledoption (swapping the variant look for the greyed-out look) and the:disabledpseudo-classes are removed frombase. The Button component distinguishes "genuinely disabled" (keeps the greyed-out look) from "only waiting for hydration" (keeps the normal enabled appearance and shows acursor-waitloading cursor). Covered by a newButton.spec.tsx.Notes
tscon the changed files is clean;Button.spec.tsx, the DownloadDialog suite, andSequenceEntryHistoryMenu.spec.tsxpass. The repo'sastro check/ fulltsccurrently fail in this environment on pre-existing unrelated missing-dependency issues (flowbite-react plugin,minisearch,exceljs) — present onmaintoo.🤖 Generated with Claude Code
🚀 Preview: Add
previewlabel to enable