Skip to content

Fix ColorConverter RGB input, layout toggle, and styling issues#35

Merged
vuon9 merged 2 commits intomainfrom
fix/color-converter
Feb 8, 2026
Merged

Fix ColorConverter RGB input, layout toggle, and styling issues#35
vuon9 merged 2 commits intomainfrom
fix/color-converter

Conversation

@vuon9
Copy link
Owner

@vuon9 vuon9 commented Feb 8, 2026

Summary

This PR fixes several issues in the ColorConverter tool:

Changes Made

  1. Fixed RGB NumberInput +/- button behavior

    • Changed onChange to Carbon's API signature (e, { value }) => ...
    • Now correctly handles both typing and stepper button clicks
  2. Added alternating row backgrounds for code snippets

    • Code snippet tiles now alternate between --cds-layer and --cds-layer-hover
    • Improves readability in the generated code section
  3. Fixed layout toggle functionality

    • Layout toggle now properly switches between horizontal and vertical layouts
    • Changed IconButton to regular Button for better compatibility
    • Moved toggle to dedicated position for better accessibility
  4. Reorganized layout with always-visible history

    • History panel is now always visible (70% code snippets / 30% history split)
    • Shows "No colors in history" message when empty
    • Layout toggle properly rearranges both panels
  5. Fixed prop type warnings

    • Added labelText and hideLabel to TextInput
    • Changed HSL NumberInput min/max from strings to numbers
    • Updated onChange handlers to use Carbon's API
  6. Configured Vite for IBM Plex fonts

    • Added Sass importer to strip ~ prefix from font imports
    • Added alias for @ibm/plex resolution
    • Eliminates font resolution warnings at build time

Testing

  • RGB +/- buttons work correctly
  • Layout toggle switches between horizontal/vertical
  • History panel is always visible
  • No console warnings for prop types
  • Fonts load correctly without warnings

Related Issues

Fixes ColorConverter layout and input issues.

@github-actions
Copy link

github-actions bot commented Feb 8, 2026

Code Coverage

Package Line Rate Health
devtoolbox/internal/barcode 90%
devtoolbox/internal/codeformatter 56%
devtoolbox/internal/converter 60%
devtoolbox/internal/datagenerator 91%
devtoolbox/internal/datetimeconverter 74%
devtoolbox/internal/jwt 42%
Summary 65% (3087 / 4770)

Minimum allowed line rate is 60%

@vuon9 vuon9 merged commit cd83b96 into main Feb 8, 2026
2 checks passed
@vuon9 vuon9 deleted the fix/color-converter branch February 8, 2026 12:39
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.

1 participant