Skip to content

Fix Select description with hideLabel#151

Merged
geoquant merged 1 commit intomainfrom
opencode/issue150-20260225193932
Mar 3, 2026
Merged

Fix Select description with hideLabel#151
geoquant merged 1 commit intomainfrom
opencode/issue150-20260225193932

Conversation

@ask-bonk
Copy link
Copy Markdown
Contributor

@ask-bonk ask-bonk Bot commented Feb 25, 2026

All tests pass. Let me provide a summary of the changes:

Summary

I fixed the issue where Select component's description and error props were being silently ignored when hideLabel was true (the default).

Changes Made

1. packages/kumo/src/components/select/select.tsx

  • Modified the "hidden label" render path (lines 274-302) to also render description and error elements
  • When hideLabel is true, the component now renders:
    • A visually hidden (sr-only) label for accessibility
    • The select control
    • Either an error message (styled with text-kumo-danger) or a description (styled with text-kumo-subtle)
  • Uses simple <span> elements with the same styling as the Field component uses

2. packages/kumo/src/components/select/select.test.tsx (new file)

  • Added 7 tests covering:
    • Description renders when hideLabel is true (default)
    • Description renders when hideLabel is explicitly true
    • Description renders when hideLabel is false
    • Label remains accessible via sr-only when hideLabel is true
    • Error message renders when hideLabel is true
    • Error object renders when hideLabel is true
    • Error takes precedence over description when both are provided

3. .changeset/fix-select-description-hidelabel.md (new file)

  • Created changeset for the patch version bump

Before/After

Before: When using <Select label="DB" description="Select your preferred database">, the description was silently ignored because hideLabel defaults to true.

After: The description now renders below the select control, maintaining the same styling as when hideLabel={false}.

Closes #150

github run

Co-authored-by: Brayden <Brayden@users.noreply.github.com>
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Feb 25, 2026

npm i https://pkg.pr.new/@cloudflare/kumo@151

commit: 67b8530

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 25, 2026

Docs Preview

View docs preview

Commit: b0cc5ce

@github-actions
Copy link
Copy Markdown
Contributor

Visual Regression Report

7 screenshot(s) with visual changes:

Select / Basic Usage

15,051 px (2.45%) changed

Before After Diff
Before After Diff

Select / Basic Label and Value

23,156 px (2%) changed

Before After Diff
Before After Diff

Select / Loading

0 px (0%) changed

Before After Diff
Before After Diff

Select / Multiple Item

19,747 px (2.43%) changed

Before After Diff
Before After Diff

Select / Select

13,401 px (1.56%) changed

Before After Diff
Before After Diff

Select / Select.Option

13,924 px (1.62%) changed

Before After Diff
Before After Diff

Select (Open)

0 px (0%) changed

Before After Diff
Before After Diff
3 screenshot(s) unchanged
  • Select / Placeholder
  • Select / Custom Rendering
  • Select / More Example

Generated by Kumo Visual Regression

@geoquant geoquant merged commit ee5a632 into main Mar 3, 2026
18 checks passed
@geoquant geoquant deleted the opencode/issue150-20260225193932 branch March 3, 2026 06:28
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.

[select] description is not rendered when hideLabel=true (despite API/docs suggesting helper text support)

1 participant