Skip to content

feat: added native select styling #4624

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
mfranzke wants to merge 20 commits into
base: main
Choose a base branch
from
Draft

feat: added native select styling #4624

mfranzke wants to merge 20 commits into from
+86 −2

Conversation

@mfranzke
Copy link
Collaborator

@mfranzke mfranzke commented Jul 27, 2025 •
edited by github-actions bot
Loading

Proposed changes

Resolves #3654

Types of changes

  • Bugfix (non-breaking change that fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (improvements to existing components or architectural decisions)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation Update (if none of the other choices apply)

Further comments

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/feat-multi-select-native-select-styling-new

@mfranzke mfranzke self-assigned this Jul 27, 2025
@mfranzke mfranzke added 🐛bug Something isn't working 🍄🆙improvement New feature or request labels Jul 27, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Jul 27, 2025 •
edited by mfranzke
Loading

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/feat-multi-select-native-select-styling-new

@github-actions
auto update snapshots (#4625)
4a05549 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
mfranzke
mfranzke commented Jul 27, 2025
View reviewed changes
mfranzke
mfranzke commented Jul 27, 2025
View reviewed changes
mfranzke and others added 2 commits July 27, 2025 16:26
@mfranzke
Apply suggestions from code review
470cd00
@github-actions
auto update snapshots (#4626)
bfc69f3 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@mfranzke mfranzke closed this Jul 27, 2025
@mfranzke mfranzke reopened this Jul 27, 2025
@mfranzke mfranzke closed this Jul 28, 2025
@mfranzke mfranzke reopened this Aug 3, 2025
@mfranzke mfranzke moved this from ✅ Done to 🏗 In development in UX Engineering Team Backlog Aug 3, 2025
@mfranzke mfranzke marked this pull request as ready for review August 3, 2025 10:11
@mfranzke mfranzke requested a review from nmerget as a code owner August 3, 2025 10:11
@mfranzke mfranzke enabled auto-merge (squash) August 5, 2025 05:56
@mfranzke mfranzke disabled auto-merge August 7, 2025 16:55
@mfranzke mfranzke marked this pull request as draft August 14, 2025 09:13
@mfranzke mfranzke added the 🪩🔥🕺review some relevant topics, that we even also need to report in different rounds / to stakeholders label Aug 26, 2025
@mfranzke mfranzke closed this Oct 15, 2025
@github-project-automation github-project-automation bot moved this from 🏗 In progress to ✅ Done in UX Engineering Team Backlog Oct 15, 2025
@mfranzke mfranzke reopened this Nov 23, 2025
@changeset-bot
Copy link

changeset-bot bot commented Nov 23, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: e8a3cf5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@mfranzke mfranzke removed the request for review from nmerget November 23, 2025 10:31
@mfranzke mfranzke moved this from ✅ Done to 🏗 In progress in UX Engineering Team Backlog Nov 23, 2025
@mfranzke
Change flexbox direction for option elements
8a86cdf 
Rearrange the order of text and icon in option flexbox.
@github-actions github-actions bot mentioned this pull request Nov 24, 2025
Merged
github-actions bot and others added 2 commits November 24, 2025 06:23
@github-actions
auto update snapshots (#5509)
119e374 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@mfranzke
Merge branch 'main' into feat-multi-select-native-select-styling-new
f84141e
@mfranzke
Copy link
Collaborator Author

mfranzke commented Dec 5, 2025

@copilot please adapt the existing styling out of the CustomSelect component, meaning .db-custom-select-dropdown, .db-card, .db-custom-select-list and .db-custom-select-list>ul for the :is(::picker(select)) selector within the file packages/components/src/components/select/select.scss of this Pull Request, and .db-custom-select-list-item for the included option HTML elements.

Copilot AI mentioned this pull request Dec 5, 2025
Merged
5 tasks
Copy link
Contributor

Copilot AI commented Dec 5, 2025

@mfranzke I've opened a new pull request, #5585, to work on those changes. Once the pull request is ready, I'll request review from you.

@mfranzke
feat: adapt CustomSelect styles to native select ::picker pseudo-elem…
0b9982f 
…ent (#5585)

* Initial plan

* feat: adapt CustomSelect styles to native select picker

Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

* refactor: remove redundant overflow-y property

Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

* docs: improve comments for option height calculation

Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: GitHub Copilot <copilot@github.com>
Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>
@mfranzke
Copy link
Collaborator Author

mfranzke commented Dec 5, 2025

@copilot please summarize and abstract existing styling out of the CustomSelect and new select component, meaning .db-custom-select-dropdown, .db-card, .db-custom-select-list and .db-custom-select-list>ul for the :is(::picker(select)) selector within the file packages/components/src/components/select/select.scss of this Pull Request, and .db-custom-select-list-item for the included option HTML elements, so that both are referenced from one central scss placeholder.

Copilot AI mentioned this pull request Dec 5, 2025
Draft
5 tasks
Copy link
Contributor

Copilot AI commented Dec 5, 2025

@mfranzke I've opened a new pull request, #5586, to work on those changes. Once the pull request is ready, I'll request review from you.

@github-actions github-actions bot added the 📺showcases Changes to 1-n showcases label Dec 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@mfranzke mfranzke

Labels

🐛bug Something isn't working 🏘components 🍄🆙improvement New feature or request 🪩🔥🕺review some relevant topics, that we even also need to report in different rounds / to stakeholders 📺showcases Changes to 1-n showcases

Projects

UX Engineering Team Backlog
Status: 🏗 In progress

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

The position of the options box in the select element looks misaligned

2 participants

@mfranzke