Skip to content

edit: fix select component ui bug - #103

Merged
louisescher merged 1 commit into
v1.0.0from
select-style-fix
Jul 21, 2025
Merged

edit: fix select component ui bug#103
louisescher merged 1 commit into
v1.0.0from
select-style-fix

Conversation

@RATIU5

@RATIU5 RATIU5 commented Jul 21, 2025

Copy link
Copy Markdown
Member

Description

  • What does this PR change? Fixes ui bug on select components where background was messed up and list items had bullet points

@RATIU5
RATIU5 requested review from a team and louisescher as code owners July 21, 2025 14:02
@changeset-bot

changeset-bot Bot commented Jul 21, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: cbba208

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@studiocms/ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Jul 21, 2025

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@pkg-pr-new

pkg-pr-new Bot commented Jul 21, 2025

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@studiocms/ui@103

commit: cbba208

@louisescher
louisescher merged commit 111e685 into v1.0.0 Jul 21, 2025
@louisescher
louisescher deleted the select-style-fix branch July 21, 2025 14:05
louisescher added a commit that referenced this pull request Jan 5, 2026
* Update README.md

* Remove ThemeToggle component and related files (#87)

* Remove ThemeToggle component and related files; recommend using ThemeHelper directly to avoid errors.

* Update docs/src/components/landing/HeroSection.astro

* Update .changeset/sixty-rice-peel.md

Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>

---------

Co-authored-by: Louis Escher <66965600+louisescher@users.noreply.github.com>
Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>

* feat(skeleton): add basic skeleton loading state component (#86)

* feat(skeleton): add basic skeleton loading state component

* edit(skeleton): add changeset, adjusted types for Skeleton

* edit(skeleton): use zog types for type safety

* edit(skeleton): convert spaces to tabs in styles

* edit(skeleton): updated docs title casing

* feat(Iconify): Allow custom icons to be added for the Icon component (#88)

* feat(icons): update icon handling to use AvailableIcons type and adjust icon imports

* feat(icons): update icon imports to use HeroIcons format and adjust related components

* feat(icon): enhance error handling for icon collection and name validation

* feat(icon): enhance error handling with detailed hints for invalid icons

* feat(icon): enforce required height and width properties for icons and improve error handling

* feat(icon): improve error handling for invalid icon names with detailed hints

* feat(tsconfig): include icons.d.ts in TypeScript configuration

* feat(events): add custom event handling with CustomEventMap and global Document interface extension

* feat(icon): add validation for icon names to prevent invalid formats

* feat(icon): enhance validation for icon names to handle edge cases

* fix(icon): correct validation logic for icon name format

* fix(icon): correct icon name validation logic and variable naming

* feat(icon): enhance icon validation and error handling with detailed documentation

* feat(icon): update Icon component to support iconifyJSON icons with new naming convention

* feat(icon): add detailed JSDoc comments for IconBase component and its props

* fix(icon): update default dimensions in renderData function to use iconCollection values

* fix(icon): update renderData function to prioritize iconData dimensions over defaults

* fix(icon): simplify error message for missing icons in IconBase component

* feat(studiocms_ui): Migrate to ambient types for the static non-generated types (#89)

* feat(studiocms_ui): update TypeScript configurations and remove obsolete scripts.d.ts file

* feat(types): migrate from injected types to ambient types for static virtual modules

* feat(dependencies): update package versions and add knip configuration

* feat(ci): add Knip Linter workflow for CI integration (#90)

* fix: alert type shows correct colors (#92)

* feat: Add TailwindCSS prose class (#93)

* feat: add the prose class ported from tailwindcss

* remove old sidebar badges, adjust prose styling, finish prose docs and adjustments

* Create twelve-otters-pull.md

* Update .changeset/twelve-otters-pull.md

Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>

---------

Co-authored-by: Louis Escher <louisescher@proton.me>
Co-authored-by: Louis Escher <66965600+louisescher@users.noreply.github.com>
Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>

* fix: run knip ci only when same repo (#98)

* Fix color declarations (#96)

* add: base for flexible tooltips (#101)

* edit: fix select component ui bug (#103)

* accordion: refactor to fix #75 & #76 (#104)

* accordion: refactor to fix #75 & #76

* tabs: support for nested tabs

* docs: added nested tabs example

* tabs: add active/default tab attribute

* edit: condensed this pr to one patch update

* Refactor virtual modules (#106)

* add: introduce individual component virtual exports for easier imports

* refactor: clean up formatting in settings and virtuals definitions

* Refactor component imports to use tree-shakeable paths

- Updated footer, group, input, modal, progress, radio-group, row, select, select-searchable, skeleton, tabs, textarea, toast, toggle, tooltip, user components to import from their specific paths instead of the main components directory.
- Enhanced documentation to reflect the new import structure for better clarity and optimization.

* chore: update TypeScript configuration and dependencies

- Updated TypeScript compiler options in ec.config.mjs to use ESNext features.
- Added @types/node dependency with version 24.3.0 in package.json.
- Updated references in dropdown, modal, toast, and theme-helper documentation to include type references for @studiocms/ui.
- Updated pnpm-lock.yaml to reflect the new @types/node version across various dependencies.

* fix: update code block syntax for Astro config example

* Setup 1.0.0 beta release workflow (#107)

* add: support for v1.0.0 branch in CI workflow and create initial changeset configuration

* update: enhance CI workflow for main and v1.0.0 branches; add changesets to pre.json

* Update .github/workflows/ci-push-main.yml

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* [ci] lint

* Update pre.json

* [ci] lint

* 👷 [ci]: Version Packages (beta) (#108)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat: Add upgrade guide for v1.0 (#109)

* feat: Add upgrade guide for v1.0

* Update docs/src/content/docs/docs/upgrade-guides/0.4-to-1.0.mdx

Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>

* chore: Add example to icons in upgrade guide

---------

Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>

* fix: Button focus is hidden behind other buttons in group (#110)

* fix: Button focus is hidden behind other buttons in group

* chore: Add changeset

* feat: Add optional icons & help text to inputs (#111)

* feat: Add optional icons to inputs

* feat: Add optional help text to inputs

* fix: Add changeset

* fix: Remove accidentally added import (thanks intellisense)

* [ci] lint

* fix: Ensure buttons in dropdowns within groups have proper styles (#112)

* fix: Buttons within dropdowns within groups don't have proper border radius

* fix: Make dropdown buttons in the middle of groups behave correctly

* 👷 [ci]: Version Packages (beta) (#113)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Setup Testing with Vitest and Playwright for full integration and e2e tests (#116)

* feat: add Playwright configuration and accessibility audit utilities

- Updated pnpm workspace to include test fixtures.
- Added Playwright configuration for testing in `packages/studiocms_ui/playwright.config.ts`.
- Implemented accessibility audit utilities using Axe in `axeAudit.ts`.
- Created a test server fixture with Astro setup, including necessary files and configurations.
- Added a favicon and a basic index page for the test server.
- Configured Vitest for testing Astro components with custom rendering options.
- Established a testing environment for the Astro integration with appropriate test cases.

* fix: update build and dev scripts to include TypeScript and Astro files

* feat: enhance CI configuration and update test coverage reporting

* feat: update CI configuration to include Playwright tests and coverage reporting

* feat: add Codecov configuration for coverage reporting

* fix: update import path for UI module in Vitest configuration

* fix: update coverage exclusion patterns in Vitest configuration

* feat: export createIconifyPrefixCollection function and add tests for icon collections

* feat: add tests for icon components and their snapshots

* feat: export functions from headers utility and add tests for head configuration

* feat: add tests for getIconString utility and validate SVG output

* feat: add comprehensive tests for iconify utilities including SVG handling and transformations

* feat: add comprehensive tests for ThemeHelper and improve test setup with jest-extended

* feat: export color conversion functions and add comprehensive tests for ColorPicker

* fix: add v8 ignore comments for Astro dev toolbar app to improve coverage reporting

* refactor: update ColorPicker tests to use type imports and clean up setup

* refactor: update Vitest setup to use setup-jest.ts and remove obsolete vitest.setup.ts

* fix: update testMatch pattern in Playwright config to use e2e tests

* feat: add Accordion, Badge, and Breadcrumbs components with comprehensive tests and snapshots

* feat: configure Astro with UI integration and disable dev toolbar

* chore: update pnpm workspace configuration and astro version

- Removed 'build-scripts' from workspace packages.
- Updated 'astro' dependency from ^5.1.1 to ^5.13.8.
- Added new Astro configuration file for test server in 'studiocms_ui' package.

* Implement code changes to enhance functionality and improve performance

* refactor: remove experimental SVG configuration from Astro config

* feat: add exclusion for _Template.test.ts in Vitest configuration

* feat: add _Template.e2e.ts to testIgnore in Playwright configuration

* test: add comprehensive tests for Button component with various sizes, colors, variants, and props

* test: refactor Button and Breadcrumbs tests to use parameterized test cases for improved readability and maintainability

* test: update snapshot tests for Button and Breadcrumbs components to improve prop representation

* test: add tests for Card and Center components with snapshot verification

* test: add Checkbox and Divider component tests with snapshot verification

* test: add Dropdown and Footer component tests with snapshot verification

* test: add snapshot tests for Group component to verify rendering

* test: add snapshot tests for Icon component to verify rendering

* test: add snapshot tests for IconBase component to verify rendering

* test: add validation checks for icon name and collection in Icon components

* test: add Input component tests with snapshot verification

* test: add Modal component tests with snapshot verification

* test: add snapshot tests for Progress component to verify rendering

* test: add snapshot tests for RadioGroup and Row components to verify rendering

* fix: correct label formatting in RadioGroup component

* test: add snapshot tests for SearchSelect and Select components to verify rendering

* fix: update name prop in SearchSelect test and remove outdated snapshot

* test: update SearchSelect component description to use todo for future implementation

* test: add snapshot tests for Sidebar and Skeleton components to verify rendering

* test: add snapshot tests for Tabs and Textarea components to verify rendering

* test: mark Tabs component tests as todo due to dynamic behavior

* test: add snapshot tests for Toaster component to verify rendering with various props

* test: add snapshot tests for Toggle component to verify rendering with various props

* test: add snapshot tests for Tooltip and User components to verify rendering with various props

* test: mark DevToolbarColorPicker tests as todo for future implementation

* test: add Accordion component tests and accessibility audits

* test: enhance Accordion component tests with improved accessibility checks and structure

* test: refactor Template component tests for improved structure and accessibility checks

* chore: add @types/node dependency to package.json and pnpm-lock.yaml

* test: implement Playwright E2E tests and reporting in CI workflow

* chore: update dependencies in package.json and pnpm-lock.yaml for improved testing support

* chore: update actions/upload-artifact and actions/download-artifact versions in CI workflow

* fix: update test result attachment names to include theme for better context

* fix: update theme retrieval in AxeAudit tests to use page.evaluate for accurate context

* fix: ensure default theme is 'dark' when retrieving theme data in AxeAudit tests

* fix: consolidate imports of expect and test from axeAudit fixture for consistency

* fix: add 'dist' to .gitignore to prevent build artifacts from being tracked

* feat: add Badge component tests and corresponding test page

* fix: add spacing between accordion test sections for improved readability

* fix: update job names for clarity in CI workflow

* cleanup CI runner

* fix: update CI workflow names for clarity and adjust test result upload condition

* feat: add Breadcrumbs component tests and corresponding test page

* fix: reset retries to 0 in Playwright configuration

* fix: add descriptive messages for accessibility violation expectations

* fix: improve error messages for accessibility violations in Axe Audit tests

* fix: update accessibility violation assertions to use toHaveLength for clarity

* feat: enhance test pages with additional spacing and dynamic test listing

* chore: remove first contributor CI workflow and update package configurations

- Deleted the CI workflow for first-time contributors.
- Updated `.vscode/settings.json` to include additional extensions.
- Modified `package.json` files across multiple packages to change `@types/node` version to `catalog:`.
- Updated `pnpm-lock.yaml` to reflect changes in dependencies and versions.
- Adjusted `pnpm-workspace.yaml` to update `@types/node` version.
- Added a new `renovate.json` configuration for dependency management.

* feat: add Dockerfile for building and serving documentation

* feat: add Button component tests and accessibility checks

* feat: add end-to-end tests for Card component with accessibility checks and report generation

* fix: remove 'github' reporter from Playwright config and CI report merging

* fix: ensure Playwright tests continue on error for better reporting

* feat: refactor accessibility tests for components to use dynamic test generation

* feat: update Playwright configuration and add CTRF JSON reporter for enhanced reporting

* feat: add playwright-ctrf-json-reporter dependency to pnpm-lock.yaml

* fix: update GitHub report configuration in CI workflow for pull requests

* fix: update GitHub test reporter configuration for pull requests

* fix: update GitHub test reporter configuration to use pull-request-report

* fix: update HTML report name and GitHub test reporter version in CI workflow

* fix: rename playwright reporter job and update report publishing conditions

* fix: add overwrite-comment option to GitHub report configuration

* fix: change update-comment option to overwrite-comment in GitHub report configuration

* fix: remove github-report option and enable overwrite-comment in report configuration

* fix: exclude template test file from current tests in index.astro

* fix: update template test files with clearer instructions for creating new tests

* fix: update report configuration to include pull-request and file-report options

* fix: update E2E report configuration and dependencies for improved reporting

* fix: update permissions and report configuration for E2E tests

* fix: remove status check from E2E test report configuration

* feat: add E2E tests for Center and Checkbox components with accessibility checks

* feat: add Divider component tests with accessibility checks and update test page

* feat: add Dropdown component tests with accessibility checks and create test page

* fix: update docs:dev script for consistent filtering and add comments to template test file

* fix: correct variant type in Badge component and update test case

* fix: add line breaks for better spacing in Button and Card component tests

* feat: add Footer component tests with accessibility checks and create test page; update Button and Card component tests for consistent spacing

* feat: add Group component tests with accessibility checks and create test page

* feat: add Icon component tests with accessibility checks and create test page

* feat: enhance accessibility tests for components in dark and light modes

* feat: add Layout component and integrate it into various test pages; implement Input component tests with accessibility checks

* feat: add Modal component and its test page; implement accessibility tests for dark and light modes

* feat: add Progress component and its test page; implement accessibility tests for dark and light modes

* feat: add RadioGroup and Row components with accessibility tests for dark and light modes

* feat: add Select component with basic and multiple functionality tests; implement accessibility tests for dark and light modes

* fix: rename path to href in CurrentTest interface and update references in index.astro

* feat: add SearchSelect component with basic and multi-select functionality; implement accessibility tests for dark and light modes

* feat: add Skeleton component tests and accessibility checks for dark and light modes

* feat: add Tabs component tests and implement accessibility checks for dark and light modes

* feat: add Textarea component tests and implement accessibility checks for dark and light modes

* feat: add Toast and Toggle component tests with accessibility checks for dark and light modes

* feat: add Tooltip and User component tests with accessibility checks for dark and light modes

* feat: add Sidebar (single and double) component tests with accessibility checks for dark and light modes

* Update packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro

Co-authored-by: Louis Escher <66965600+louisescher@users.noreply.github.com>

---------

Co-authored-by: Louis Escher <66965600+louisescher@users.noreply.github.com>

* fix: Update ignore patterns and remove build-scripts from initialVersions (#120)

* fix: Update knip configuration to include additional binaries and test entries (#121)

* fix: Remove unnecessary comma in Toaster.astro (#119)

* add: custom set ids on TabItem/Tabs for testing (#118)

Co-authored-by: Louis Escher <66965600+louisescher@users.noreply.github.com>

* fix: Icon position on inputs and search selects (#123)

* [ci] lint

* feat: enhance icon handling and processing, support hyphens in icon set names (#124)

* feat: enhance icon handling and processing, support hyphens in icon set names

* test: add unit tests for generateIconTypes function

* Update colors and components to pass WCAG AAA (#125)

Co-authored-by: Louis Escher <louisescher@proton.me>

* Update og.png

* Fix dev toolbar color pickers, add new icon (#126)

* Lint (#127)

* fix: Dev toolbar colors, add new icon

* feat: Add dev toolbar tests

* Update ColorPicker.test.ts

* screw windows clipboard

* Update ColorPicker.ts

* fix: More tests

* fix: Disable dev toolbar

* Update icon.ts

* fix: Lint

---------

Co-authored-by: Louis Escher <louisescher@proton.me>

* [ci] lint

* Update ignore list in changeset config to include @test-fixture/server (#128)

* 👷 [ci]: Version Packages (beta) (#122)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat: Add new social proof entries (#129)

* [ci] lint

* fix toggle and flat button colors (#130)

* fix toggle and flat button colors

* updated customization docs with changes to colors

* colors didn't change, this should actually change them

* [ci] lint

* 👷 [ci]: Version Packages (beta) (#131)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: renamed css variable to correct name (#133)

* feat: move component helpers to separate virtual modules (#137)

* feat: move component helpers to separate virtual modules

* fix: update import paths for component helpers to use client modules

* fix: update import paths for components to use client modules

* fix: separate import statements for Progress and ProgressHelper components

* fix: refactor component mapping to separate server and client components

* 👷 [ci]: Version Packages (beta) (#134)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Change input icon color to var(--text-muted) (#138)

* feat: Refactor selects into web components (#136)

Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>

* [ci] lint

* 👷 [ci]: Version Packages (beta) (#139)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: Add missing background color to modals (#140)

* 👷 [ci]: Version Packages (beta) (#141)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Prep work for v1 release (#143)

* fix: Update mode to 'exit' in changeset and remove version branch from CI workflow

* feat: Add CI workflow for publishing Docker images to GitHub Container Registry

* feat: Reintroduce Dockerfile and nginx configuration for application deployment

* fix: update Node.js version to 22.20.0 in configuration files

* fix: update ambient type references and improve code formatting in index.ts

* fix: add missing ambient type declarations in changeset

* chore: Remove obsolete CI workflows and restructure pull request workflow (#144)

* fix: Simplify CI lint command by removing unnecessary options

* fix: Update baseBranch to include origin in config.json

* fix: Add constructor to custom elements to satisfy linting requirements

---------

Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>
Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Co-authored-by: John Memmott <122105474+RATIU5@users.noreply.github.com>
Co-authored-by: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: StudioCMS <no-reply@studiocms.dev>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
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.

2 participants