[Darkside] Quality assurance P1 #3510
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
|
KenAJoh
commented
Jan 21, 2025
Comment on lines
-20
to
-21
| outline: 2px solid var(--ax-border-focus); | ||
| outline-offset: 2px; |
There was a problem hiding this comment.
This is part of a new test for focus-markings. I will create a separate PR for all the other components updating this.
| @@ -230,7 +238,7 @@ | |||
| /* dropdown & non selectable dropdown items */ | |||
|
|
|||
| .navds-combobox__list { | |||
| max-height: 290px; | |||
There was a problem hiding this comment.
This size is a little arbitrary, but helps a little with this issue: #3498. By adjusting the height, you will by default see part of the last item before scrolling.
There was a problem hiding this comment.
We are testing using a little darker "default"-scale for strong. This makes primary-neutral buttons, ToggleGroup, Tag etc more defined and visually equal to the counterparts with "role"
Storybook demo / Chromatic📝 Changes to review: 23b1b835ab | 91 components | 135 stories |
KenAJoh
commented
Jan 22, 2025
it-vegard
previously approved these changes
Jan 22, 2025
it-vegard
pushed a commit
that referenced
this pull request
Jan 31, 2025
* 💄 Adjustments 1 * 💄 Bumped default strong scale * 💄 Bumped secondary neutral border * 💄 Reduced text-color change on hover * 🐛 Resolved border and focus logic for combobox * 🐛 Fix icon sizing for buttons * 💄 Use tertiary-buttons for datepicker caption * Update @navikt/core/react/src/chips/Toggle.tsx * 💄 QA updates combobox darkside (#3511)
JulianNymark
added a commit
that referenced
this pull request
Feb 4, 2025
* Getting started converting ActivityPlan to Aksel components * Refactor ActivityColumn * attempt to add Theme (from local path) * 🚧 * 🐛 minify strips navds-r-p? * use correct react package (local) and use padding prop * correctly use the Theme wrapper in ThemeProvider * Refactored MainCard * Make ActivityCard more similar to "the real deal". * Reduce column padding * use Link component * add missing href to links in sykepenger * remove generic seletors on root * dark mode for sykepengericon (also use tokens) * Fixes console warnings * Added activity view for activity plan reference page * Design review changes * Add HelpText to columns * Add focus indicator for activity cards * Minor css tuning * 🐛 Blogg did not sort latest articles by publishDate * [Actions] ⚡ Optimize workflows (#3480) * 🚚 Moved auth-token, fetch less history * ♻️ Use composite actions for workflow * 🐛 Checkout before running composite workflow * 🚚 Move composite actions to separate dir * ♻️ Pass token to composite action * 📝 Better test names * ⚡ Optimize chromatic workflow * ⚰️ Removed old and broken redeploy action * ⚡ Optimized website-build * ♻️ Use composite actions for prod and dev build * ⚡ Reduced e2e tests by 40% * ⚡ Improved sandbox testing * ⚡ Update search-tests * 🐛 Disable invalid example-demos * 🐛 Wait for search completion * 📝 removed old env input * 🐛 Moved vars out to input * 🐛 Don't ignore inputs for if-tests * 🐛 Check input for truuthynes * test: Run sharded playwright * 🐛 Removed sharded workflow * ⚡ Update re-use of actions * 🐛 Keep full git-history for chroamtic * Update .github/workflows/chromatic.yml Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> * Update .github/workflows/referansesider-spa-deploy.yml Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> * Update .github/workflows/ci.yml Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> * Update .github/workflows/ci.yml Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> * Update .github/workflows/ci.yml Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> * Update .github/workflows/ci.yml Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> * Update .github/workflows/ci.yml Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> * Update .github/workflows/ci.yml Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> * 📝 Typo * 📝 Typoo * ⚡ Use built-in report for playwright * 🐛 Use html-reporter, not list --------- Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> * [Darkside] P 1/3 ♻️ Updated `default` scale to replace `neutral`-scale (#3487) * ✨ Added new space tokens * 🚚 Updated spacing-definitions * ✨ Added new space-tokens to old system * ✨ Added support for new space tokens i primitives * 🔥 Removed space-tokens from tailwindcss * 📝 Removed old comments * [Darkside] Spacing -> Space update for CSS (#3478) * 🚚 Migrated to new space-token * 📝 Add docs for temp spacing * 🐛 Add missing token-prefix to docs * 🐛 Remove old tests * 🐛 Added legacy-spacing support for primitives when using new theme-stystem * ♻️ Move neutral-scale -> default scale * ♻️ New box now supports updated default tokens * ♻️ Default -> Soft token * 📝 Update js-doc * [Darkside] P 2/3 ♻️ Global/Meta-token naming, bumped role-scale (#3499) * 💄 Text and border-tokens for roles bumped up * 📝 Update global and meta-colors to numbers, removed hover color on accordion/button * [Darkside] P 3/3 ♻️ Old neutral-scale now uses default-scale (#3488) * ♻️ Use default-tokens for old neutral-scale * 🐛 Fixed missing token migrations * ♻️ role default -> role-soft * ♻️ Re-structure order and texts for GP section (#3492) * ♻️ Re-structure order and texts for GP section * 📝 Avoids extra capitalization for names * Added script to check version-sync between workspace (#3486) * ✨ Added script for verifying dep-versions across workspace * ✨ Added script for verifying dep-versions across workspace * ✨ Added script for verifying dep-versions across workspace * ✨ Added script for verifying dep-versions across workspace * ✨ Added script for verifying dep-versions across workspace * 📝 Better texts * 📝 Better texts * 📝 Added comments * 📝 Updated minoer package-differences * 📝 Upgraded stylelint * 📝 Upgraded babel-loader * 📝 Add ^ to ds-css versionsing across repo * ♻️ Small refactor to reduce use of forEach * Table: Removed border-bottom for HeaderCell used in ExpandableRow (#3503) * Use HeaderCell for name in expandable table example * 🐛 Removed border-bottom for HeaderCell used inside ExpandableRow --------- Co-authored-by: Ken <ken.aleksander@gmail.com> * Version Packages (#3505) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * ♻️ Removed raised-tokens from darkside roles * 💄 Incremental layout and list-view update on Produktbloggen * 🐛 Added missing 'li'-tag for list-item in blogglist * [Table] ExpandableRow `contentGutter`-prop (#3507) * ✨ New prop contentGutter for ExpandableRow component * ✨ Added new prop-support in darkside CSS * 📝 changeset * Update @navikt/core/react/src/table/ExpandableRow.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🐛 Third bloggpost was sliced from view on frontpage * ⬆️ Bump vite from 5.4.8 to 5.4.12 in /examples/referansesider (#3516) * ⬆️ Bump vite from 5.4.8 to 5.4.12 in /examples/referansesider Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.4.8 to 5.4.12. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v5.4.12/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v5.4.12/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> * Repo-bump vite * 🔀 Yarn lock --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com> * 📝 Added new sidebar category for /komponenter * always render the maxSelected message when isMultiSelect (#3506) * always render the maxSelected message when isMultiSelect * also check if maxSelected is set * Changeset * Update .changeset/swift-readers-check.md --------- Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * 💄 Error borders uses danger-strong consistently (#3512) * ♻️ Fix #3451 scaling for 400% zoom (#3514) * 🐛 Using 'loader' inside 'icon'-prop broke layout caused by position absolute (#3515) * [Darkside] Quality assurance P1 (#3510) * 💄 Adjustments 1 * 💄 Bumped default strong scale * 💄 Bumped secondary neutral border * 💄 Reduced text-color change on hover * 🐛 Resolved border and focus logic for combobox * 🐛 Fix icon sizing for buttons * 💄 Use tertiary-buttons for datepicker caption * Update @navikt/core/react/src/chips/Toggle.tsx * 💄 QA updates combobox darkside (#3511) * Update swift-readers-check.md * Version Packages (#3509) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Update LICENSE * [Darkside] Updated Focus design for Checkbox, Radio and Switch (#3513) * 💄 Focus-outline now around item checkbox,radio * 🐛 Resolved small and indeterminate-state * 💄 updated focus-markings for switch * Update @navikt/core/css/darkside/form/radio-checkbox.darkside.css * 🐛 Hide new indeterminate node from old checkbox * [Darkside] Quality assurance P4 (#3518) * 💄 Adjust bg transparency * 💄 Default border now same scale as roles * [Darkside] Quality assurance P5 (border-radius and font-weight) (#3519) * 💄 Update border-radius based on Figma * 💄 More border-radius adjustments * 💄 Bolder medium+ headings * [Darkside] Updated focus-outline (#3520) * 💄 Updated focus-outline * 🧪 Added legacy-support for deprecated files * 🐛 Account for legacy files in count * [Darkside] Quality assurance P6 (Fileupload) (#3524) * 📝 Update FileUpload CSS-artifacts * 🐛 Synced release-text with updated role-colors * ✨ New icons for sorting (#3528) * Theming for sykepenge icon * 🐛 Use correct global token for darkside JS * Updated SykepengerIcon to be one shape * Changed text color to subtle * Layout fixes * Refactor activity modal and improve rendering of activity details * Remove the decorator from the activity plan reference page to reduce complexity It is not necessary to show off dark mode, and it introduces some problems we need to solve. Will keep the code, so we can re-introduce it later if we want. * remove route listing, redirect index.tsx to aktivitetsplan * re-add the switcher * resulotions for ds-react, and tweak spacing for header * Fill out more activity details * remove unused files + fix up some old tokens * Darker modal backdrop * Make JobInterestBox stand out more in dark mode * Adjust heading size to better preserve hierarchy, although the modal header should have been larger instead (not supported) * Add gap for better responsiveness on mobile * Revert to secondary button to not conflict with other primaries. May revisit this later * Increased Page.Block gutter tokens * Background softA is now working, so we don't need to check for which is the active theme * Better responsiveness * Add "Add new activity" modal * Reduce texts for responsiveness * Make "save" button narrower * 🚧 test deploy cache-invalidation * 👷 test again * 💄 remove border under ThemeSwitch * Delete .changeset/late-hotels-try.md * Delete @navikt/core/css/darkside/primitives/page.darkside.css * Revert "Delete @navikt/core/css/darkside/primitives/page.darkside.css" This reverts commit e1d6838. * undo the change that will be done on main --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Vegard Haugstvedt <it.vegard@gmail.com> Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
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.
Description
We are now in the process of testing each component and verifying the sync between Figma and code
This PR is one of many to more with small adjustments and fixes made to the darkside system. The changes made here was from reviewing Accordion -> ErrorSummary. There are some changes not included here that was found, but will create separate PRs for those because of the scale. So this PR can be merged as is.
Component Checklist 📝
@navikt/core/css/config/_mappings.js)@navikt/core/css/tokens.json)@navikt/aksel-stylelint/src/deprecations.ts)@navikt/core/react/src/index.tsand@navikt/core/react/package.json)@navikt/core/css/index.css)<Component>: <gitmoji?> <Text>.E.g. "Button: ✨ Add feature xyz.")