Releases: navikt/aksel
Releases · navikt/aksel
[email protected]
@navikt/aksel-icons
- Icons: Added new icons 'TruckPercent' and 'ShieldCheckmark' 🎉. (#3416)
@navikt/ds-react
- ActionMenu: Added 'align'-prop to 'ActionMenu.Content'. This allows menu to 'start' or 'end' align in reference to anchor. (#3414)
- ReadMore: Added size 'large'. (#3372)
- DatePicker/MonthPicker: Remove pointerEvents=none on CalendarIcon so that the title shows up as tooltip on hover (#3390)
- Combobox: Single-select now shows cursor closer to selected item. (#3384)
@navikt/ds-css
- ReadMore: Added size 'large'. (#3372)
- 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)
- Modal: Don't add scroll shadow when polyfilled (#3408)
- Modal: Now shows up while screensharing with Vergic (#3407)
- FileUpload: Remove browser styling from FileUpload.Item when used in list. (#3413)
Combobox: Single-select now shows cursor closer to selected item. (#3384)
[email protected]
@navikt/aksel-icons
- Icons: 🎉 Added FileJpeg, FilePng and MedicalThermometer. (#3332)
@navikt/[email protected]
Minor Changes
- React: Allow all react versions above 17.0.0 trough peerDependencies. (#3334)
Patch Changes
- Datepicker: Use of 'open'-prop set to 'true' on first render could lead to the dialog not opening. (#3333)
[email protected]
@navikt/ds-react
- Pagination: More precise type for renderItem (#3275)
- Combobox: Pressing 'Enter' after canceling autocomplete could result in using matching options in list. (#3306)
- Tabs.List: Remove redundant icon titles (#3282)
- Combobox:
onToggleSelectedis now called with correct value when autocomplete and new values are both allowed. (#3287) - Combobox: Fix scroll issue when using arrow keys to navigate list (#3269)
- Search: Remove redundant role attribute (#3280)
- Monthpicker: Add allowed input format 'MMyyyy'. (#3285)
- Combobox: Enable option to add a new value while autocompleting and highlight matches in FilteredOptions. (#3225)
- Date/MonthPicker: Upgrade react-day-picker to fix issue with React 19 (#3268)
- Combobox: Don't scroll when browsing list with mouse (#3265)
- Avoid warning about
element.refin React 19 (#3268) - Checkbox: Remove redundant attribute
aria-checked(#3274)
@navikt/ds-css
- Table.ColumnHeader: Inherit text alignment in button (#3319)
[email protected]
New component ActionMenu 🎉 🎉 🎉
Replaces DropdownMenu as the go-to solution for floating menus. Includes support for grouping, sub-menus, checkboxes, radios and dividers. Read more in the docs.
@navikt/ds-react
- Combobox: Remove virtual focus on input-blur instead of moving it to top (#3261)
- Accordion: Remove redundant icon title-attrb (#3230)
- Modal: Close button now avoids triggering when repeated keystrokes are detected. This helps stop accidental closing of Modal when 'Enter'-key is held down. (#3081)
@navikt/ds-css
[email protected]
@navikt/ds-react
- Combobox: Disable autocomple in Firefox on Android to avoid browser specific bug (#3201)
- Combobox: Support PageUp/PageDown (#3158)
- FileUpload: 💥 Remove UNSAFE-prefix (#3205)
- List: ✨ New size 'large' (#3207)
- Performance: ⚡️ Optimized memoization for re-rendring in some components. (#3197)
@navikt/ds-css
- Combobox: Support PageUp/PageDown (#3158)
[email protected]
@navikt/ds-react
- List: Add indentation and remove overly verbose aria attributes (#3184)
- Combobox: Added readonly and disabled support (#3180)
- Pagination: Updated font-weight to 600 and marked 'page'-prop on 'Item' as deprecated. (#3164)
- Combobox: Better typing for maxSelected prop (#3169)
- ErrorSummary: Remove aria-attributes. (#3171)
@navikt/ds-css
- List: Explicitly set list-style on
<ol>to override reset-CSS (#3202) - List: Add indentation and remove overly verbose aria attributes (#3184)
- Datepicker/Select: Dim non-interactable icons when readonly is set. (#3187)
- Combobox: Added readonly and disabled support (#3180)
- Accordion: Remove 'relative' positioning when focused. This resolves some issues where floating elements like popover ended up clipping. (9c1eba445)
@navikt/aksel-stylelint
[email protected]
What's new?
Version 7 comes with some small changes to ErrorSummary, Tooltip, Icons and our Tailwind config.
- Will not affect most applications
- All potential breaking changes and how to fix them can be found on our "Migration"-page
Checklist for update
- Check that your Tooltip properly labels the element. It should be equally understandable to visual users and screen-readers even when the Tooltip is open or closed.
- If your ErrorSummary did not have a heading before, check that the new default heading still works in your context.
- If your ErrorSummary had a custom heading before, you can try removing it and just use the built in heading.
- Check that you don't have
BeaconSignals,Buldings2andBuldings3still in use. - If you use tailwind, check that use of
sm:andmax-w-screen-smstill visually works.
Tooltip
We found the use of Tooltip often leading to some degraded experiences for non mouse and visual users.
Some of the main causes to this were:
- Tooltip content were only available when visible (open)
- Dynamic content in Tooltip were often not caught by screen-readers since it depended on Tooltip being open or closed
- Wrong use of Tooltip around non-interactive elements made it non accessible to keyboard users.
To solve this, we updated Tooltip to instead of using aria-describedby, now use aria-label on the elements it surrounds.
// React
<Tooltip content="Åpne inbox">
<Button icon={<InboxIcon />}/>
</Tooltip>
// Output
<button aria-label="Åpne inbox">
...
</button>As a consequence of this, the content inside the wrapper ("button" in this case) will be ignored by screen-readers. In the case one still wants the visible text to be accessible, you can add the describesChild-prop. This replaces the aria-label with title to make the Tooltip content an additional label.
ErrorSummary
We did some analysis on how ErrorSummary were used and noticed that most of the headings were mostly similar, and with only small differences in most cases. To solve this, ErrorSummary now comes with a default heading when no heading is provided.
Icons
Around 6 months ago, a few icons were renamed and re-labeled. Since we only found ~20 instances of these still in production we decided that v7 would be an ok release to remove the old duplicates.
- BeaconSignals -> OpenSource
- Buldings2 -> Buildings2
- Buldings3 -> Buildings3
Tailwind
We now include our own breakpoints in the screens config. This allows users of our tailwind-config and Primitives to work under the same breakpoints. Our config mostly mirrors the native tailwind-config, but sm and 2xl will be different.
// Native Tailwind config
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
// New config
'sm': '480px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1440px',
[email protected]
Breaking changes to UNSAFE-components
Combobox: onChange now receive only value as argument, instead of ChangeEvent (#2974)
// before
onChange: ChangeEventHandler<HTMLInputElement>;
// after
onChange: (newValue: string) => void;@navikt/ds-tokens
- Tokens: Adjusted Green 400 to comply with AA 3.00 contrast. (#3091)
- Fonts: Added built-in support for cyrillic, cyrillic-ext and latin-ext (#3044)
@navikt/ds-react
- Table: Corrected the type of onSortChange (#3103)
- Combobox: Placeholder goes away when an option is selected (#3101)
- Table: Fixed background-clipping when using ExpandableRow. (#3095)
- Primitives: Added gridColumn-prop for more grid alignment control. (#3082)
- Combobox: Can no longer remove options with backspace when shouldShowSelectedOptions is false (#3076)
- Refactored Combobox FilteredOptions (#3073)
- Improved search in Combobox - find hits anywhere in the label (#2974)
- Tabs, ToggleGroup: Rovingfocus now respects shift, alt, ctrl and meta-keys when navigating. (#3041)
- Prevent NullPointer when adding a new/custom option in Combobox single-select (#3054)
- Combobox: Entering an already selected option and pressing enter no longer removes it (#3061)
- Combobox: Description is now connected to the input field via aria-describedby (#3065)
- Prevent Escape in open Combobox from closing Modals (#3053)
@navikt/ds-css
- Table: Fixed background-clipping when using ExpandableRow. (#3095)
- Primitives: Added gridColumn-prop for more grid alignment control. (#3082)
- FormSummary: Added background color (#3093)
- Modal: Added scroll shadows (#3083)
- Fonts: Added built-in support for cyrillic, cyrillic-ext and latin-ext (#3044)
@navikt/aksel
- Aksel-CLI: Bump jscodeshift-add-imports to 1.0.11. (#3099)
@navikt/aksel-icons
- Icons: New icon-series for 'SplitHorizontal' and 'SplitVertical' (#3072)
[email protected]
@navikt/ds-react
- FileUpload: Added description-prop for Item. (#2975)
- Pagination: Added prop for hidden heading. (#2976)
- ToggleGroup: Added props icon and label as a replacement for children. Children is marked as deprecated and will be removed in a future major-version. (#2929)
- List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.5rem. (#2979)
- Page: Removed surface-subtle from background-prop (#2987)
- Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. (#3003)
ToggleGroup: Selecting already selected value now avoids sending extra event (#3012)
Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon. (#3007) - Modal: New prop placement for anchoring the modal to the top of the viewport. (#3033)
@navikt/ds-css
- CopyButton: Icon is now 20px for size small and xsmall. (#2977)
- Button: Updated icon size for size="small" to 1.25rem. (#2984)
- List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.5rem. (#2979)
- Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. (#3003)
Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon. (#3007) - Modal: New prop placement for anchoring the modal to the top of the viewport. (#3033)