Merge branch 'next-release'

teamleadercrm · Nov 14, 2023 · b1e35d6 · b1e35d6
2 parents ec6d2ab + 8221b58
commit b1e35d6
Show file tree

Hide file tree

Showing 72 changed files with 2,548 additions and 2,390 deletions.
diff --git a/.github/workflows/check-types.yaml b/.github/workflows/check-types.yaml
@@ -8,7 +8,7 @@ jobs:
     if: ${{ !contains(github.head_ref, 'hotfix/') && !contains(github.event.head_commit.message, 'hotfix/') }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - name: Check types
         run: |
           yarn install --silent --frozen-lockfile

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -6,10 +6,10 @@ jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
       - name: Install dependencies

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -34,7 +34,7 @@ jobs:
       env: production
     steps:
       - name: Check out code
-        uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - name: Set env
         run: cat env/${{ env.env }}/build.env >> $GITHUB_ENV
       - name: Configure AWS Credentials
@@ -49,7 +49,7 @@ jobs:
           aws configure set aws_access_key_id ${{ env.AWS_ACCESS_KEY_ID }} --profile ${{ env.AWS_PROFILE }}
           aws configure set aws_secret_access_key ${{ env.AWS_SECRET_ACCESS_KEY }} --profile ${{ env.AWS_PROFILE }}
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '16'
           cache: 'yarn'

diff --git a/.github/workflows/create-tag.yaml b/.github/workflows/create-tag.yaml
@@ -43,7 +43,7 @@ jobs:
         if: ${{ steps.contains_tag.outputs.retval != 'true' }}
       - name: Generate Changelog
         id: generate_changelog
-        uses: mikepenz/release-changelog-builder-action@v4.0.0
+        uses: mikepenz/release-changelog-builder-action@v4.1.0
         with:
           configuration: .github/generate-changelog-configuration.json
           token: ${{ steps.get_workflow_token.outputs.token }}

diff --git a/.github/workflows/lint-node.yaml b/.github/workflows/lint-node.yaml
@@ -18,9 +18,9 @@ jobs:
     if: ${{ !contains(github.head_ref, 'hotfix/') && !contains(github.event.head_commit.message, 'hotfix/') }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ inputs.node_version }}
           cache: 'yarn'

diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -18,7 +18,7 @@ jobs:
   lint-yaml:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - name: yaml lint
         run: |
           yamllint -d \

diff --git a/.github/workflows/reviewer-lottery.yaml b/.github/workflows/reviewer-lottery.yaml
@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ github.actor == 'dependabot[bot]' }}
     steps:
-      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - uses: uesteibar/reviewer-lottery@v3
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/test-node.yaml b/.github/workflows/test-node.yaml
@@ -18,9 +18,9 @@ jobs:
     if: ${{ !contains(github.head_ref, 'hotfix/') && !contains(github.event.head_commit.message, 'hotfix/') }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ inputs.node_version }}
           cache: 'yarn'

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,9 +8,75 @@
 
 ### Removed
 
+## [23.2.0] - 2023-11-14
+
+### Added
+
+`Dialog`: Support disabling footer buttons with a tooltip. ([@lorgan3](https://https://github.com/lorgan3) in [#2807](https://github.com/teamleadercrm/ui/pull/2807))
+
+## [23.1.0] - 2023-11-06
+
+### Changed
+
+- `WysiwygEditor`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ValidationText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `WarningText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `SuccessText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `HelpText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ErrorText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Monospaced`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Marker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Toggle`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ToastContainer`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Toast`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Tag`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `TabGroup`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `SplitButton`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `RadioButton`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ProgressTracker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Pagination`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `OverviewPage`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Message`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingHeading2`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingHeading1`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingMarker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingLockBadge`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingButtonGroup`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `LoadingBar`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `LabelValuePair`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Island`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `GridItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `EmptyState`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DetailPage`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DatePicker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DataGrid`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Counter`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Container`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Banner`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `AdvancedCollapsible`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingStatusLabel`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MenuItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingMenuItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Label`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Bullet`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+
+## [23.0.1] - 2023-10-30
+
+### Fixed
+
+- `Tooltip`: added missing `data-teamleader-ui="tooltip"` attribute ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2799](https://github.com/teamleadercrm/ui/pull/2799)`
+
+## [23.0.0] - 2023-10-30
+
+### Removed
+
+- `Tooltip`: removed `horizontal` and `vertical` positions from the `tooltipPosition` options. Tooltips will still render to the opposite side in case there is not enough space on the chosen position. ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2796](https://github.com/teamleadercrm/ui/pull/2796)`
+
+## [22.3.5] - 2023-10-18
+
 ### Fixed
 
-### Dependency updates
+`Select`: only create 1 select-overlay element, even if you run multiple instances of @teamleader/ui ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2788](https://github.com/teamleadercrm/ui/pull/2788)
 
 ## [22.3.4] - 2023-10-03
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "22.3.4",
+  "version": "23.2.0",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"
@@ -30,6 +30,7 @@
   "types": "./dist/types/index.d.ts",
   "dependencies": {
     "@babel/runtime": "^7.18.3",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@teamleader/ui-animations": "^0.0.3",
     "@teamleader/ui-colors": "^2.0.0",
     "@teamleader/ui-icons": "^2.1.0",
@@ -77,7 +78,7 @@
     "@storybook/addon-controls": "^7.0.27",
     "@storybook/addon-designs": "^7.0.0",
     "@storybook/addon-docs": "^7.0.27",
-    "@storybook/addon-mdx-gfm": "7.0.27",
+    "@storybook/addon-mdx-gfm": "7.5.1",
     "@storybook/addon-styling": "^1.3.2",
     "@storybook/addons": "7.0.27",
     "@storybook/react": "7.0.27",

diff --git a/src/components/advancedCollapsible/AdvancedCollapsible.tsx b/src/components/advancedCollapsible/AdvancedCollapsible.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, forwardRef, useState } from 'react';
 import { TextBody, Heading3 } from '../typography';
 import Icon from '../icon';
 import Box, { pickBoxProps } from '../box';
@@ -26,46 +26,47 @@ export interface AdvancedCollapsibleProps extends Omit<BoxProps, 'size'> {
   onChange?: (collapsed: boolean, event: React.MouseEvent) => void;
 }
 
-const AdvancedCollapsible: GenericComponent<AdvancedCollapsibleProps> = ({
-  children,
-  color = 'teal',
-  indent = true,
-  size = 'medium',
-  title,
-  defaultIsCollapsed = true,
-  onChange,
-  ...others
-}) => {
-  const [collapsed, setCollapsed] = useState(defaultIsCollapsed);
+const AdvancedCollapsible: GenericComponent<AdvancedCollapsibleProps> = forwardRef<
+  HTMLDivElement,
+  AdvancedCollapsibleProps
+>(
+  (
+    { children, color = 'teal', indent = true, size = 'medium', title, defaultIsCollapsed = true, onChange, ...others },
+    ref,
+  ) => {
+    const [collapsed, setCollapsed] = useState(defaultIsCollapsed);
 
-  const boxProps = pickBoxProps(others);
-  const TitleElement = size === 'large' ? Heading3 : TextBody;
+    const boxProps = pickBoxProps(others);
+    const TitleElement = size === 'large' ? Heading3 : TextBody;
 
-  const handleTitleClick = (event: React.MouseEvent) => {
-    if (onChange) {
-      onChange(!collapsed, event);
-    }
+    const handleTitleClick = (event: React.MouseEvent) => {
+      if (onChange) {
+        onChange(!collapsed, event);
+      }
 
-    setCollapsed(!collapsed);
-  };
+      setCollapsed(!collapsed);
+    };
 
-  return (
-    <Box data-teamleader-ui="advanced-collapsible">
-      <Box className={theme['title']} display="flex" alignItems="center" onClick={handleTitleClick} {...boxProps}>
-        <Icon color={color} tint="darkest">
-          {collapsed ? <IconChevronRightSmallOutline /> : <IconChevronDownSmallOutline />}
-        </Icon>
-        <TitleElement color={color} marginLeft={2} tint="darkest">
-          {size === 'medium' ? <strong>{title}</strong> : title}
-        </TitleElement>
-      </Box>
-      {!collapsed && (
-        <Box {...(indent && { className: theme['children-indent'] })} marginTop={2}>
-          {children}
+    return (
+      <Box data-teamleader-ui="advanced-collapsible" ref={ref}>
+        <Box className={theme['title']} display="flex" alignItems="center" onClick={handleTitleClick} {...boxProps}>
+          <Icon color={color} tint="darkest">
+            {collapsed ? <IconChevronRightSmallOutline /> : <IconChevronDownSmallOutline />}
+          </Icon>
+          <TitleElement color={color} marginLeft={2} tint="darkest">
+            {size === 'medium' ? <strong>{title}</strong> : title}
+          </TitleElement>
         </Box>
-      )}
-    </Box>
-  );
-};
+        {!collapsed && (
+          <Box {...(indent && { className: theme['children-indent'] })} marginTop={2}>
+            {children}
+          </Box>
+        )}
+      </Box>
+    );
+  },
+);
+
+AdvancedCollapsible.displayName = 'AdvancedCollapsible';
 
 export default AdvancedCollapsible;
diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import cx from 'classnames';
 
 import Box, { BoxProps, Padding } from '../box';
@@ -30,43 +30,42 @@ export interface BannerProps extends Omit<BoxProps, 'size'> {
   size?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
 }
 
-const Banner = ({
-  children,
-  className,
-  color = 'white',
-  size = 'medium',
-  icon,
-  onClose,
-  fullWidth,
-  ...others
-}: BannerProps) => {
-  const classNames = cx(className, theme[color], theme['banner'], { [theme['banner_full-width']]: fullWidth });
+const Banner = forwardRef<HTMLElement, BannerProps>(
+  (
+    { children, className, color = 'white', size = 'medium', icon, onClose, fullWidth, ...others }: BannerProps,
+    ref,
+  ) => {
+    const classNames = cx(className, theme[color], theme['banner'], { [theme['banner_full-width']]: fullWidth });
 
-  return (
-    <Box
-      data-teamleader-ui="banner"
-      className={classNames}
-      color={color}
-      padding={PADDINGS[size]}
-      borderRadius={fullWidth ? 'square' : 'rounded'}
-      {...others}
-    >
-      <div className={theme['inner']}>
-        {icon && <span className={theme['icon']}>{icon}</span>}
-        <Box flex={1} element="span" paddingRight={onClose && 7}>
-          {children}
-        </Box>
-        {onClose && (
-          <IconButton
-            className={theme['close-button']}
-            icon={<IconCloseMediumOutline />}
-            color={color === 'white' ? 'neutral' : color}
-            onClick={onClose}
-          />
-        )}
-      </div>
-    </Box>
-  );
-};
+    return (
+      <Box
+        data-teamleader-ui="banner"
+        className={classNames}
+        color={color}
+        padding={PADDINGS[size]}
+        borderRadius={fullWidth ? 'square' : 'rounded'}
+        {...others}
+        ref={ref}
+      >
+        <div className={theme['inner']}>
+          {icon && <span className={theme['icon']}>{icon}</span>}
+          <Box flex={1} element="span" paddingRight={onClose && 7}>
+            {children}
+          </Box>
+          {onClose && (
+            <IconButton
+              className={theme['close-button']}
+              icon={<IconCloseMediumOutline />}
+              color={color === 'white' ? 'neutral' : color}
+              onClick={onClose}
+            />
+          )}
+        </div>
+      </Box>
+    );
+  },
+);
+
+Banner.displayName = 'Banner';
 
 export default Banner;