feat(Radio): Sbanken styling #2888
Merged
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 6c86d75:
|
tujoworker
approved these changes
Nov 14, 2023
| @@ -4,6 +4,7 @@ | |||
| */ | |||
|
|
|||
| @import '../../../style/core/utilities.scss'; | |||
| @import './themes/radio-color-scheme-mixin.scss'; | |||
There was a problem hiding this comment.
Here I suggest we take in use @use, just because at some point we need to switch over everything to @use – and here it will work just fine. Take a look who use is used other places.
| @@ -0,0 +1,63 @@ | |||
| @mixin radioColorScheme($theme: 'ui') { | |||
| @if $theme == 'ui' { | |||
There was a problem hiding this comment.
We did not touch this kind of solution in today's meeting. But I would much prefer to have these vars in the theme files, instead of this logic.
Because its a step further away from where you think it should live. And with that we gain an imperative way of distribute/handle code.
There was a problem hiding this comment.
I whole-heartedly agree with the argument of the logical placement of the variables. The primary reason for dumping them in a mixin was to avoid the very color-specific clutter the variables create in the main style file, but I'm happy to change it if you don't think this is a problem.
There was a problem hiding this comment.
I'm fine to keep @include radioColorScheme(); as is, but move the vars into the theme files.
Sundfjord
force-pushed
the
feat/radio-checkbox-sbanken-styling
branch
from
c2e3290 to
124ce05
Compare
Sundfjord
force-pushed
the
feat/radio-checkbox-sbanken-styling
branch
from
71aa11f to
6c86d75
Compare
tujoworker
pushed a commit
that referenced
this pull request
Nov 16, 2023
## [10.14.0](v10.13.0...v10.14.0) (2023-11-16) ### 📝 Documentation * **Forms:** lists component specific props 1st ([#2892](#2892)) ([c05740c](c05740c)) * **PhoneNumber:** remove unsupported props ([#2894](#2894)) ([4800a8e](4800a8e)) * **PostalCodeAndCity:** remove unsupported props ([#2890](#2890)) ([fe1ee9e](fe1ee9e)) ### ✨ Features * **Forms:** expiry field ([#2660](#2660)) ([af5aa61](af5aa61)) * **forms:** improved state management and reacting to more changed props ([#2882](#2882)) ([0ca9533](0ca9533)) * **Input:** add clear button event "on_clear" ([#2898](#2898)) ([eb6b722](eb6b722)) * **Radio:** Sbanken styling ([#2888](#2888)) ([d7ffcf8](d7ffcf8)) ### 🐛 Bug Fixes * add "use client" to non hook components like the Button ([#2895](#2895)) ([2d54a13](2d54a13)) * **Autocomplete:** enhance logic for when to blur ([#2886](#2886)) ([ce5c3fa](ce5c3fa)) * **Autocomplete:** make clear button work with enter key ([#2901](#2901)) ([30007c4](30007c4)), closes [#2185](#2185) * **FieldBlock:** enhance fieldset/legend detection ([#2902](#2902)) ([4c62052](4c62052)), closes [#2893](#2893) * fix Flex and Grid export to work with Vite.js ([#2905](#2905)) ([ef83713](ef83713)) * fix vertical label_direction support for Radio group and ToggleButton group ([#2899](#2899)) ([d650c66](d650c66)) * **forms:** Field block error handling ([#2900](#2900)) ([9582c64](9582c64)) * **forms:** Improved message value replacements ([#2903](#2903)) ([a61140b](a61140b)) * **PhoneNumber:** keep selected countryCode value on blur ([#2869](#2869)) ([7e0f9c5](7e0f9c5))
|
🎉 This PR is included in version 10.14.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sundfjord
added a commit
that referenced
this pull request
Nov 20, 2023
Added Sbanken theming and introduced some CSS variables that controls the color scheme of the Checkbox component, similar to how it was done in #2888 .
Sundfjord
added a commit
that referenced
this pull request
Nov 29, 2023
tujoworker
pushed a commit
that referenced
this pull request
Dec 12, 2023
## [10.15.0](v10.14.0...v10.15.0) (2023-12-12) ### 📝 Documentation * **Card:** adds horizontal fields example ([#2907](#2907)) ([661db7a](661db7a)) * **FAQ:** change version of yarn to v4 ([#2944](#2944)) ([5151fd9](5151fd9)) * **FAQ:** removes stylelint as dependency issue ([#2943](#2943)) ([64ffd13](64ffd13)) * **Field.SelectCountry:** select component -> selection component ([#3003](#3003)) ([b098c6b](b098c6b)) * **FormLabel:** document disabled property ([#3004](#3004)) ([d276bf6](d276bf6)) * **Layout:** fix import of ux-layout-spacing.png ([#2921](#2921)) ([910bcb4](910bcb4)) * **Number:** add info about when to use and not to use ([#2955](#2955)) ([55b3447](55b3447)) * **SelectCountry:** replace bar as value in examples ([#2990](#2990)) ([8fd9f0e](8fd9f0e)) ### 🐛 Bug Fixes * **Autocomplete:** enhance reactivity by value change from outside ([#2922](#2922)) ([e4fd9f9](e4fd9f9)) * **Card:** add support for small screen sizes ([#3051](#3051)) ([62daa1a](62daa1a)) * **DatePicker:** renders mask_placeholder from locale w/o provider ([#2947](#2947)) ([b522bd7](b522bd7)) * **Dropdown:** error message when passing a function to innerRef ([#2932](#2932)) ([c362a4a](c362a4a)) * **Expiry:** correct class placement and CSS specificity issue ([#2915](#2915)) ([ae1154d](ae1154d)), closes [#2914](#2914) * **FieldBlock:** fix support for stretch alignment ([#2913](#2913)) ([2fdbd4b](2fdbd4b)), closes [#2907](#2907) * **FormLabel:** don't apply margin-right when no content was given ([#2927](#2927)) ([057f957](057f957)) * **forms:** Fix bug on replacing error message values ([#2971](#2971)) ([b24ddb5](b24ddb5)) * **forms:** Fix data context provider path and error state handling ([#2926](#2926)) ([01a01f4](01a01f4)) * **GlobalStatus:** remove z-index to enhance flexibility ([#2952](#2952)) ([13a9d6e](13a9d6e)), closes [/github.com/dnbexperience/eufemia/commit/1fb638b12df290533e6a89e7f8135a7e23c0797e#diff-4d582f82c1661d8de20042e6e65250a4d2710c2b31f8955fcd6eda14097a0b4](https://github.com/dnbexperience//github.com/dnbexperience/eufemia/commit/1fb638b12df290533e6a89e7f8135a7e23c0797e/issues/diff-4d582f82c1661d8de20042e6e65250a4d2710c2b31f8955fcd6eda14097a0b4) * **Hr:** remove overflow causing a scrollbar ([#2945](#2945)) ([dc989ff](dc989ff)) * **PhoneNumber:** ensure correct alignment on smaller screens ([#2957](#2957)) ([ae9913b](ae9913b)) * **PhoneNumber:** return country code only when a number is given ([#2920](#2920)) ([5b1a9b0](5b1a9b0)), closes [#2922](#2922) [#2923](#2923) * **RadioGroup:** omit rendering label when not given ([#2928](#2928)) ([693f9d4](693f9d4)) * **Selection:** correctly link id with label ([#2911](#2911)) ([71ad30d](71ad30d)), closes [#2842](#2842) * **ToggleButtonGroup:** omit rendering label when not given ([#2929](#2929)) ([26f683e](26f683e)) ### ✨ Features * **Accordion:** new filled variant + style refactoring ([#2896](#2896)) ([a4c1fb0](a4c1fb0)) * add support for functional refs to various form components ([#2946](#2946)) ([cecad75](cecad75)) * **Breadcrumb:** correct gap between items and fix overlapping focus ring ([#2917](#2917)) ([6252458](6252458)) * **Button, Anchor:** fix launch icon for _blank button links ([#2930](#2930)) ([37a65dc](37a65dc)) * **Checkbox:** Sbanken styling ([#2904](#2904)) ([b2dbd44](b2dbd44)), closes [#2888](#2888) * **Currency:** add automatic locale and alignment support ([#2956](#2956)) ([3c64d4d](3c64d4d)) * **forms:** include styles by default ([#2918](#2918)) ([e2f4c1e](e2f4c1e)) * **MultiInputMask:** Add stretch property ([#2914](#2914)) ([706beb3](706beb3)) * **PaymentCard:** adds card_status unknown ([#2934](#2934)) ([a36ffa7](a36ffa7)) * **PhoneNumber:** add `pattern` property ([#2962](#2962)) ([86cb6e0](86cb6e0)) * **PhoneNumber:** add filter for showing e.g. only Scandinavia countries ([#2959](#2959)) ([995c43d](995c43d)) * **PhoneNumber:** add prioritized sort option ([#3034](#3034)) ([5fe0e41](5fe0e41)), closes [#3023](#3023) * **PhoneNumber:** add property `omitCountryCodeField` ([#2961](#2961)) ([4a3c7e2](4a3c7e2)) * **PhoneNumber:** remove structure and format when number is not +47 ([#2958](#2958)) ([56e2f08](56e2f08)) * **Section:** add dropShadow support ([#3053](#3053)) ([040a92b](040a92b)) * **SelectCountry:** use autocomplete instead of dropdown ([#3023](#3023)) ([0f2990c](0f2990c)), closes [#2993](#2993) * **Switch:** Sbanken styling ([#2939](#2939)) ([46c5506](46c5506)) * **ToggleButton:** Sbanken styling ([#2936](#2936)) ([5370376](5370376)), closes [#2931](#2931) [#2904](#2904) [#2888](#2888) * Updated Sbanken theming + improved screenshot test coverage for Radio+Checkbox ([#2931](#2931)) ([e42c81e](e42c81e))
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.
Sbanken theming of the Radio component.
A fairly significant number of CSS variables has been introduced here. I've put them in a mixin in order to avoid listing all these variables in three different sass files (default, ui and sbanken theme files), but I am far from sure this is the best way to approach this, so please share your thoughts on this upon review.