* Accordion: change: do animation similar to ExpansionCard
* changeset
* change: comment expansioncard -> accordion
* don't need changeset for unreleased code
* 🚧 attempt to smooth out expansion of accordion
* working animation
* Update @navikt/core/css/darkside/accordion.darkside.css
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* accordion: remove border-bottom on content, add on item
* Update @navikt/core/css/darkside/accordion.darkside.css
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* Accordion: only set box-shadow line for indented items
---------
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* 💄 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
* Use HeaderCell for name in expandable table example
* 🐛 Removed border-bottom for HeaderCell used inside ExpandableRow
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
* ✨ 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
* 📝 Better naming for heading in richtext editor
* ♻️ Better syntax for publish-action
* ♻️ Refactored publication-flow plugin
* 🚚 Moved quality-assurance texts
* ♻️ Better handling of verification flow
* 🐛 Fixed verification without publish action
* 🐛 Check for permissions before assuming publish will work
* ✨ 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
* 📝 Updated JSDOC
* Automatically add JSDoc with default values to nb.ts
* Added jscodeshift to devDeps
* 🐛 Use same jscodeshift versions
* 🐛 Use same types for jscodeshift
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
* WIP
* WIP CompareImages
* ✨ Handle more keys
* ♻️ Re-use positioning code
* 💄 Adjust for width
* ✨ Added sanity schema
* 💄 Moved focus to box, allow handle to overflow leftside by 1 px
* ✨ Added bg and alt-text support
* 🐛 Change env back to production
* Check loading prop for showing spinner, not widthOverride.
Making this change because widthOverride sometimes gets set to 0 (should also be fixed), meaning this check fails as "falsy".
* Prevent setting width to 0 while showing spinner, to avoid issue in Modals
Checking that width is truthy (not zero) will avoid issue where widthOverride gets set to 0 because the button is not yet rendered.
* Add changeset
* Replace width calculation with just visually hiding label + icon and absolutely positioning the loading icon.
* Update @navikt/core/react/src/button/Button.tsx
* add story for bug case
* We no longer use buttonRef/mergedRef internally, so removed them and set ref directly
* Update @navikt/core/css/button.css
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* Hiding everything except loading spinner is more robust than hiding every specific item.
* In loading-state, the button icon will no longer be able to be the only child (hidden), because of the loader icon. Instead checks for no label.
Could consider :not(:has(:is(.navds-button__icon, .navds-loader))) as well, to be more robust, but it might be overkill.
* Much simpler/easier to read
* Don't need to destructure style, only to add it along with rest.
* Should destructure onKeyUp from props, instead of having it added through filteredProps and then overridden afterwards.
* Quick and easy conversion for darkside
* Unnecessary :is after refactoring
---------
Co-authored-by: Julian Nymark <julian.nymark@nav.no>
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* 💄 New ToggleGroup design
* 🐛 Removed hover-state from selected togglegroup in forced-colors mode
* 💄 Add px-gap to elements
* 🐛 Hide divider on both sides when selected
* change: add story to demonstrate buggy textarea behaviour inside modal
* use lodash debounce with our own default value for wait
* Revert "use lodash debounce with our own default value for wait"
This reverts commit 7638297765.
* change: add leading to debounce + use it in TextareaAutoSize
* changeset
* changeset + co-author
Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
---------
Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
* change: support icon in ErrorMessage + warning icon for textarea error
* change: ignore icon on old CSS + tweaks
* change: do not nest in old css
* wip commit (works nicely)
* clean up css for errormessage, remove it from form.css
* 🐛 tweaks + use icon in Search
* use icon for the rest of our form components
* backport new css to old form.css
* 🔥 remove unnecessary specification bump
* cleaner example story
* changeset
* ♻️ icon -> showIcon
* make flex & gap opt-in with 'icon'
* change: inline ErrorMessageIcon
* change: nest css more
* revert test changes (utility in multiple variants on one for DOM diffing, but probably no longer useful)
* debloat changeset
* mention form components in changeset
* change: typo in changeset
* change: typo in changeset
* ✨ Solves issue where programatic focus to fix error would show dropdown list and hide error
* 🚚 Moved onclick listener for open-state to input, not wrapper
* Update .changeset/forty-rules-ring.md
* change: timeline periods
* update stories for timeline
* change: Timeline pin update
* change: crude variable renaming (--a- -> --ax-)
also likely done with zoom buttons,
a bit of popover styling fix
* change: popover z-index bump
* change: remove unnecessary CSS state :active
* change: z-index fix, correct token usage
* change: remove @supports not selector(:focus-visible)
* change: use proper tokens
* change: can't get focus on popover
* change: remove arrow from popover consumers
* change: only render arrow div when !themeContext
* 💄 Use smaller offset without arrow, use subtleA border for popover
* 💄 Adjusted popover tokens for timeline
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
* ✨ Added darkmode-support to Tag
* 🐛 Update spacing-tokens to new format
* ✨ Added darkmode-support to Tag
* 💄 use canvas-color for text on filled forced color text
* ♻️ Use classNames for tag colors, not data-attrb
* 🐛 Old Tag-css supports new names
* V1 of CSS bundler
* V1 of CSS bundler
* ♻️ Added target checking for browser
* ♻️ Remove built in variables added by lightningcss
* Setup bundling of darkside
* 🐛 Fix path resolving in bundle script
* Setup bundling for index
* 🚚 Re-order layering
* ✨ Filter for only components in bundle
* 🚚 Moved token-definition
* 🔥 Removed index.css copy
* ✨ Global build
* ✨ form and primitives build
* ✨ Component build
* ✨ Build versions dir for new setup
* :test_tupe: Added tests for bundle
* 🚚 Move bundle file to config
* 📝 Comments
* ✨ Allow import of darkside directly under ds-css
* 🐛 Use relative import for CSS in storybook
* [Darkside] Updated input-bg in darkmode, added token for opacity (#3441)
* [Darkside]: Update bg-input to be darker in darkmode
* Added opacity-token
* Use token for disabled opacity
* Update @navikt/core/css/darkside/button.darkside.css
* ♻️ De-dupe reading of index.css
* ♻️ Use regex to remove - and space instead of lodash
* 🥅 Throw when bundler fails
* Update @navikt/core/css/config/bundle.darkside.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Update @navikt/core/css/config/bundle.darkside.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* 🏷️ Updated opacity-tokens types, resolved import conflict
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ✨ Updated exports to allow better darkside support
* ✨ Setup less and scss support for darkside
* ✨ Added static build for tokens
* ✨ Token-config exports
* 🐛 Resolved import conflicts between tailwind and css
* 🐛 Resolved import conflicts between tailwind and css
* ♻️ Refactor Token-setup for better typing
* ♻️ WIP resolve import conflicts2
* ♻️ Avoid importing JSON in react from tokens
* 🐛 Resolve updated imports in referansesider after refactor
* Update @navikt/core/tokens/.gitignore
* Update @navikt/core/tokens/types.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* 🐛 Removed prefix 'ax' when generating static tokens for js
* 🐛 Resolved export syntax to support less, scss and JS
* 📝 Updated JSDoc to link directly to types
* Update @navikt/core/tokens/darkside/figma/figma-config.types.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ♻️ Use colorRole-array as bases for Role array
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
- Merged LanguageProvider into Provider, while also changing the API a bit to make it easier to use (with the help of TS).
- Updated tests for `useI18n()` according to changes in API.
- Chips.Removable: Removed prop `removeLabel`.
- DatePicker/MonthPicker: Added new `translations` prop and deprecated `locale` prop.
- Search: Deprecated prop `clearButtonLabel`.
- Textarea: Deprecated prop `i18n`.
- Timeline: Deprecated prop `axisLabelTemplates`.
- nb/nn/en.ts:
- Arranged the top level keys alphabetically.
- Merged `close` in Modal and DatePicker and put it under the `global` key.
- Changed Search.clear from "Clear" to "Clear field" to make it more... clear 😅
- Removed Combobox.clear since the clear button has been removed.
- Made them importable from `@navikt/ds-react`
* GuidePanel initial CSS rewrite
* ✨ new illustration
* change: layout
* change: add speechbubble arrow
* change: dark mode raised for speechbubble arrow
* change: correct stroke path color (actually fill) of path in svg
* change: fine tuned SVG with padding and overlapping paths
* change: exception CSS for FF rendering of speech bubble tail
* change: hardcode calculation as whole pixel value remove FF custom CSS
* change: convert BEM modifiers to simpler CSS data-attributes
* change: display:none for speech bubble tail on old token system
* change: refactor old css to use the attribute selectors
* change: noSVG example (see default story for side-by-side)
* change: rewrite to using only SVG for speechbubble
* change: only looks good in lightmode, no token support / hardcoded
* :refactor: Updated Guidepanel CSS to use SVG
* 🔥 Remove old commented CSS
* 🐛 Fixed cases where mediaqueries would target nesten element instead of itself
* 🗑️ Cleanup of unused code
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
* ✨ Added darkmode support to table
* 📝 Added comments
* 📝 Added todo
* :refactor: Avoid use of custom animate height function
* :refactor: Use Alpha-token on hover-selected
* :refactor: Remove redundant token-use
* Update @navikt/core/css/table.css
* ♻️ Reverted to animate-component for table animation
* 📝 Overlap comments
* WIP: update primitives prefixing
* ♻️ Use updated prefix in primitives ts-code
* ♻️ Use updated token-prefix in css
* ♻️ Use updated tokens in primitives css utilities
* 🔥 Removed backwards-compat with old stack CSS
* [Darkside] Primtives prop-support (#3423)
* :refactor: Support primitives with new theme
* :refactor: Use sub-component for new Box update
* ♻️ Update support for new and old theme in Page and Box
* ♻️ Resolve instances where tokens were not correctly named for theme-support
* ♻️ Avoid exposing component before necesarry
* ♻️ Avoid having to import figma-types in ds-react
* ♻️ Using camelCase on tokens breaks primtives. Now uses kebab-case
* 🔥 Removed comment used as notes
* Update @navikt/core/react/src/layout/page/Page.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Update @navikt/core/react/src/layout/box/Box.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ♻️ Remove redundant prefix const
* ♻️ remove redundant T-suffix on types
* ♻️ Better previews on hover when checking token-props
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ♻️ More fine-grained exception-testing for use of old props in Box
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* 🚧 wip
* [Darkside] ErrorSummary updated CSS (#3331)
* First run for errorsummary css update
* Added nesting
* [Darkside] Fileupload CSS update (#3343)
* ✨ Updated Dropzone with darkmode
* ♻️ Added nesting for root
* ♻️ ac -> acx prefix for interla tokens
* ♻️ Removed reduntant token
* ♻️ More nesting
* 💄 Align overlay on drag better
* ⚰️ Removed test-code
* 💄 Update hover-border for dropzone
* 🐛 Removed border-color update on hover in disabled state
* ♻️ Use bg input on area, use border default
* [Darkside] Link CSS update (#3353)
* ✨ Darkmode-support for existing link-component
* :refactor: Adjusted line offsets and thickness
* [Darkside] ExpansionCard CSS update (#3338)
* 💄 Initial css-update expansioncard
* 📝 Added sub-headers
* 💫 Button animation
* ✨ Added data attrb for open-state
* 💫 Updated content animation
* ♻️ Added nesting
* ♻️ Better nesting of rules
* ♻️ Use outline for hover border
* ♻️ Use border as default outline
* 🔥 Remove redundant border css
* 🔥 Removed divider transition, unused state attributes in react
* [aksel.nav.no] Update examples of Page (#3349)
* Changesets: Run yarn as part of create-version
* Combobox: Fix issue where using arrow keys in list would make the entire page scroll (#3364)
* [Darkside] FormSummary updated CSS (#3345)
* :refactor: Use updated CSS for darkside
* 💄 Replace accent bg with info bg
* [Docs] Use NAV-dekorator for Page examples (#3362)
* [aksel.nav.no] Update examples of Page
* comment
* comment + rename + style->class
* fix
* 📝 Use NAV-dekorator for Page-examples
* 🚚 Moved content to separate __parts location
* :refactor: Updated examples
* Update aksel.nav.no/website/components/website-modules/examples/__parts/PageDemoContent.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* 🐛 Use correct import syntax for parts
* 📝 Add description to page-block default story
* 💄 Removed spacing from all typo-headings in demo
* 🐛 Removed react import from content part
---------
Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Git hooks that notify when yarn.lock have changed (#3361)
* 💄 first pass css updates
* 🎨 nest CSS
* Datepicker: 💄 css layer changes & remove extra border
* 🔥 remove resolved todo
* 💄 border radius for caption buttons
* 🎨 drastically simplify focus outline
* change: make button selector less wildcardy
* change: outline smaller for rdp-cell buttons
* change: width large enough to show 4 characters in year caption
* change: match design for range middle selected
* change: remove redundant error CSS
* change: remove unused CSS
* change: un-shuffle css import ordering for date.css
* change: remove unused CSS
* change: week buttons & day button active
* change: use secondary-neutral button for weeknumber buttons
* change: same selector for month and day buttons, active state
* 🐛 Fixed weeknumber as the button broke old datepicker
* change: remove double border on captions, active state on disabled
* ♻️ Updated weeknumber to be barkw-compat with old system
* 🚚 Moved date-import further up
---------
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
Co-authored-by: Ken <ken.aleksander@gmail.com>
Hid buttons from screen readers since you can't tab to them anyways. Moved sr-only text on clear button to title attr. Removed sr-only text on toggle list button. Removed prop toggleListButtonLabel.
* Prevent active text being announced waaay too many times.
* Add changeset
* New attempt at consistently reduced status messages on "copy" click
* Remove aria-relevant and aria-atomic to make announcement consistent between Safari and other browsers
* When single select on combobox, remove the gap between the input and the selected value.
* ♻️ Updated spacing between options and input in Combobox
* 📝 Changeset
* Revert darkside update
* ♻️ Update darkside combobox
* :refactor: Make gap something we add, not remove for chips based on type
* Update .changeset/yellow-days-rhyme.md
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* :refactor: Only add margin-left when only-child
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
- [Darkside]: Use shadow-dialog token in components, use subtle-border in combobox list
- [Darkside]: FileSummary nesten items border
- [Darkside]: Adjusted ExpansionCard padding
- [Darkside]: ActionMenu uses new Radio-design
- [Darkside]: Added shadow-token to system
* :refactor: Added darkmode-support to Stepper
* :refactor: Restructure Stepper to support darkmode and nesting
* 🐛 text-decoration now changes on hover
* :refactor: Line before non-interactive step now has border-neutral
* ✨ Added brandvolume support in theme-component
* 📝 Added brandvolume story to readmore
* ✨ Added large size to readmore
* ✨ Added darkmode support for Readmore
* :refactor: Updated CSS syntax
* 🐛 Fixed brandvolume stories
* ✨ Implemented brandvolume in ReadMore
* ✨ Added large-variant of readmore to OG readmore
* :refactor: Use tokens and calc to handle volume
* 🐛 Added text-accent-strong on hover to high brandvolume
* 🐛 Avoid adjusting readmore body when size is large
* 📝 CHangeset
* Update @navikt/core/react/src/provider/theme/AkselTheme.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Update @navikt/core/react/src/provider/theme/AkselTheme.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ✨ Added darkmode support in react for internalheader
* :refactor: Support darkmode theming for internalheader
* 💄 Added bottom border to header, divider now subtleA
* 🐛 Remove hover,active effect in static title
* :refactor: Remove redundant :is for button
* :refactor: use padding shorthand
* 💄 Improved hover-effect on forced-color buttons, added story
* 🐛 Revert back to is button syntax
* :refactor: Updated List css to support darkmode
* ♻️ nest some CSS
* 🐛 Updated stories
* 🐛 Removed removed story from chromatic view
* :refactor: Removed color-override on list-markers
* :refactor: Set icon-color to currentColor
* :refactor: Removed currentColor from icon
---------
Co-authored-by: Julian Nymark <julian.nymark@nav.no>
* :refactor: Initial loader update
* :refactor: Re-added support for inverted
* :refactor: Added nesting to loader
* 🐛 Foreground now scales the same as background track
* Updated checkbox css
* bug: Added correct icon-color for readonly checkbox
* Form-css: Updated form.css and fieldset.css with new tokens
* Added radio dot support
* use 4px border-radius, use border-strong for error
* Error-state updated for checked checkbox
* Updated 'dot'-color for readonly radio
* Updated radio-design
* Added disabled-stories for checkbox and radio
* Radio story with checked and error
* Updated foced-colors support for radio
* Use border-syntax instead of box-shadow
* Removed old code
* Updated checked color to accent-strong-pressed for radio
* Adjusted Error-colors for radio/checkbox
* 💄 Radio can now be checked and have Error
* ♻️ Use hoverA bg for hover
* ♻️ Readio readonly now matches figma
* [Darkside] Migrated typo to new CSS
* memo: Added comments
* change: Implemented accordion header and content
* change: Added lines
* feat: added todo
* change: Fixed layering issues with lines
* change: Avoid animation on initial render
* change: Removed comments
* change: moved icon state into nesting
* change: Added alpha-background for icon, updated fontweight
* change: Added forced-colors support
* Removed use op --open class
* Removed old grid centering
* Top, bottom line is now alpha
* Fixed animation
* bug: Revert to transparent bg
* deprecation: Added tags to accordion props that are to be removed
* removed deprecation for accordion headingSize prop
* Updated implementation of line in accordion
* Remove position relative in accordion content
* Implemented size-update for accordion
* bug: removed old comment
* Clarify comments
* Removed redundant header class
* Re-added className in accordionHeader
* Use new tokens in copybutton
* Updated animation
* updated to nested syntax
* Updated text-color on hover
* Added subheading for sectioning
* removed background none
* sanity config cleanup
* removed extra const for type
* re-organized admin tools and fixed types
* Removed no longer needed custom actions for translations
* Simplified publication plugin
* Removed extra logic in publish action
* synced SEO-updates
* lock sync
* bug: Removed old index export
* Show AddNewValue button in Combobox based on searchTerm instead of value, so it is displayed when autocompleting words
* Highlight matching text in FilteredOptions
* Add changeset
* Move styling to combobox.css instead of inline JS
* Ensure label options are read as one text, even when highlighting search matches.
This only seemed to be a problem in testing library, so we should be able to remove this if they fix this in their calculation of accessible name.
* Update changeset to a minor version
* Re-introduce controlled value in storybook examples to not change Chromatic snapshots
* change: Updated actionmenu examples
* change: Removed flipAlignment prop for better alignment
* change: Removed defaultOpen-prop from ActionMenu
* change: Moved rootElement prop to component root
* change: Added support for use inside Modal
* change: Use MenuPortalProps instead of Pick
* feat: Added build for darkside
* feat: Implemented darkside-tokens in tailwind-build
* change: Code cleanup and syntax simplification
* change: Moved color-token extraction to start of file
* memo: Moved comment
* change: Updated actionmenu examples
* change: Removed flipAlignment prop for better alignment
* change: Removed defaultOpen-prop from ActionMenu
* change: Moved rootElement prop to component root
* change: Added support for use inside Modal
* change: Use MenuPortalProps instead of Pick
* change: Revert to using Pick for prop inheritance
* change: Menucontext uses required definition of rootElement
[darkside] Updated naming transform to support alpha-tokens
[darkside] Updated input-token to use opacity
[darkside] Added alpha-tokens to global config
[darkside] Now auto-generates the alpha-values
[darkside] Added semantic role tokens using alpha-values
bug: removed tempfile added by vitest
* bug: Some icons that should be ignored were fetched and caused exceptions
* change: Added some comments
* change: Better math for icon-check
* change: Better messaging
* Update @navikt/aksel-icons/config/figma/index.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Add support for PageUp and PageDown in Combobox.FilteredOptions
* Remove console.log statements
* Add test for PageDown/PageUp
* Open FilteredOptions when pressing PageDown
* Prevent scrolling from moving the whole page
* Consistently scroll to the active element in useVirtualFocus by using useLayoutEffect
It seems like doing it with the state update sometimes encounters a race condition preventing the scrolling.
This removes the need for a private function handling index update and scrolling, simplifying the code.
* Updated test to fit new options order
* Prevent "Home" and "End" in Combobox from scrolling as well
* Add changeset
* Update @navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* useEffect seems to work the same way, and works better for SSR
* Removed code that did nothing
* Added the same check we have for PageDown, etc. Unsure if it is neccessary.
* Change behaviour for "Home" to move focus to the first element instead of Input
* Once we changed virtualFocus.moveFocusToTop to move focus to first element instead of the Input, we now need another function to move it to the Input where applicable.
* Update .changeset/tasty-cats-hear.md
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
---------
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* Disable autocomplete in Combobox to "fix" issue where autocomplete is broken in Firefox on Android
The bug is that after three "correct" characters are entered in a row, the autocomplete inserts the third character incorrectly, messing up the text in the input.
This also happens in other implementations of autocomple, like W3C's ARIA Authoring Practices Guide combobox with inline autocomple.
* Add changeset
* Use type checking instead of useEffect to prevent client code from running server side
feat: Avoid caching config for color-tokens
feat: Remove use of leonardo, hardcode global config
feat: Update 100-400 scale for darkmode
feat: Update 500-1000 scale for global colors
* feat: Updated to sanity 3.59
* bug: Sanity updated icon and media types, so everything broke
* bug: Fallback to default media in article previews if everything is normal
* Combobox: 💄 tweak the visibility of chevron
* Combobox: 💄 dim visibility of icons for readonly datepicker, select, and combobox
* Combobox: 💄 dim visibility of icons for readonly datepicker, select, and combobox
* changeset
For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
Vi bruker [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
## Howto
## Lage ny versjon
- For å lage en ny versjons-entry:`yarn changeset`
- Velg pakkene som skal versjoneres med `arrowkeys` + `Space`
1.`yarn changeset`
2. Svar på spørsmålene som kommer opp:
`🦋 Which packages would you like to include?`
Trykk `Space` for å velge pakkene som skal versjoneres, for så trykke`Enter` for å gå videre.
Trykk `Space` for å velge pakkene som skal versjoneres, trykk så`Enter` for å gå videre.
`🦋 Which packages should have a major bump?`
Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
Trykk `Enter` for å gå videre _eller_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`.
`🦋 Which packages should have a minor bump?`
Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
Trykk `Enter` for å gå videre _eller_ velg pakkene som skal minor-bumpes med `arrowkeys` + `Space`.
Hvis du ikke velger major eller minor, så blir pakkene få en patch-bump
Hvis du ikke velger major eller minor, så vil pakkene få en patch-bump.
- Commit og push.
`Please enter a summary for this change`
Skriv inn en kort beskrivelse av endringen på formatet `<Komponent>: <gitmoji?> <Beskrivelse>`, f.eks. "Button: ✨ Add feature xyz".
3. Commit og push.
## Fixed versjonering
Alle base-pakkene våre har `fixed versjonering`. Dette tilsier at en bump på en av disse vil bumpe alle til samme versjon
Alle base-pakkene våre har `fixed versjonering`. Dette betyr at en bump på en av disse vil bumpe alle til samme versjon
// TODO: Convert to new format: https://eslint.org/docs/latest/use/configure/migration-guide
/**
* TODO:
* - Convert to new format (v9): https://eslint.org/docs/latest/use/configure/migration-guide
* - Look into opinionated stylistic plugin
* - Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
* - We should add "plugin:react/jsx-runtime", but not sure if this will cause problems for projects not using the new JSX transform
* - Consider adding the rule "id-length"
*/
/**
* V9 migration WIP
* - eslint-plugin-storybook does not support v9 yet: https://github.com/storybookjs/eslint-plugin-storybook/issues/157
* - eslint-plugin-testing-library does not support v9 yet: https://github.com/testing-library/eslint-plugin-testing-library/issues?q=is%3Aissue+is%3Aopen+v9
* - @vitest/eslint-plugin supports v9, just need to replace @vitest/legacy-recommended: https://github.com/vitest-dev/eslint-plugin-vitest?tab=readme-ov-file#usage
* - Looks like @typescript-eslint/eslint-plugin and @typescript-eslint/parser can both be replaced by just typescript-eslint in v9: https://typescript-eslint.io/getting-started#step-2-configuration
*/
module.exports={
env:{
browser:true,
@@ -8,15 +23,13 @@ module.exports = {
extends:[
"eslint:recommended",
"plugin:react/recommended",
//"plugin:react/jsx-runtime", // Not sure if this will cause problems for projects not using the new JSX transform
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:storybook/recommended",
// TODO: Look into opinionated stylistic plugin
// TODO: Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
],
/* Allows eslint-plugin-react to detect installed react-version */
settings:{react:{version:"detect"}},
rules:{
"import/no-unresolved":"off",
@@ -26,12 +39,6 @@ module.exports = {
],
"array-callback-return":"error",
"object-shorthand":"error",
// TODO: Consider adding the rule "id-length"
// Temporary:
"react/prop-types":"off",
"react/display-name":"off",
"import/no-named-as-default":"off",
// "import/no-cycle": [1],
"no-else-return":"error",
"no-console":[
"warn",
@@ -53,7 +60,12 @@ module.exports = {
],
},
],
/* Temporarily turned off until code is updated */
@@ -11,7 +11,7 @@ import Setup from "./assets/setup.png";
# Getting started
Aksel is the toolbox for product development <a href="https://aksel.nav.no"target="_blank">@NAV</a> (Norwegian Labour and Welfare Administration)
Aksel is the toolbox for product development <a href="https://aksel.nav.no"target="_blank">@Nav</a> (Norwegian Labour and Welfare Administration)
This includes a designsystem, best practices for product-development, principles for user-experience and a blog. <a href="https://aksel.nav.no/god-praksis/artikler/om-aksel" target="_blank">
Read more about Aksel.</a>
@@ -30,7 +30,7 @@ import Setup from "./assets/setup.png";
target="_blank"
className="sb-link"
>Website</a></h3>
<p className="sb-section-item-paragraph">Includes everything you need to get started building and developing digital products for NAV today.</p>
<p className="sb-section-item-paragraph">Includes everything you need to get started building and developing digital products for Nav today.</p>
</div>
<div className="sb-section-item">
@@ -136,34 +136,34 @@ import Setup from "./assets/setup.png";
800+ open source icons made by Aksel, NAVs designsystem-team
800+ open source icons made by Aksel, Nav's designsystemteam.
- Designed for 24x24px
- Available in React and SVG
@@ -30,7 +30,7 @@ Tip: Use the `title` prop for accessible icons.
### Sizing
Each icons `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for best possible visual representation.
Each icon's `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for the best possible visual representation.
`Icons (${svgFiles.length}) and configs (${ymlFiles.length}) written to directory does not match the expected amount of icons located in Figma (${publishedIconComponents.length}).\nThis is most likely caused by duplicate icon names from figma.`,
Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene i fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
Referer til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
Gå til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
Har du ønsker om nye ikoner, eller ønsker å bidra med å lage nye, lag et issue på [GitHub-repoet for designsystemet](https://github.com/navikt/aksel).
- Chore: Manually bump version to sync npm and github-releases ([`aa7c2d9`](https://github.com/navikt/aksel/commit/aa7c2d9598434d6304432daa20e0a1eeedd03b1b))
- ExpansionCard: Removed dynamic padding on button-element. ([#3532](https://github.com/navikt/aksel/pull/3532))
- Modal: Defaults to `margin: auto` for tailwind 4 support. ([#3532](https://github.com/navikt/aksel/pull/3532))
## 7.10.0
### Minor Changes
- Table: New prop `contentGutter` added to `ExpandableRow`-component. This allows user more control for content layout inside expandable element. ([#3507](https://github.com/navikt/aksel/pull/3507))
### Patch Changes
- Button: Using `<Loader />` within `icon`-prop now supported. ([#3515](https://github.com/navikt/aksel/pull/3515))
- Combobox: Always render `maxSelected` message when `isMultiSelect` is set. ([#3506](https://github.com/navikt/aksel/pull/3506))
## 7.9.2
### Patch Changes
- Table: Removed border-bottom for HeaderCell used in ExpandableRow. ([#3503](https://github.com/navikt/aksel/pull/3503))
## 7.9.1
### Patch Changes
- Link: :bug: Use inside Alert got wrong text-color while focused or active. ([#3489](https://github.com/navikt/aksel/pull/3489))
## 7.9.0
### Minor Changes
- ErrorSummary: :sparkles: new prop to prefix error with a warning icon. ([#3445](https://github.com/navikt/aksel/pull/3445))
All form components: replace dot with warning icon in error message.
### Patch Changes
- Switch: Update switch to better reflect unchecked state. ([#3468](https://github.com/navikt/aksel/pull/3468))
- Select: :bug: Focus-border no longer cancels out error-border. ([#3465](https://github.com/navikt/aksel/pull/3465))
- Textarea: :bug: Focus-border no longer cancels out error-border. ([#3465](https://github.com/navikt/aksel/pull/3465))
## 7.8.1
### Patch Changes
- Alert: Link-components used within Alert variant='inline' now preserves default coloring ([#3461](https://github.com/navikt/aksel/pull/3461))
- Table: :fire: Removed cursor 'pointer' when 'ExpandableRow' is disabled. ([#3462](https://github.com/navikt/aksel/pull/3462))
- CSS: Resolved regression where the complete stylesheet was included in scoped 'components.css' file. ([#3427](https://github.com/navikt/aksel/pull/3427))
- Select: Now shows focus-outline when ':focus' is set trough pointer or label in all browsers. Chrome and Firefox handles `:focus-visible` differently for 'select', previously causing outline-border not to show in Firefox. ([#3415](https://github.com/navikt/aksel/pull/3415))
- Modal: Don't add scroll shadow when polyfilled ([#3408](https://github.com/navikt/aksel/pull/3408))
- Modal: Now shows up while screensharing with Vergic ([#3407](https://github.com/navikt/aksel/pull/3407))
- FileUpload: Remove browser styling from FileUpload.Item when used in list. ([#3413](https://github.com/navikt/aksel/pull/3413))
- Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
## 7.5.3
## 7.5.2
### Patch Changes
- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
## 7.5.1
## 7.5.0
## 7.4.3
### Patch Changes
- Table.ColumnHeader: Inherit text alignment in button ([#3319](https://github.com/navikt/aksel/pull/3319))
## 7.4.2
## 7.4.1
### Patch Changes
- Combobox: :bug: Fix scroll issue when using arrow keys to navigate list ([#3269](https://github.com/navikt/aksel/pull/3269))
## 7.4.0
## 7.3.1
### Patch Changes
- Updated to Selectors Level 4 syntax. ([#3250](https://github.com/navikt/aksel/pull/3250))
## 7.3.0
### Minor Changes
- ActionMenu: :tada: New component! Replaces DropdownMenu as the go-to solution for floating menus. Includes support for grouping, sub-menus, checkboxes, radios and dividers. Read more in the [documentation](https://aksel.nav.no/komponenter/core/actionmenu). ([#3081](https://github.com/navikt/aksel/pull/3081))
### Patch Changes
- List.Item: Center icon horizontally inside it's container ([#3253](https://github.com/navikt/aksel/pull/3253))
## 7.2.1
### Patch Changes
- Combobox: Support PageUp/PageDown in dropdown list. ([#3158](https://github.com/navikt/aksel/pull/3158))
## 7.2.0
## 7.1.2
### Patch Changes
- List: Explicitly set list-style on ol to override reset-CSS ([#3202](https://github.com/navikt/aksel/pull/3202))
- Datepicker/Select: :lipstick: dim non-interactable icons when readonly is set. ([#3187](https://github.com/navikt/aksel/pull/3187))
- Combobox: :bug: implement missing readonly and disabled ([#3180](https://github.com/navikt/aksel/pull/3180))
## 7.1.0
### Patch Changes
- Accordion: Remove 'relative' positioning when focused. This resolves some issues where floating elements like popover ended up clipping. ([`9c1eba445`](https://github.com/navikt/aksel/commit/9c1eba44508f295cc6261ff96822b18557bd7ddc))
Loaded 100 of 862 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.