@pexip/components 16.12.1 → 16.14.0

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # Changelog
 
+## 16.14.0
+
+### Minor Changes
+
+- ae7b35d: Adds `share` icon.
+- 4db949e: `AriaMenu`: Add props for placement and offset of the popover
+- bae1125: Always group page buttons when using `PaginationNavGrouped`
+- bae1125: Optional `totalPagesCount` (previously `pageLength`) in
+  `TablePagination`.
+- b3497ad: Introduces `BadgeCounter` variants - `info` and `notification`.
+
+  Default is `notification`
+
+- bae1125: Rename `pageLength` to `totalPageCount` for `TablePaginationNav`
+
+### Patch Changes
+
+- 9046f9d: `NumberStepInput` uses `name` prop to build testid.
+- f087818: Replaced title attribute of UserMenuDropContent by tooltip component
+  Added translation for settings button tooltip and settings button aria label
+  Added "endBottom" position to Tooltip
+- 53d90af: Introduced new drop down menu component based on React Aria
+  (https://react-spectrum.adobe.com/react-aria)
+- e2b4da2: @pexip/components Make Video component ref handle focus on video
+  element
+- ec6dac2: Update placholder text color
+- Updated dependencies [bfb8058]
+  - @pexip/utils@16.11.0
+  - @pexip/hooks@17.1.1
+  - @pexip/signal@16.7.0
+
+## 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

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

@@ -13,6 +13,7 @@ $base-button-variants: (
     'translucent',
     'bordered',
     'transparent',
+    'transparentAlternative',
     'text',
     'danger',
     'dangerBordered',
@@ -30,3 +31,4 @@ $base-text-variants: (
     'hidden',
     'warning'
 );
+$base-badge-counter-variants: ('info', 'notification');

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
+            }},`,
         );
     }