@midas-ds/components 9.0.0 → 10.1.0

package/CHANGELOG.md

@@ -1,4 +1,119 @@
-# 9.0.0
+## 10.1.0 (2025-05-23)
+
+### 🚀 Features
+
+- **select:** allow for option id to be string or number ([b9f31bac6b](https://github.com/migrationsverket/midas/commit/b9f31bac6b))
+- **select:** use midas checkbox ([94c2cdb61d](https://github.com/migrationsverket/midas/commit/94c2cdb61d))
+- **accordion:** add variant `hasBackground` ([2b429a73b3](https://github.com/migrationsverket/midas/commit/2b429a73b3))
+- **accordion:** add new variant `hasBackground` ([1022bcc58a](https://github.com/migrationsverket/midas/commit/1022bcc58a))
+- **tag:** add dark mode style ([408be2acb7](https://github.com/migrationsverket/midas/commit/408be2acb7))
+- **tag:** add new prop ([82a0998769](https://github.com/migrationsverket/midas/commit/82a0998769))
+
+### 🩹 Fixes
+
+- **link-button:** add disabled styling ([143f708127](https://github.com/migrationsverket/midas/commit/143f708127))
+- **radio:** remove interactions with radiogroup items outside the label and button ([0b9f197971](https://github.com/migrationsverket/midas/commit/0b9f197971))
+- **skeleton:** dont overwrite className and style props ([155a8ff437](https://github.com/migrationsverket/midas/commit/155a8ff437))
+- **select:** virtualize the scroll box ([523b138e17](https://github.com/migrationsverket/midas/commit/523b138e17))
+- **tag:** fix the hover and fix the disabled style ([3a21642715](https://github.com/migrationsverket/midas/commit/3a21642715))
+- **tag:** unset border to make button the right width/height ([769cfa8ec5](https://github.com/migrationsverket/midas/commit/769cfa8ec5))
+- **tag:** change token on button hover and pressed ([0f2ff1c422](https://github.com/migrationsverket/midas/commit/0f2ff1c422))
+- **tag:** fix the missing nesting selector ([87ac33ab1c](https://github.com/migrationsverket/midas/commit/87ac33ab1c))
+
+### 💅 Refactors
+
+- **tag:** move render function to meta data ([48d9f9b126](https://github.com/migrationsverket/midas/commit/48d9f9b126))
+
+### 📖 Documentation changes
+
+- control size globally in storybook + new dark mode control ([#596](https://github.com/migrationsverket/midas/pull/596))
+
+### 🔧 Maintenance
+
+- **deps:** update RAC ([20da285b9e](https://github.com/migrationsverket/midas/commit/20da285b9e))
+- extend commitlint conventional commits config ([4daa47926d](https://github.com/migrationsverket/midas/commit/4daa47926d))
+- update eslint rule to handle major versions > 9 ([ba85178773](https://github.com/migrationsverket/midas/commit/ba85178773))
+- **changelog:** group and display more commit types in changelog ([d86d18ae94](https://github.com/migrationsverket/midas/commit/d86d18ae94))
+- change react import statement ([efe3c867f0](https://github.com/migrationsverket/midas/commit/efe3c867f0))
+
+# 10.0.0 (2025-05-20)
+
+### 🚀 Features
+
+- **tokens:** add new tokens `blue50` and `blue70`, update link colors ([d814a4c961](https://github.com/migrationsverket/midas/commit/d814a4c961))
+- ⚠️ **tokens:** rename tokens `blue140` & `blue170` and add new tokens `blue110`, `blue120`, rename `purple140` to `purple110` ([b79d586d53](https://github.com/migrationsverket/midas/commit/b79d586d53))
+- **table:** remove deprecation of prop `narrow` and update documentation ([4cbbb8efd9](https://github.com/migrationsverket/midas/commit/4cbbb8efd9))
+- **tag:** use button size medium instead of small ([731df78796](https://github.com/migrationsverket/midas/commit/731df78796))
+- **search-field:** use button size medium instead of small ([a5f6020bbd](https://github.com/migrationsverket/midas/commit/a5f6020bbd))
+- **progress-bar:** use button size medium instead of small ([24dad8eb80](https://github.com/migrationsverket/midas/commit/24dad8eb80))
+- **file-upload:** use button size medium instead of small ([c4351ff469](https://github.com/migrationsverket/midas/commit/c4351ff469))
+- ⚠️ **skeleton:** remove deprecated props ([cf5b52095c](https://github.com/migrationsverket/midas/commit/cf5b52095c))
+- ⚠️ **label:** remove deprecated variants ([36c893a748](https://github.com/migrationsverket/midas/commit/36c893a748))
+- ⚠️ **theme:** remove deprecated tokens `borderInvalid` and `textInvalid` ([d2f1620dc4](https://github.com/migrationsverket/midas/commit/d2f1620dc4))
+- ⚠️ **table:** remove deprecated prop `narrow` from table ([2b61d27b75](https://github.com/migrationsverket/midas/commit/2b61d27b75))
+- ⚠️ **tabs:** remove deprecated prop `defaultSelected` ([5271e93984](https://github.com/migrationsverket/midas/commit/5271e93984))
+- ⚠️ **spinner:** remove deprecated prop `dark` ([309da278c9](https://github.com/migrationsverket/midas/commit/309da278c9))
+- ⚠️ **modal:** remove deprecated `ModalTrigger` and `Dialog` ([9789773886](https://github.com/migrationsverket/midas/commit/9789773886))
+- ⚠️ **accordion:** remove deprecated prop `type='multiple'`, use `allowsMultipleExpanded` instead ([8c82cbd681](https://github.com/migrationsverket/midas/commit/8c82cbd681))
+- ⚠️ **button:** remove small size variant from button ([06430f2df2](https://github.com/migrationsverket/midas/commit/06430f2df2))
+- **skeleton:** allow for more semantically correct props ([703237ec04](https://github.com/migrationsverket/midas/commit/703237ec04))
+- **button:** add back the small variant ([2112557050](https://github.com/migrationsverket/midas/commit/2112557050))
+- **button:** add size property, a story and style ([946bd9aa7d](https://github.com/migrationsverket/midas/commit/946bd9aa7d))
+- **search-field:** add size prop ([4dab7eea96](https://github.com/migrationsverket/midas/commit/4dab7eea96))
+- **combobox:** add size prop ([e64826ab11](https://github.com/migrationsverket/midas/commit/e64826ab11))
+- **date-picker:** add size prop ([c1e1a04444](https://github.com/migrationsverket/midas/commit/c1e1a04444))
+- **select:** add size property ([b1519f00cd](https://github.com/migrationsverket/midas/commit/b1519f00cd))
+- **date-field:** ✨ medium size ([#558](https://github.com/migrationsverket/midas/pull/558))
+- **theme:** add full scale of signal-red tokens ([abdca1e267](https://github.com/migrationsverket/midas/commit/abdca1e267))
+
+### 🩹 Fixes
+
+- **select:** increase the margin top to give more space between tag group and select ([5514f642b0](https://github.com/migrationsverket/midas/commit/5514f642b0))
+- **calendar:** add cursor: not-allowed on disabled dates ([6592b4fb15](https://github.com/migrationsverket/midas/commit/6592b4fb15))
+- **accordion:** set correct height on uncontained variant ([#557](https://github.com/migrationsverket/midas/pull/557))
+
+### 📖 Documentation changes
+
+- **layout:** update docs on clientSideHref prop ([6f1e0807ad](https://github.com/migrationsverket/midas/commit/6f1e0807ad))
+- add untracked changelog files and update tsconfig ([9527e80ac0](https://github.com/migrationsverket/midas/commit/9527e80ac0))
+- **changelog:** add docusaurus style changelog and release notes ([cba214be09](https://github.com/migrationsverket/midas/commit/cba214be09))
+
+### 🔧 Maintenance
+
+- **deps:** bump undici in the npm_and_yarn group across 1 directory ([63e9f61a23](https://github.com/migrationsverket/midas/commit/63e9f61a23))
+- **deps:** bump vite in the npm_and_yarn group across 1 directory ([193b8d80b5](https://github.com/migrationsverket/midas/commit/193b8d80b5))
+- disable snapshots for duplicate states ([52197ad135](https://github.com/migrationsverket/midas/commit/52197ad135))
+- use medium sized buttons ([7d55406881](https://github.com/migrationsverket/midas/commit/7d55406881))
+- ⚠️ **useMessageFormatter:** remove `useMessageFormatter` since deprecation ([01d94a8d75](https://github.com/migrationsverket/midas/commit/01d94a8d75))
+- **button:** fix code documentation ([28974126de](https://github.com/migrationsverket/midas/commit/28974126de))
+- add npm provenance flag ([039f1daa0d](https://github.com/migrationsverket/midas/commit/039f1daa0d))
+- add new eslint rules ([#545](https://github.com/migrationsverket/midas/pull/545))
+- update version in eslint config ([93edc05f7c](https://github.com/migrationsverket/midas/commit/93edc05f7c))
+
+### 🧪 Tests updated
+
+- **button:** add await to expect tests ([6a72c8d05b](https://github.com/migrationsverket/midas/commit/6a72c8d05b))
+- **button:** add a test to stories ([0348794fc7](https://github.com/migrationsverket/midas/commit/0348794fc7))
+- **button:** add a test in primary story ([53f4fe042e](https://github.com/migrationsverket/midas/commit/53f4fe042e))
+- **docs:** add test baseline and chromatic tests ([57d6255477](https://github.com/migrationsverket/midas/commit/57d6255477))
+- **select:** fix the test ([f41535787b](https://github.com/migrationsverket/midas/commit/f41535787b))
+- **select:** add test to check the size ([2c692d9ea0](https://github.com/migrationsverket/midas/commit/2c692d9ea0))
+
+### ⚠️ Breaking Changes
+
+- ⚠️ **tokens:** rename tokens `blue140` & `blue170` and add new tokens `blue110`, `blue120`, rename `purple140` to `purple110` ([b79d586d53](https://github.com/migrationsverket/midas/commit/b79d586d53))
+- **skeleton:** variant `rectangular` is no longer available, use `rectangle` instead. Animation is now a boolean and the prop to use is `isAnimated`
+- **label:** label variants are no longer available, use component `Text` instead
+- **useMessageFormatter:** Adobe has deprecated this hook in favour of `useLocalizedStringFormatter`. Use that instead!
+- **theme:** use `supportBorderWarning` and `textWarning` instead
+- **table:** prop `narrow` is no longer available
+- **tabs:** `defaultSelected` no longer works, use `defaultSelectedKey` instead
+- **spinner:** prop `dark` no longer works, use `isOnColor` instead
+- **modal:** `ModalTrigger` and `Dialog` no longer works, use `DialogTrigger` and `Modal` instead
+- **accordion:** API now conforms to React Aria standard. Same behavior is accomplished using `allowsMultipleExpanded`
+- **button:** `size='small'` no longer has any effect on button size. Allowed sizes are `'medium' | 'large'`
+
+# 9.0.0 (2025-05-05)
 
 ### 🩹 Fixes
 
@@ -10,7 +125,7 @@
 
 - **toast:** fix local example in storybook ([#542](https://github.com/migrationsverket/midas/pull/542))
 
-## 8.3.0
+## 8.3.0 (2025-05-03)
 
 ### 🚀 Features
 
@@ -34,7 +149,7 @@
 
 - improvements to preview 💅 🔍 ✨ ([#530](https://github.com/migrationsverket/midas/pull/530))
 
-## 8.2.0
+## 8.2.0 (2025-05-01)
 
 ### 🚀 Features
 
@@ -52,7 +167,7 @@
 - **propstable:** add support for enums in table ([#511](https://github.com/migrationsverket/midas/pull/511))
 - **modal:** change arg types in storybook ([f9588f170b](https://github.com/migrationsverket/midas/commit/f9588f170b))
 
-## 8.1.0
+## 8.1.0 (2025-05-02)
 
 ### 🚀 Features
 
@@ -66,7 +181,7 @@
 - **select:** remove explicit size for indeterminate symbol ([5f805c134](https://github.com/migrationsverket/midas/commit/5f805c134))
 - **select:** change checkbox size to prevent disappearing border ([3ab520633](https://github.com/migrationsverket/midas/commit/3ab520633))
 
-# 8.0.0
+# 8.0.0 (2025-05-01)
 
 ### 🚀 Features
 
@@ -105,7 +220,7 @@
 - update link docs with new code and examples ([a25a2def3](https://github.com/migrationsverket/midas/commit/a25a2def3))
 - use markdown links ([f1fb5714b](https://github.com/migrationsverket/midas/commit/f1fb5714b))
 
-## 7.1.0
+## 7.1.0 (2025-05-01)
 
 ### 🚀 Features
 
@@ -117,11 +232,11 @@
 - **combobox:** fix background color to input ([997eac80b](https://github.com/migrationsverket/midas/commit/997eac80b))
 - **theme:** replace invalid text and border colors in dark mode ([3291a9cbd](https://github.com/migrationsverket/midas/commit/3291a9cbd))
 
-# 7.0.0
+# 7.0.0 (2025-05-01)
 
 This was a version bump only for components to align it with other projects, there were no code changes.
 
-## 6.2.0
+## 6.2.0 (2025-05-01)
 
 ### 🚀 Features
 
@@ -137,7 +252,7 @@ This was a version bump only for components to align it with other projects, the
 - **theme:** change the token value to icon secondary
 - **link-button:** fix secondary border and icon color in dark mode
 
-## 6.1.0
+## 6.1.0 (2025-05-01)
 
 ### 🚀 Features
 
@@ -148,13 +263,13 @@ This was a version bump only for components to align it with other projects, the
 - **textfield:** fix token on input value ([e79f935e3](https://github.com/migrationsverket/midas/commit/e79f935e3))
 - **link-button:** add pseudo-classes in CSS link-button ([#385](https://github.com/migrationsverket/midas/pull/385))
 
-## 6.0.1
+## 6.0.1 (2025-05-01)
 
 ### 🩹 Fixes
 
 - **select:** 🐛 Selected values doesn't match selected IDs
 
-# 6.0.0
+# 6.0.0 (2025-05-01)
 
 ### 🚀 Features
 
@@ -181,7 +296,7 @@ This was a version bump only for components to align it with other projects, the
 
 - **modal:** Use the new DialogTrigger and Modal instead of ModalTrigger and Dialog. New API will apply.
 
-## 5.0.1
+## 5.0.1 (2025-03-25)
 
 ### 🩹 Fixes
 

package/accordion/Accordion.d.ts

@@ -4,8 +4,6 @@ export declare const ACCORDION_TEST_ID = "accordion";
 interface MidasAccordion extends DisclosureGroupProps {
     /** Display either the larger contained variant or a smaller uncontained variant */
     variant?: 'uncontained' | 'contained';
-    /** @deprecated since v8.0.0 Use 'allowsMultipleExpanded' instead */
-    type?: 'single' | 'multiple';
 }
 /**
  * Accordions are used primarily to reduce the direct amount of information on a page and to sort it clearly.

package/accordion/AccordionItem.d.ts

@@ -9,6 +9,11 @@ interface MidasAccordionItem extends Omit<DisclosureProps, 'children'> {
     headingLevel?: HeadingProps['elementType'];
     /** Display an accordion item in different status states */
     type?: 'default' | 'success' | 'warning';
+    /**
+     * Adds a background element to the content, set to false for a transparent look
+     * @default true
+     **/
+    hasBackground?: boolean;
 }
 export declare const AccordionItem: React.FC<MidasAccordionItem>;
 export {};

package/button/Button.d.ts

@@ -1,5 +1,6 @@
 import { ButtonProps, ButtonRenderProps } from 'react-aria-components';
 import { LucideIcon } from 'lucide-react';
+import { Size } from '../common/types';
 import * as React from 'react';
 export interface MidasButtonProps {
     /**
@@ -14,17 +15,21 @@ export interface MidasButtonProps {
      * @default false
      */
     fullwidth?: boolean;
-    /** Choose between different button sizes */
-    /** @deprecated since v4.0.0 This variant will be replaced with a new scaling api accross all components. */
-    size?: 'small';
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     **/
+    size?: Size;
     /** Add an icon from lucide-react
      *
-     * @see {@link https://lucide.dev/icons/}
+     * @see {@link https://lucide.dev/icons/|Lucide}
      */
     icon?: LucideIcon;
-    /** Adjust icon size */
+    /**
+     * Adjust icon size
+     *  @default 20
+     * */
     iconSize?: number;
-    /** Display your icon on the left och right side of the button text */
+    /** Display the icon on the left or right side of the button text */
     iconPlacement?: 'left' | 'right';
     children?: React.ReactNode | ((values: ButtonRenderProps & {
         defaultChildren: React.ReactNode | undefined;

package/combobox/ComboBox.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { ComboBoxProps as AriaComboBoxProps, ListBoxItemProps, ValidationResult } from 'react-aria-components';
 import { Item, Section } from './types';
+import { Size } from '../common/types';
 export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children'> {
     label?: string;
     description?: string;
@@ -9,7 +10,11 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
     children: React.ReactNode | ((item: T) => React.ReactNode);
     placeholder?: string;
     errorPosition?: 'top' | 'bottom';
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     * */
+    size?: Size;
 }
-export declare function ComboBox<T extends object>({ label, description, errorMessage, children, items, className, errorPosition, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBox<T extends object>({ label, description, errorMessage, children, items, className, errorPosition, size, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function ComboBoxItem(props: ListBoxItemProps): import("react/jsx-runtime").JSX.Element;
 export declare function ComboBoxSelection(props: Section<Item>): import("react/jsx-runtime").JSX.Element;

package/common/types.d.ts

@@ -0,0 +1 @@
+export type Size = 'large' | 'medium';

package/date-field/DateField.d.ts

@@ -1,9 +1,14 @@
 import { DateFieldProps as AriaDateFieldProps, DateValue, ValidationResult } from 'react-aria-components';
+import { Size } from '../common/types';
 import * as React from 'react';
 export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
     errorPosition?: 'top' | 'bottom';
     label?: string;
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     * */
+    size?: Size;
 }
 export declare const DateField: React.FC<DateFieldProps>;

package/date-picker/DatePicker.d.ts

@@ -1,10 +1,15 @@
 import { DatePickerProps as AriaDatePickerProps, DateValue, ValidationResult } from 'react-aria-components';
+import { Size } from '../common/types';
 import * as React from 'react';
 interface DatePickerProps extends AriaDatePickerProps<DateValue> {
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
     errorPosition?: 'top' | 'bottom';
     label?: string;
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     * */
+    size?: Size;
 }
 export declare const DatePicker: React.FC<DatePickerProps>;
 export {};

package/date-picker/DatePickerInputField.d.ts

@@ -1,8 +1,10 @@
+import { Size } from '../common/types';
 import * as React from 'react';
 interface DatePickerInputFieldProps {
     children?: React.ReactNode;
     isDisabled?: boolean;
     isInvalid?: boolean;
+    size?: Size;
 }
 export declare const DatePickerInputField: React.FC<DatePickerInputFieldProps>;
 export {};

package/date-picker/DateRangePicker.d.ts

@@ -1,9 +1,14 @@
 import { DateRangePickerProps as AriaDateRangePickerProps, DateValue, ValidationResult } from 'react-aria-components';
+import { Size } from '../common/types';
 import * as React from 'react';
 export interface DateRangePickerProps extends AriaDateRangePickerProps<DateValue> {
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
     errorPosition?: 'top' | 'bottom';
     label?: string;
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     * */
+    size?: Size;
 }
 export declare const DateRangePicker: React.FC<DateRangePickerProps>;