@midas-ds/components 8.3.0 → 10.0.0

package/CHANGELOG.md

@@ -1,4 +1,93 @@
-## 8.3.0
+# 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
+
+- **info-banner:** add correct line-height ([#540](https://github.com/migrationsverket/midas/pull/540))
+- **grid:** prevent midas classnames to get overwritten ([#541](https://github.com/migrationsverket/midas/pull/541))
+- **textfield:** merge textfield and input/textarea native dom props ([#499](https://github.com/migrationsverket/midas/pull/499))
+
+### Documentation Changes
+
+- **toast:** fix local example in storybook ([#542](https://github.com/migrationsverket/midas/pull/542))
+
+## 8.3.0 (2025-05-03)
 
 ### 🚀 Features
 
@@ -22,7 +111,7 @@
 
 - improvements to preview 💅 🔍 ✨ ([#530](https://github.com/migrationsverket/midas/pull/530))
 
-## 8.2.0
+## 8.2.0 (2025-05-01)
 
 ### 🚀 Features
 
@@ -40,7 +129,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
 
@@ -54,7 +143,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
 
@@ -93,7 +182,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
 
@@ -105,11 +194,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
 
@@ -125,7 +214,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
 
@@ -136,13 +225,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
 
@@ -169,7 +258,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/README.md

@@ -2,7 +2,7 @@
 
 React component library implementing Midas Design System (Migrationsverket)
 
------
+---
 
 ## Getting started
 
@@ -11,6 +11,7 @@ Add `@midas-ds/components` to your project:
 ```
 npm install @midas-ds/components
 ```
+
 And then import the components you need:
 
 ```
@@ -19,7 +20,6 @@ import {Button, Checkbox, etc} from '@midas-ds/components'
 
 ## Documentation
 
-* See the full design system documentation on [Midas](https://designsystem.migrationsverket.se/) (Swedish).
-
-* Component API documentation on [Storybook](https://designsystem.migrationsverket.se/storybook/).
+- See the full design system documentation on [Midas](https://designsystem.migrationsverket.se/) (Swedish).
 
+- Component API documentation on [Storybook](https://main--6810d578d5507438df0f0d22.chromatic.com).

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/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>;