Skip to content

fix(#4198): use the placeholder colour for multiselect placeholder fallbacks - #4199

Open
twjeffery wants to merge 2 commits into
devfrom
tom/4198-dropdown-text-colours
Open

fix(#4198): use the placeholder colour for multiselect placeholder fallbacks#4199
twjeffery wants to merge 2 commits into
devfrom
tom/4198-dropdown-text-colours

Conversation

@twjeffery

@twjeffery twjeffery commented Aug 5, 2026

Copy link
Copy Markdown
Collaborator

Companion to GovAlta/design-tokens#171, which carries the actual colour change for issue #4198. Best reviewed together with that one.

What is here

The placeholder fallbacks. Two CSS fallback values in DropdownMultiselect.svelte move from var(--goa-input-color-text-default) to var(--goa-input-color-text-placeholder), on .value-display.placeholder and .filter-input::placeholder. These are the fallbacks for --goa-dropdown-multiselect-color-text-placeholder. That token is defined, so the fallback never fires and this changes no rendering on its own. They are wrong on their own terms and this makes them honest.

Playground pages at bugs/4198 in both the React and Angular playgrounds. Empty fields side by side across dropdown, multiselect, text input and text area, an empty field next to a filled one, an open menu, the multiselect whose options are deliberately unchanged, and the disabled and error states as a no drift check. Use the theme toggle in the nav for dark mode.

One commit still to come

@abgov/design-tokens-v2 is pinned at 2.12.0. Once #171 merges and publishes, this PR takes a one line bump to the published version, which is what actually makes the change visible to consuming teams.

Flagging it up front so it is not a surprise after review. Until that commit lands the playground pages render the unfixed state, which is expected. Nothing else about this PR changes.

Notes

For anyone applying the Svelte change by hand, var(--goa-input-color-text-default) appears five times in that file. The other three belong to --goa-dropdown-multiselect-color-text, the regular text colour, where falling back to the default is correct.

Dark mode needs no work. The tokens resolve through greyscale values that the dark theme already overrides, so dark-theme.css came back byte identical from the tokens rebuild and is not in #171.

@twjeffery twjeffery linked an issue Aug 5, 2026 that may be closed by this pull request
@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://GovAlta.github.io/ui-components/pr-preview-angular/pr-4199/

Built to branch gh-pages at 2026-08-05 17:38 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown

Preview links

Target URL
Docs https://govalta.github.io/ui-components/pr-preview/pr-4199/
React playground https://govalta.github.io/ui-components/pr-preview-react/pr-4199/
Angular playground https://govalta.github.io/ui-components/pr-preview-angular/pr-4199/

Built from commit ea0a88f. Previews are removed automatically when this PR closes.

@ArakTaiRoth ArakTaiRoth left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR essentially isn't doing anything. I'm just looking at your created PR files in Angular.

  1. Dropdown and Dropdown Multiselect still have dark text for placeholder text
  2. Dropdown and Dropdown Multiselect still have greyed out text for selectable options
  3. Dropdown Multiselect also doesn't look as dark as it should?
  4. Disabled Dropdown is using the correct placeholder grey value, Dropdown error and Multiselect disabled aren't

I've attached pictures of the issues I raised above:

Image Image Image Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dropdown: placeholder and option text colours are inverted

2 participants