Skip to content
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.

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

fix(select): ensure select-list has correct box-shadow when placement is top #7138

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

nuria1110
Copy link
Contributor

fix #7125

Proposed behaviour

Select-list has correct box-shadow when placement is "top".

image

Current behaviour

Select-list does not have correct box-shadow when placement is "top".

image

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

See "List Placement" story.

… is top

Adds correct box-shadow style to select-list when placement is "top".

fix #7125
box-shadow: var(--boxShadow100);
box-shadow: ${({ placement }) =>
placement === "top"
? "0 -5px 5px 0 #00141e33, 0 -10px 10px 0 #00141e1a"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no design token for this so I just negated the y-offset of the original token value.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are there any design tokens that could be used instead of those hex colours?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

Box shadow on Select not applied when listPlacement is top
2 participants