feat(slider): add border shadow for active and hover states #98
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This to make the hover and active states to work for now. Currently the same colors for all themes
BalbinaK
reviewed
May 10, 2023
src/_rules/slider.js
Outdated
Comment on lines
1
to
15
| // Hardcoded styling for slider border shadow, will be modified and handled with correct color variables at a later stage | ||
| const defaultColor = 'rgba(0, 0, 0, .08)'; | ||
| const sliderStates = { | ||
| active: '0 0 0 8px', | ||
| hover: '0 0 0 6px', | ||
| }; | ||
|
|
||
| export const sliderHandleShadow = [ | ||
| [ | ||
| /^slider-handle-shadow-(active|hover)$/, | ||
| ([, state]) => ({ | ||
| 'box-shadow': `${sliderStates[state]} ${defaultColor})`, | ||
| }), | ||
| ], | ||
| ]; |
There was a problem hiding this comment.
Is this something we would like to make available to anyone or is it component specific that fits more to what we have in internals.js? There's also a shadow file in https://github.com/warp-ds/drive/blob/alpha/src/_rules/shadow.js that maybe would be a good place for this rule?
I'm wondering if this box-shadow value can change for different brands, because then we might need to add it to shadow token definitions in @warp-ds/tokens and apply the generated css variable in drive in a similar manner as other shadows.
There was a problem hiding this comment.
yeah I was thinking about those things too but I went with this solution even though. My thoughts:
I would say this is styling specifically for the slider. Maybe there will be use cases we don't know of in the future but I would say we can change that later in that case. Also, this solution is hard coded at the moment to make the slider work, so we need to look at this in a later stage (using variables for rgba colors) and maybe we'll move it then if we have another solution.
And even though it's box-shadow, I don't think we should put it with the shadows as it's more of a border with a workaround using box-shadow.
what do you think?
There was a problem hiding this comment.
I see. Then maybe we could keep a pattern of adding Todo in the comments so it's easier to look them up when the time comes, just in case we miss this :)
BalbinaK
approved these changes
May 10, 2023
github-actions bot
pushed a commit
that referenced
this pull request
May 11, 2023
# [1.0.0-alpha.22](v1.0.0-alpha.21...v1.0.0-alpha.22) (2023-05-11) ### Features * **slider:** add border shadow for active and hover states ([#98](#98)) ([0b36581](0b36581))
github-actions bot
pushed a commit
that referenced
this pull request
Aug 22, 2023
# 1.0.0 (2023-08-22) ### Bug Fixes * add 75% to the opacity values ([#86](#86)) ([fa52e6e](fa52e6e)) * add arbitrary width support for border ([#88](#88)) ([2eb8d87](2eb8d87)) * add base styles to preflight ([#101](#101)) ([19ec46b](19ec46b)) * add bg color options ([#76](#76)) ([980c532](980c532)) * add correct token for the focus ring ([#87](#87)) ([9191bca](9191bca)) * add development flag back and externalize our published component classes ([#129](#129)) ([4470892](4470892)) * add font-bold to t1-t6 and use those classes to ref h1-h5 ([#146](#146)) ([1c6a81d](1c6a81d)) * add missing apostrofs ([#91](#91)) ([a28756e](a28756e)) * add missing classes Fabric supported ([#135](#135)) ([4ce6033](4ce6033)) * add px to the arbitrary border width ([#93](#93)) ([c4d17ae](c4d17ae)) * add rules and tests for caret ([#84](#84)) ([fac54a1](fac54a1)) * add skipResets flag ([#142](#142)) ([a13cbcd](a13cbcd)) * add styling for loading ([#77](#77)) ([87e0e50](87e0e50)) * Added missing rules for static border colors ([#123](#123)) ([6644a66](6644a66)) * **aspect-ratio:** add rules for aspect-ratio, -video and -square ([#150](#150)) ([f5d1c79](f5d1c79)) * avoid null issue and use empty array instead ([#144](#144)) ([6d56dcd](6d56dcd)) * avoid top-level await in reset ([#137](#137)) ([b35c803](b35c803)) * background arbitrary url rule change ([#95](#95)) ([ae70e51](ae70e51)) * bad comment syntax in preflight ([#73](#73)) ([ae37e8e](ae37e8e)) * be able to use a one-off background image ([#89](#89)) ([12df5a9](12df5a9)) * border-x|y fix and slider obsolete snapshot fix ([#120](#120)) ([85dfaec](85dfaec)) * cache the preflight instead of requesting every rebuild ([83537ca](83537ca)) * Cleanup color classes for text and background color ([#127](#127)) ([1b3d13e](1b3d13e)) * **display.js:** align order of css for display classes with fabric.css ([#147](#147)) ([aa00cfc](aa00cfc)) * escape current selector for focusable ([#122](#122)) ([00b789b](00b789b)) * extend regex for the background arbitrary values ([#92](#92)) ([d908e24](d908e24)) * focusable classes ([#109](#109)) ([8e3ca96](8e3ca96)) * focusable, last-child, spinner rules ([#110](#110)) ([40e75cf](40e75cf)) * height and width shouldn't match without a dash ([#83](#83)) ([3580750](3580750)) * improve arbitrary bg rule ([#111](#111)) ([ea43100](ea43100)) * improve syntax to clear the float for the elements after legend ([#108](#108)) ([75f4cac](75f4cac)) * only support gap from theme ([#31](#31)) ([4d49678](4d49678)) * proper handle bg arbitrary url as var ([#126](#126)) ([0ddd0e9](0ddd0e9)) * remove @warp-ds/css dep to fix circular dependency ([#149](#149)) ([e351c76](e351c76)) * remove a shortcut for the outline-none ([#128](#128)) ([ced819c](ced819c)) * remove caret class, will use current ([#85](#85)) ([f87db11](f87db11)) * remove input related stuff from preflight ([#81](#81)) ([a5dcb42](a5dcb42)) * Remove old fallback values from box shadows ([#140](#140)) ([da00995](da00995)) * remove resets from preflight and refactor ([#106](#106)) ([3591a3b](3591a3b)) * Replace arbitrary background class with semantic class for page-container ([#138](#138)) ([ee9c296](ee9c296)) * restructure html and body styling to make shadow dom styling work ([#107](#107)) ([7eb3e94](7eb3e94)) * **shadows:** add default box-shadow values to generic shadow classes ([#96](#96)) ([4adb2d6](4adb2d6)) * **shadow:** update naming of box-shadows ([#112](#112)) ([4405ae5](4405ae5)) * **slider:** fix slider bug ([#100](#100)) ([31b9b0c](31b9b0c)) * theme now exports useTheme ([#82](#82)) ([88476fd](88476fd)) * throw better errors for users who are missing 'fetch' ([#132](#132)) ([77ba1e2](77ba1e2)) * trigger a new release of alpha.59 ([#145](#145)) ([1ad8465](1ad8465)) * **typography.js:** add font-bold to .h1-5 shortcuts ([#121](#121)) ([b84a631](b84a631)) * update & align unocss dependencies ([#148](#148)) ([e540d19](e540d19)) * Update focus outline to use new semantic color token ([#139](#139)) ([673627d](673627d)) * update vite to 4.2.3 to fix a vulnerability ([#152](#152)) ([929c9af](929c9af)) * Updated rules for semantic colors to handle base level token names without ending "default" suffix ([#133](#133)) ([805526d](805526d)) * use #plugin alias in import in checkFabricClasses ([6022115](6022115)) * use new css repo for component classes ([#143](#143)) ([b2816b6](b2816b6)) * **workflows:** set node v to lts/* and pnpm to 8 ([#118](#118)) ([413058d](413058d)) * Wrong syntax ([#69](#69)) ([b938d3a](b938d3a)) ### Features * Add background, text and border classes for semantic color tokens ([#119](#119)) ([19b5ee9](19b5ee9)) * add css variables as arbitrary values for w and h ([#104](#104)) ([455c4cb](455c4cb)) * add layout rules and tests for rules ([d47d412](d47d412)) * add new shortcut for page-container ([#114](#114)) ([8ae08b3](8ae08b3)) * add rules for border and rounded ([#19](#19)) ([48ec500](48ec500)) * add rules for focusable classes ([#27](#27)) ([e9f7e08](e9f7e08)) * add rules for outline ([#125](#125)) ([3834087](3834087)) * add rules for shadows ([#90](#90)) ([a0dfbc5](a0dfbc5)) * add rules for table ([#33](#33)) ([d1ea3fb](d1ea3fb)) * add rules for text decoration ([#29](#29)) ([9797311](9797311)) * add tests for align rules ([64d2815](64d2815)) * arbitrary values accepted for leading ([#130](#130)) ([39919f4](39919f4)) * automate package publishing using semantic-release ([#68](#68)) ([9273e19](9273e19)) * **dropshadow:** add drop shadow ([#105](#105)) ([9b68cbe](9b68cbe)) * **internals:** add rules for border-top/right/bottom/left-color classes ([#78](#78)) ([83eb2f5](83eb2f5)) * **internals:** add rules for shadow component classes ([#94](#94)) ([e7e65d1](e7e65d1)) * rule for adding safe area inset from the bottom edge of the viewport ([#103](#103)) ([88186f6](88186f6)) * **rules:** add typography rules ([#99](#99)) ([6e1c363](6e1c363)) * **semantic.js:** add rules for semantic icon colors ([#124](#124)) ([afc0354](afc0354)) * **slider:** add border shadow for active and hover states ([#98](#98)) ([0b36581](0b36581)) * **slider:** add outline-none styling for slider ([#102](#102)) ([48fdd8a](48fdd8a)) * **touch-actions:** add support for touch actions ([#97](#97)) ([54a3002](54a3002))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR includes hard coded classnames for the slide thumb.
The current solution is not supported by theming, and has the same color for all themes.
The difference from fabric is that the shadow is gray instead of blue.