Skip to content

Conversation

@pd-redis
Copy link
Contributor

@pd-redis pd-redis commented Dec 1, 2025

What

Migrated MultiSearch component from SCSS modules to styled-components, removing the dependency on styles.module.scss and replacing all class-based styling with styled-components that use theme spacing and semantic colors.

Before: After:
image image
image image

Technical decisions:

  • Replaced all hardcoded spacing with theme values for consistency
  • Used semantic colors from theme instead of CSS variables where available

Testing

  1. Navigate to any page with MultiSearch component (e.g., Browser page)
  2. **Verify clear search button styling ** - no extra padding bellow

Automated tests:

  • Existing component tests should continue to pass

Note

Replaces SCSS-based styling in MultiSearch with themed styled-components, adjusts spacing/min-width, and cleans up related markup.

  • UI (MultiSearch):
    • Styling migration: Move from styles.module.scss and classNames to themed styled-components in MultiSearch.styles.ts (StyledMultiSearch, StyledSearchInput, StyledAutoSuggestions, StyledSuggestion*, StyledClearButton, StyledMultiSearchWrapper, etc.).
    • Theming/spacing: Replace CSS vars/hardcoded values with theme tokens (spacing, colors, borders); clear/reset button uses themed margin; suggestions dropdown uses themed padding, border, and min-width calc.
    • Behavioral styling: Encode hover/focus states and remove-button visibility via styled-components props/selectors.
    • Markup tweaks: Use Text for "Clear history" label; remove cx and SCSS classes; simplify RiTooltip usage.
  • Chore:
    • Remove styles.module.scss file and related imports/usages.

Written by Cursor Bugbot for commit 42f6e6b. This will update automatically on new commits. Configure here.

Migrate MultiSearch component from SCSS modules to styled-components
for better theme integration and consistency.

References: #RI-7817
Replace styles.module.scss with styled-components using theme spacing
and semantic colors. Remove all SCSS class references and add styled
components for suggestion items, text, options, and buttons.

References: #RI-7817
@pd-redis pd-redis merged commit 2438ebb into main Dec 1, 2025
19 checks passed
@pd-redis pd-redis deleted the fe/bugfix/RI-7817-clear-search branch December 1, 2025 13:02
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.

3 participants