Releases: navikt/aksel
Releases · navikt/aksel
Aksel@7.9.0
@navikt/ds-react
- ErrorSummary: ✨ new prop to prefix error with a warning icon. (#3445) All form components: replace dot with warning icon in error message.
- Button: Fix edge-case where setting "loading={true}" in a Modal caused the button to get 0 width and not show spinner (#3252)
- Switch: Update switch to better reflect unchecked state. (#3468)
- Textarea: resize immediately upon receiving resize event (eg. inside modal opening). (#3463)
@navikt/ds-css
- ErrorSummary: ✨ new prop to prefix error with a warning icon. (#3445) All form components: replace dot with warning icon in error message.
- Switch: Update switch to better reflect unchecked state. (#3468)
- Select: 🐛 Focus-border no longer cancels out error-border. (#3465)
- Textarea: 🐛 Focus-border no longer cancels out error-border. (#3465)
Aksel@7.8.1
@navikt/aksel-stylelint
- Combobox: Removed clear button, removed tokens staring with --ac-combobox-clear, deprecated props clearButton/clearButtonLabel. (#3433)
@navikt/ds-react
- Combobox: Only open dropdown-list onClick, not onFocus. (#3440)
- Combobox: Fix issue where you could select more options than defined in maxSelected (#3434)
- Timeline: In cases where earliest found date were after current date, timeline-start ended up defaulting to current date. (#3458)
- Chips.Removable: Removed prop removeLabel (#3429)
- i18n: ✨ Implemented i18n support for all components. Components come with support for nb, nn and en locales (Docs) (#3429)
- Combobox: Removed clear button, removed tokens staring with --ac-combobox-clear, deprecated props clearButton/clearButtonLabel. (#3433)
- Combobox: Changed prop maxSelected to number (#3433)
- DatePicker/MonthPicker: Added new translations prop and deprecated locale prop (#3429)
- Timeline: Deprecated prop axisLabelTemplates. Use Provider if you still need to change the date formats. (#3429)
- Search: Deprecated prop clearButtonLabel. Use Provider if you still need to change the label. (#3429)
- Textarea: Deprecated prop i18n. Use Provider if you still need to change these texts. (#3429)
@navikt/ds-css
- Alert: Link-components used within Alert variant='inline' now preserves default coloring (#3461)
- Table: 🔥 Removed cursor 'pointer' when 'ExpandableRow' is disabled. (#3462)
- Combobox: Removed clear button, removed tokens staring with --ac-combobox-clear, deprecated props clearButton/clearButtonLabel. (#3433)
- CSS: Resolved regression where the complete stylesheet was included in scoped 'components.css' file. (#3427)
Aksel@7.7.0
@navikt/ds-react
- CopyButton: Removed prop
activeTitle. UseactiveTextinstead. (#3426) - Combobox: 💥 Removed prop
toggleListButtonLabel(#3409) - Combobox: Hid buttons from screen readers, added title on clear button, removed sr-only text on toggle list button. (#3409)
- InternalHeader.UserButton: Remove title-attribute on icon and improved types. (#3424)
- CopyButton: Fix issue where state changes are announced multiple times using VO in Chrome (#3374)
Aksel@7.6.0
@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)
Aksel@7.5.0
@navikt/aksel-icons
- Icons: 🎉 Added FileJpeg, FilePng and MedicalThermometer. (#3332)
@navikt/ds-react@7.5.0
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)
Aksel@7.4.0
@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)
Aksel@7.3.0
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
Aksel@7.2.0
@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)
Aksel@7.1.0
@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
Aksel@7.0.0
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',