Merge branch 'master' into layers

.github/workflows/prerelease.yml

@@ -1,69 +1,68 @@
-# This workflow will ensure all PRs are labeled so we can later create releases
-
 name: Prerelease
 
 on:
-  - push
-  - workflow_dispatch
+  push:
+    branches-ignore:
+      - "master"
 
 jobs:
   prerelease:
-    if: "github.event_name == 'workflow_dispatch' || contains(github.event.head_commit.message, '[prerelease]')"
+    if: "contains(github.event.head_commit.message, '[prerelease]')"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: ./.github/actions/setup
+      - name: Run Setup
+        uses: ./.github/actions/setup
         with:
-          npm_token: ${{secrets.npm_token}}
+          npm_token: ${{ secrets.npm_token }}
       - uses: ./.github/actions/git-creds
       - name: Check if there are changed packages
-        id: changed-packages
         run: |
           changed_packages=$(yarn -s lerna ls --since=origin/master --json --loglevel=error)
-          [[ $changed_packages = "[]" ]] && echo "No packages changed in this branch" && exit 1 || echo "Continuing to prerelease"
+          [[ $changed_packages = "[]" ]] && echo "Skipping prerelease. Nothing to prerelease as Lerna didn't detect any changes." && exit 1 || echo "Changed detected. Continuing to prerelease" && echo "$changed_packages"
       - name: Build all affected packages
-        run: yarn lerna run build --since=origin/master
-      - name: Generate prerelease prefix
-        run: |
-          normalized_branch_name=$(git rev-parse --abbrev-ref HEAD | tr -dc '[:alnum:]\n\r' | tr '[:upper:]' '[:lower:]')
-          echo "BRANCH=$normalized_branch_name" >> $GITHUB_ENV
+        run: yarn lerna run build --since=origin/master --include-dependencies
       - name: Generate new versions
-        run: yarn lerna version --exact --conventional-commits --conventional-prerelease --no-changelog --no-push --preid $BRANCH -y
+        id: generate-versions
+        run: |
+          preid=${{ github.ref_name }}
+          normalized_pre_id=$(echo "$preid" | tr -dc '[:alnum:]\n\r' | tr '[:upper:]' '[:lower:]')
+
+          full_output=$(yarn lerna version --exact --conventional-commits --conventional-prerelease --json --no-changelog --no-push --preid "$normalized_pre_id" -y)
+
+          # extract only the JSON portion from the full output, excluding yarn logs
+          json_output=$(echo "$full_output" | awk '/^\[/{p=1} p; /\]/{p=0}' )
+
+          echo 'new_versions<<EOF' >> $GITHUB_OUTPUT
+          echo "$json_output" >> $GITHUB_OUTPUT
+          echo 'EOF' >> $GITHUB_OUTPUT
       - run: yarn config set registry https://registry.npmjs.org/
       - name: Setup .npmrc for publish
         run: npm set "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN"
         env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
-      - run: npm whoami
+          NODE_AUTH_TOKEN: ${{ secrets.npm_token }}
       - name: Publish new versions
-        run: yarn lerna publish from-package --dist-tag $BRANCH -y
+        run: yarn lerna publish from-package --dist-tag prerelease -y
       - name: Get current PR id
-        uses: 8BitJonny/gh-get-current-pr@2.2.0
+        uses: 8BitJonny/gh-get-current-pr@3.0.0
         id: PR
-        if: success()
-      - name: Create comment with prerelease version details
-        if: success()
-        uses: peter-evans/create-or-update-comment@v1
+      - name: Prepare PR comment
+        id: prepare-comment
         env:
-          BRANCH: ${{ github.ref_name }}
-        with:
-          issue-number: ${{ steps.PR.outputs.number }}
-          body: |
-            A new prerelease version of this PR has been published! 🎉
+          json_data: ${{ steps.generate-versions.outputs.new_versions }}
+        run: |
+          echo 'comment_body<<EOF' >> $GITHUB_OUTPUT
 
-            To install this prerelease version, run the following command in your terminal with any one of the packages changed in this PR:
-            ```
-            npm i <package_name>@${{ env.BRANCH }}
-            ```
+          echo "A new prerelease version of this PR has been published! 🎉" >> $GITHUB_OUTPUT
+          echo "To install this prerelease version, run the following command in your terminal with any one of the packages changed in this PR:" >> $GITHUB_OUTPUT
 
-            Or:
-            ```
-            yarn add <package_name>@${{ env.BRANCH }}
-            ```
+          echo "$json_data" | jq -r '.[] | "\nTo update `\(.name)`:\n```\nyarn add \(.name)@\(.newVersion)\n```\nOr with npm:\n```\nnpm i \(.name)@\(.newVersion)\n```\n"' >> $GITHUB_OUTPUT
 
-            For example:
-            ```
-            yarn add monday-ui-react-core@${{ env.BRANCH }}
-            ```
+          echo 'EOF' >> $GITHUB_OUTPUT
+      - name: Create comment with prerelease version details
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          issue-number: ${{ steps.PR.outputs.number }}
+          body: ${{ steps.prepare-comment.outputs.comment_body }}

.github/workflows/publish-storybook.yml

@@ -14,13 +14,13 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - name: Run Setup
+        uses: ./.github/actions/setup
         with:
-          node-version-file: ".nvmrc"
+          npm_token: ${{ secrets.npm_token }}
       - name: Build & deploy Storybooks to GitHub Pages
         run: |
-          yarn
-          yarn lerna run build --since --include-dependencies
+          yarn lerna run build --include-dependencies
           yarn lerna run --scope monday-ui-react-core build-storybook
           yarn lerna run --scope monday-ui-style build-storybook
           cd packages/core/static_storybook

packages/core/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.94.0](https://github.com/mondaycom/monday-ui-react-core/compare/[email protected]@2.94.0) (2024-03-05)
+
+
+### Bug Fixes
+
+* **TableHeaderCell:** change hover color ([#1888](https://github.com/mondaycom/monday-ui-react-core/issues/1888)) ([c057a2e](https://github.com/mondaycom/monday-ui-react-core/commit/c057a2e83d2d3fb62c05e29ab768f44a77045fe9))
+
+
+### Features
+
+* **Flex:** new align's value - baseline ([#1989](https://github.com/mondaycom/monday-ui-react-core/issues/1989)) ([224be04](https://github.com/mondaycom/monday-ui-react-core/commit/224be042e0265740d174f995e290f3cefa36ed1b))
+
+
+
+
+
 # [2.93.0](https://github.com/mondaycom/monday-ui-react-core/compare/[email protected]@2.93.0) (2024-02-28)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.93.0",
+  "version": "2.94.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",

packages/core/src/components/Button/Button.tsx

@@ -71,6 +71,10 @@ export interface ButtonProps extends VibeComponentProps {
   /** aria controls - receives id for the controlled region */
   ariaControls?: string;
   "aria-describedby"?: AriaAttributes["aria-describedby"];
+  /**
+   * aria to be used for screen reader to know if the button is hidden
+   */
+  "aria-hidden"?: AriaAttributes["aria-hidden"];
   /** On Button Focus callback */
   onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   /** On Button Blur callback */
@@ -136,6 +140,7 @@ const Button: VibeComponent<ButtonProps, unknown> & {
       ariaExpanded,
       ariaControls,
       "aria-describedby": ariaDescribedBy,
+      "aria-hidden": ariaHidden,
       blurOnMouseUp,
       dataTestId: backwardCompatabilityDataTestId,
       "data-testid": dataTestId,
@@ -250,7 +255,7 @@ const Button: VibeComponent<ButtonProps, unknown> & {
         id,
         onFocus,
         onBlur,
-        tabIndex: disabled ? -1 : tabIndex,
+        tabIndex: disabled || ariaHidden ? -1 : tabIndex,
         "data-testid": overrideDataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),
         onMouseDown: onMouseDownClicked,
         "aria-disabled": disabled,
@@ -260,7 +265,8 @@ const Button: VibeComponent<ButtonProps, unknown> & {
         "aria-haspopup": ariaHasPopup,
         "aria-expanded": ariaExpanded,
         "aria-controls": ariaControls,
-        "aria-describedby": ariaDescribedBy
+        "aria-describedby": ariaDescribedBy,
+        "aria-hidden": ariaHidden
       };
       return props;
     }, [
@@ -284,7 +290,8 @@ const Button: VibeComponent<ButtonProps, unknown> & {
       ariaHasPopup,
       ariaExpanded,
       ariaControls,
-      ariaDescribedBy
+      ariaDescribedBy,
+      ariaHidden
     ]);
 
     const leftIconSize = useMemo(() => {

packages/core/src/components/Button/__tests__/button.jest.js

@@ -1,33 +1,30 @@
 import React from "react";
 import { render, fireEvent, cleanup, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
 import Button from "../Button";
 
 const text = "Click Me!";
-const className = "test-class";
-
-function renderComponent(props) {
-  return render(<Button {...props}>{text}</Button>);
-}
-
-describe("<Buttoon />", () => {
-  let clickActionStub;
-  let onMouseDownStub;
-  let buttonComponent;
-
-  beforeEach(() => {
-    clickActionStub = jest.fn();
-    onMouseDownStub = jest.fn();
-    buttonComponent = render(
-      <Button className={className} onClick={clickActionStub} onMouseDown={onMouseDownStub}>
-        {text}
-      </Button>
-    );
-  });
 
+describe("<Button />", () => {
   afterEach(() => {
     cleanup();
   });
+
   describe("click", () => {
+    let clickActionStub;
+    let onMouseDownStub;
+    let buttonComponent;
+
+    beforeEach(() => {
+      clickActionStub = jest.fn();
+      onMouseDownStub = jest.fn();
+      buttonComponent = render(
+        <Button onClick={clickActionStub} onMouseDown={onMouseDownStub}>
+          {text}
+        </Button>
+      );
+    });
+
     it("should call the click callback when clicked", () => {
       const { getByText } = buttonComponent;
       fireEvent.click(getByText(text));
@@ -99,17 +96,19 @@ describe("<Buttoon />", () => {
 
   it("should call on blur", () => {
     const onBlur = jest.fn();
-    cleanup();
-    const { getByText } = renderComponent({ onBlur });
+    const { getByText } = render(<Button onBlur={onBlur}>{text}</Button>);
     const button = getByText(text);
     fireEvent.blur(button);
     expect(onBlur.mock.calls.length).toEqual(1);
   });
 
   it("should call do blur on mouseup", () => {
     const onBlur = jest.fn();
-    cleanup();
-    const { getByText } = renderComponent({ onBlur, blurOnMouseUp: false });
+    const { getByText } = render(
+      <Button onBlur={onBlur} blurOnMouseUp={false}>
+        {text}
+      </Button>
+    );
     const button = getByText(text);
     fireEvent.focus(button);
     fireEvent.mouseUp(button);
@@ -118,43 +117,56 @@ describe("<Buttoon />", () => {
 
   it("should call on focus", () => {
     const onFocus = jest.fn();
-    cleanup();
-    const { getByText } = renderComponent({ onFocus });
+    const { getByText } = render(<Button onFocus={onFocus}>{text}</Button>);
     const button = getByText(text);
     fireEvent.focus(button);
     expect(onFocus.mock.calls.length).toEqual(1);
   });
 
   describe("mouse down", () => {
+    const onClick = jest.fn();
     it("should call the click callback when clicked", () => {
-      const { getByText } = buttonComponent;
+      const { getByText } = render(<Button onClick={onClick}>{text}</Button>);
       fireEvent.mouseDown(getByText(text));
-      expect(clickActionStub.mock.calls.length).toEqual(0);
+      expect(onClick).not.toBeCalled();
     });
 
     it("should call mouse down callback", () => {
-      const { getByText, rerender } = buttonComponent;
       const onMouseDown = jest.fn();
-      rerender(
-        <Button onClick={clickActionStub} onMouseDown={onMouseDown}>
+      const { getByText } = render(
+        <Button onClick={onClick} onMouseDown={onMouseDown}>
           {text}
         </Button>
       );
       fireEvent.mouseDown(getByText(text));
       expect(onMouseDown.mock.calls.length).toEqual(1);
     });
   });
+
   describe("a11y", () => {
     it("Aria label should be connected to the button", () => {
       const ariaLabel = "Icon Name";
+      const onClick = jest.fn();
       const { getByLabelText } = render(
-        <Button ariaLabel={ariaLabel} className={className} onClick={clickActionStub} onMouseDown={onMouseDownStub}>
+        <Button ariaLabel={ariaLabel} onClick={onClick}>
           {text}
         </Button>
       );
       const buttonElement = getByLabelText(ariaLabel);
       fireEvent.click(buttonElement);
-      expect(clickActionStub.mock.calls.length).toEqual(1);
+      expect(onClick.mock.calls.length).toEqual(1);
+    });
+
+    it("should apply aria-hidden attribute to button", () => {
+      const { getByRole } = render(<Button aria-hidden>{text}</Button>);
+      const buttonElement = getByRole("button", { hidden: true });
+      expect(buttonElement).toHaveAttribute("aria-hidden", "true");
+    });
+
+    it("should not apply aria-hidden attribute to button", () => {
+      const { getByRole } = render(<Button>{text}</Button>);
+      const buttonElement = getByRole("button");
+      expect(buttonElement).not.toHaveAttribute("aria-hidden");
     });
   });
 });

packages/core/src/components/IconButton/IconButton.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Fragment, useMemo, useRef } from "react";
+import React, { AriaAttributes, forwardRef, Fragment, useMemo, useRef } from "react";
 import cx from "classnames";
 import { noop as NOOP } from "lodash-es";
 import useMergeRef from "../../hooks/useMergeRef";
@@ -43,6 +43,10 @@ export interface IconButtonProps extends VibeComponentProps {
    * a11y property to be added, used for screen reader to know if the button is expanded
    */
   ariaExpanded?: boolean;
+  /**
+   * a11y property to be added, used for screen reader to know if the button is hidden
+   */
+  "aria-hidden"?: AriaAttributes["aria-hidden"];
   /**
    * Size of the icon
    */
@@ -101,6 +105,7 @@ const IconButton: VibeComponent<IconButtonProps> & {
       tooltipContent,
       ariaLabel,
       ariaExpanded,
+      "aria-hidden": ariaHidden,
       hideTooltip = false,
       kind = IconButton.kinds.TERTIARY,
       active,
@@ -183,6 +188,7 @@ const IconButton: VibeComponent<IconButtonProps> & {
             kind={kind}
             ariaLabel={buttonAriaLabel}
             ariaExpanded={ariaExpanded}
+            aria-hidden={ariaHidden}
             ref={mergedRef}
             id={id}
             data-testid={overrideDataTestId || getTestId(ComponentDefaultTestId.ICON_BUTTON, id)}