Merge branch 'master' into feat/yossi/usewizard-a-generic-hook-to-han…

…dle-logic-of-stepswizard-like-7525076173

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,3 +4,6 @@ Before we can review your submission, please fill the information below:
 Please describe the changes you're making. Include the motivation for these changes, any additional context, and the impact on the project. If your changes are related to any open issues, please link to them here. -->
 
 - [ ] I have read the [Contribution Guide](../packages/core/CONTRIBUTING.md) for this project.
+
+<!-- Please add the issue nubmer that this PR closes: -->
+Resolves #

.github/workflows/chromatic.yml

@@ -1,6 +1,11 @@
 name: Chromatic
 
-on: push
+on:
+  pull_request:
+    types: [opened, synchronize]
+  push:
+    branches:
+      - master
 
 jobs:
   build:

.github/workflows/test.yml

@@ -39,3 +39,29 @@ jobs:
         env:
           SINCE_FLAG: ${{ steps.determine-since-flag.outputs.since_flag }}
         run: yarn lerna run ${{ matrix.command }} $SINCE_FLAG
+
+  tests_e2e:
+    name: Run end-to-end tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Run Setup
+        uses: ./.github/actions/setup
+        with:
+          npm_token: ${{ secrets.npm_token }}
+      - id: determine-since-flag
+        uses: ./.github/actions/determine-lerna-since-flag
+      - uses: ./.github/actions/download-builds
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+      - name: Run tests
+        run: yarn lerna run test:e2e $SINCE_FLAG --scope "@vibe/testkit"
+      - uses: actions/upload-artifact@v4
+        if: ${{ always() }}
+        with:
+          name: test-results    
+          path: |
+            packages/testkit/reports
+            packages/testkit/test-results

.gitignore

@@ -12,4 +12,6 @@ dist
 coverage
 .scannerwork
 *.env
-.DS_Store
+.DS_Store
+packages/testkit/test-results
+packages/testkit/reports

packages/core/CHANGELOG.md

@@ -3,6 +3,173 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.142.1](https://github.com/mondaycom/vibe/compare/[email protected]@2.142.1) (2024-11-06)
+
+
+### Bug Fixes
+
+* **AvatarGroup:** avatar shrinking in counter tooltip ([#2575](https://github.com/mondaycom/vibe/issues/2575)) ([37befed](https://github.com/mondaycom/vibe/commit/37befed099aa0c211c9c07a7296d158485704b9a))
+
+
+
+
+
+# [2.142.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.142.0) (2024-10-31)
+
+
+### Features
+
+* **Clipboard:** new icon ([#2570](https://github.com/mondaycom/vibe/issues/2570)) ([da71c1b](https://github.com/mondaycom/vibe/commit/da71c1bc6ca23a5321b2ea6e177633da6d2e01cf))
+* **Forward:** new icon ([#2569](https://github.com/mondaycom/vibe/issues/2569)) ([2034fd5](https://github.com/mondaycom/vibe/commit/2034fd51e30e2c32425e0e06322739d3526c22eb))
+
+
+
+
+
+# [2.141.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.141.0) (2024-10-30)
+
+
+### Bug Fixes
+
+* **Table:** scroll handlers and menu handlers, fix double scroll ([#2564](https://github.com/mondaycom/vibe/issues/2564)) ([214350b](https://github.com/mondaycom/vibe/commit/214350b97fddc5d92a260a8e7b4acfebdcf8683f))
+
+
+### Features
+
+* **TableHeaderCell:** allow passing title as component ([#2563](https://github.com/mondaycom/vibe/issues/2563)) ([bd382b7](https://github.com/mondaycom/vibe/commit/bd382b7dadf719c4dfdfbc33b59e127babd1e42c))
+
+
+
+
+
+# [2.140.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.140.0) (2024-10-29)
+
+
+### Features
+
+* add aria-label to VirtualizedList ([#2558](https://github.com/mondaycom/vibe/issues/2558)) ([e1d5044](https://github.com/mondaycom/vibe/commit/e1d504423d9bce1c94d27d2ff141f61bbd7546b4))
+* **AttentionBox:** add prop for enter animation ([#2566](https://github.com/mondaycom/vibe/issues/2566)) ([15b20b1](https://github.com/mondaycom/vibe/commit/15b20b105d952f6db03136c23ccf369b8d2e6829))
+
+
+
+
+
+## [2.139.4](https://github.com/mondaycom/vibe/compare/[email protected]@2.139.4) (2024-10-21)
+
+
+### Bug Fixes
+
+* **Combobox:** restricted onclick on the disabled ([#2491](https://github.com/mondaycom/vibe/issues/2491)) ([9965476](https://github.com/mondaycom/vibe/commit/996547612af7a33e5dde95ba200ea23fa8ea0963))
+* Dropdown font broken ([#2551](https://github.com/mondaycom/vibe/issues/2551)) ([bca2c68](https://github.com/mondaycom/vibe/commit/bca2c681e622fbd7a6f8291df1c413cc8fc2083f))
+
+
+
+
+
+## [2.139.3](https://github.com/mondaycom/vibe/compare/[email protected]@2.139.3) (2024-10-10)
+
+
+### Bug Fixes
+
+* fix icons tsx ([#2487](https://github.com/mondaycom/vibe/issues/2487)) ([f53f259](https://github.com/mondaycom/vibe/commit/f53f259879ae36b08f060c6d1e32add02be3e649))
+
+
+
+
+
+## [2.139.2](https://github.com/mondaycom/vibe/compare/[email protected]@2.139.2) (2024-10-10)
+
+
+### Bug Fixes
+
+* Fix ellipsis clamp lines for SSR [prerelease] ([#2484](https://github.com/mondaycom/vibe/issues/2484)) ([0f2c618](https://github.com/mondaycom/vibe/commit/0f2c618ad89bf96a36421c1ca23eb6701aa0c0e1))
+
+
+
+
+
+## [2.139.1](https://github.com/mondaycom/vibe/compare/[email protected]@2.139.1) (2024-10-10)
+
+**Note:** Version bump only for package monday-ui-react-core
+
+
+
+
+
+# [2.139.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.139.0) (2024-10-09)
+
+
+### Features
+
+* add inputAriaLabel to Dropdown component ([#2466](https://github.com/mondaycom/vibe/issues/2466)) ([1cb3d1e](https://github.com/mondaycom/vibe/commit/1cb3d1eb7608abb575620eb1ba7acbe9e68a77f4))
+
+
+
+
+
+## [2.138.1](https://github.com/mondaycom/vibe/compare/[email protected]@2.138.1) (2024-10-08)
+
+
+### Bug Fixes
+
+* **ColorPickerClearButton:** button isn't clickable inside MenuItem ([#2464](https://github.com/mondaycom/vibe/issues/2464)) ([d6bc515](https://github.com/mondaycom/vibe/commit/d6bc51513d95db7db1c4dc8c81ed0a8282dc6990))
+
+
+
+
+
+# [2.138.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.138.0) (2024-10-06)
+
+
+### Features
+
+* SSR support fixes  ([#2458](https://github.com/mondaycom/vibe/issues/2458)) ([562da71](https://github.com/mondaycom/vibe/commit/562da71cfb984bf368ae2375f72504ec8c179db3))
+
+
+
+
+
+## [2.137.1](https://github.com/mondaycom/vibe/compare/[email protected]@2.137.1) (2024-10-06)
+
+
+### Bug Fixes
+
+* keep current drop shadow with stroke on dark theme ([#2451](https://github.com/mondaycom/vibe/issues/2451)) ([197fc6f](https://github.com/mondaycom/vibe/commit/197fc6fa38d3fb170f94755ba66416e7e27f55f3))
+
+
+
+
+
+# [2.137.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.137.0) (2024-10-01)
+
+
+### Features
+
+* **Dropdown:** add scroll handlers props ([#2447](https://github.com/mondaycom/vibe/issues/2447)) ([0f1277a](https://github.com/mondaycom/vibe/commit/0f1277a67b56b32943001d0fc16e1a1e133a64be))
+
+
+
+
+
+# [2.136.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.136.0) (2024-09-29)
+
+
+### Features
+
+* **Toast:** improve animation ([#2391](https://github.com/mondaycom/vibe/issues/2391)) ([968c852](https://github.com/mondaycom/vibe/commit/968c852bd640a45594d2da1b1a416a8f4aabe120))
+
+
+
+
+
+## [2.135.1](https://github.com/mondaycom/vibe/compare/[email protected]@2.135.1) (2024-09-29)
+
+**Note:** Version bump only for package monday-ui-react-core
+
+
+
+
+
 # [2.135.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.135.0) (2024-09-26)
 
 

packages/core/README.md

@@ -76,3 +76,17 @@ npm start
 ## Themes
 
 Theming is supported using CSS variables - for more info on theming please read the [theme guidelines](./THEME_README.md) file
+
+## SSR (Server Side Rendering)
+
+Components are using style injection on the client side (into <head> element)
+This is not usable on the server side.
+In order to get the required styles on the server side, you should initialize
+
+```javascript
+globalThis.injectedStyles = {};
+```
+
+in order to have each server side render component css inserted into the injectedStyles object
+each component will insert its css string under a unique key.
+Then you can join all the values into one string and add it under a <style> element

packages/core/chromatic.config.json

@@ -0,0 +1,6 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:62037c72e0e4d6004a9a450f",
+  "storybookBaseDir": "packages/core",
+  "zip": true
+}

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.135.0",
+  "version": "2.142.1",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",
@@ -108,10 +108,10 @@
     "classnames": "^2.3.2",
     "framer-motion": "^6.5.1",
     "lodash-es": "^4.17.21",
-    "monday-ui-style": "0.14.0",
+    "monday-ui-style": "0.16.0",
     "prop-types": "^15.8.1",
     "react-dates": "21.8.0",
-    "react-inlinesvg": "^3.0.1",
+    "react-inlinesvg": "^4.1.3",
     "react-is": "^16.9.0",
     "react-popper": "^2.3.0",
     "react-select": "^3.2.0",

packages/core/rollup/styleInject.ejs

@@ -1,21 +1,25 @@
 function styleInject(css) {
-    if(typeof document === 'undefined') return;
-    const head = document.head || document.getElementsByTagName('head')[0];
     const id = "<%= hashValue %>_<%= version %>";
-    const styleExists = head.querySelector("#" + id);
-
-    if(styleExists) return;
-
-    const style = document.createElement('style');
-    style.id = id;
-
-    if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-    } else {
-        head.appendChild(style);
+    if(typeof document !== 'undefined') {
+        const head = document.head || document.getElementsByTagName('head')[0];
+        const styleExists = head.querySelector("#" + id);
+
+        if(styleExists) return;
+
+        const style = document.createElement('style');
+        style.id = id;
+
+        if (head.firstChild) {
+            head.insertBefore(style, head.firstChild);
+        } else {
+            head.appendChild(style);
+        }
+
+        style.appendChild(document.createTextNode(css));
+    } else if (globalThis.injectedStyles) {
+        // support SSR environments
+        globalThis.injectedStyles[id] = css;
     }
-
-    style.appendChild(document.createTextNode(css));
 }
 
 styleInject(<%= cssVariableName %>);

packages/core/src/components/AttentionBox/AttentionBox.module.scss

@@ -1,3 +1,17 @@
+@keyframes entryAnimation {
+  0% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 .attentionBox {
   position: relative;
   padding: 12px var(--spacing-medium);
@@ -6,6 +20,10 @@
   max-width: 100%;
   height: fit-content;
 
+  &.entryAnimation {
+    animation: entryAnimation 200ms cubic-bezier(0.00, 0.00, 0.40, 1.00) forwards;
+  }
+
   // Overriding on primary icon color should be with bigger specificity than the original color
   & .closeIconWrapper .closeIcon {
     color: var(--primary-text-color);

packages/core/src/components/AttentionBox/AttentionBox.tsx

@@ -36,6 +36,8 @@ export interface AttentionBoxProps extends VibeComponentProps {
   onClose?: (event: React.MouseEvent) => void;
   compact?: boolean;
   closeButtonAriaLabel?: string;
+  /** Enables an entry animation when the component appears */
+  entryAnimation?: boolean;
 }
 
 const AttentionBox: React.FC<AttentionBoxProps> & {
@@ -59,7 +61,8 @@ const AttentionBox: React.FC<AttentionBoxProps> & {
   compact = false,
   id,
   "data-testid": dataTestId,
-  closeButtonAriaLabel = "Close"
+  closeButtonAriaLabel = "Close",
+  entryAnimation = false
 }) => {
   const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
 
@@ -71,7 +74,9 @@ const AttentionBox: React.FC<AttentionBoxProps> & {
 
   return (
     <aside
-      className={cx(styles.attentionBox, getStyle(styles, camelCase(`type-${type}`)), overrideClassName)}
+      className={cx(styles.attentionBox, getStyle(styles, camelCase(`type-${type}`)), overrideClassName, {
+        [styles.entryAnimation]: entryAnimation
+      })}
       role="alert"
       data-testid={dataTestId || getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)}
     >