@pexip/components 16.12.0 → 16.13.0

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # Changelog
 
+## 16.13.0
+
+### Minor Changes
+
+- fec1c90: Format following Prettier update
+- fb30f43: Adds optional `onContentVisibilityChange` prop to
+  UserMenuDropContent.
+- ec134d1: Node.js and Storybook upgrade and migration
+- fb398e1: Modals can be draggable
+- a69e59d: Add optional prop `flexDirection` to the `DropContent` component
+- a595c96: Update webapp3 product name from "Pexip Connect for Web" to "Pexip"
+
+### Patch Changes
+
+- 5707670: Give NotificationTooltip component shouldCloseOnOutsideClick prop, if
+  true then clicking outside the tooltip will close it
+- c26a496: Accessibility tweaks
+- c1caa26: Update types for `ConfirmationModal`
+- 744444c: tweak Scrim z-index values
+- a4de0e2: make all other steps inactive in MultistepIndicator reducer's
+  activate-step action, there should only be one active step at a time
+- f149c11: Add z-index to the modal wrapper
+- 7d81303: Tweak class names
+- e13034a: - Storybook upgrade followup
+
+  - `UserMenuDropContent` - removes border
+
+- c1caa26: Pass `className` in `Panel` component
+- 68d9813: migrate Tooltip to react-aria
+  https://react-spectrum.adobe.com/react-aria/
+- bb91862: Adjusts `BadgeCounter` style.
+- 9ef9970: Add transparentAlternative Button variant, add using medium value on
+  Icon size prop
+- Updated dependencies [4a1908a]
+- Updated dependencies [ec134d1]
+- Updated dependencies [24fe7e1]
+  - @pexip/signal@16.7.0
+  - @pexip/hooks@17.1.0
+  - @pexip/utils@16.10.0
+
+## 16.12.1
+
+### Patch Changes
+
+- de0a150e: Typo fix for TagList story
+- 8d493614: add testid to BadgeCounter
+- a9a49f7dce: Fix zero pages calculation in TablePagination.
+- f2f106c3: ### add auto scrolling support for drag and drop
+
+  - `Draggable` allows an optional `scrollElementRef` that is used to to detect
+    the need of auto scrolling.
+    - Scrolling speed can be set by `scrollTimer` (default 30 ms).
+    - Scroll offset per "scroll step" for auto scrolling can be set by
+      `scrollOffset` (default 10 px).
+  - `pointerCapture` can be activated for dragged element by `pointerCapture`
+    property (default false).
+  - `Draggable` allows optional "lock style". Which means the the drag direction
+    can be locked horizontal or vertical. That can be set by `LockStyle`
+    property. (default `LockStyle.NONE`)
+  - `Panel` allows to set the overflow to hidden by `overflowHidden` property.
+  - `Panel` suppports a ref to the scrollElement by `scrollElemenRef` property.
+
+- 96f3ce8802: Typescript and tests updates after `yarn.lock` file maintenance
+- Updated dependencies [7b29d953]
+  - @pexip/utils@16.9.0
+  - @pexip/hooks@17.0.1
+  - @pexip/signal@16.6.0
+
 ## 16.12.0
 
 ### Minor Changes

package/design-tokens/base/variants.variables.scss

@@ -13,6 +13,7 @@ $base-button-variants: (
     'translucent',
     'bordered',
     'transparent',
+    'transparentAlternative',
     'text',
     'danger',
     'dangerBordered',

package/design-tokens/build-scripts/generate-icons.mjs

@@ -53,6 +53,7 @@ async function generate(meta) {
         'export interface IconSource {',
         "   size16: React.FC<React.ComponentProps<'svg'>>;",
         "   size24: React.FC<React.ComponentProps<'svg'>>;",
+        "   size32: React.FC<React.ComponentProps<'svg'>>;",
         '}',
         '',
         'export interface IconCollection {',
@@ -62,6 +63,7 @@ async function generate(meta) {
     for (const [name, icon] of sortedCollection) {
         const tiny = icon.size16;
         const small = icon.size24;
+        const medium = icon.size32;
         if (tiny) {
             await generateSvg(tiny);
             iconImports.push(
@@ -76,12 +78,23 @@ async function generate(meta) {
                 `import ${small.pascalName} from './icons/${small.iconName}.svg';`,
             );
         }
+        if (medium) {
+            await generateSvg(medium);
+            iconImports.push(
+                0,
+                `import ${medium.pascalName} from './icons/${medium.iconName}.svg';`,
+            );
+        }
         iconImports.push(1, `   ${name}: IconSource;`);
         iconImports.push(
             2,
             `${name}: {size16: ${
-                tiny?.pascalName ?? small.pascalName
-            }, size24: ${small.pascalName}},`,
+                tiny?.pascalName ?? small?.pascalName ?? medium?.pascalName
+            }, size24: ${
+                small?.pascalName ?? medium?.pascalName ?? tiny?.pascalName
+            }, size32: ${
+                medium?.pascalName ?? small?.pascalName ?? tiny?.pascalName
+            }},`,
         );
     }