From 162a77d3c734f7833772e5567222de5698108356 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 17 Nov 2024 15:24:43 +0200 Subject: [PATCH 01/32] =?UTF-8?q?fix(TextArea):=20don't=20show=20the=20hel?= =?UTF-8?q?p=20section=20if=20no=20help=20text=20or=20char=20co=E2=80=A6?= =?UTF-8?q?=20(#2590)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/src/components/TextArea/TextArea.tsx | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/core/src/components/TextArea/TextArea.tsx b/packages/core/src/components/TextArea/TextArea.tsx index 495f0ff01f..a75c3b175d 100644 --- a/packages/core/src/components/TextArea/TextArea.tsx +++ b/packages/core/src/components/TextArea/TextArea.tsx @@ -92,22 +92,24 @@ const TextArea = forwardRef( aria-describedby={ariaDescribedby} onChange={handleOnChange} /> - - {helpText && ( - - {helpText} - - )} - {showCharCount && ( - <> - - {characterCount} - {typeof maxLength === "number" && `/${maxLength}`} + {(showCharCount || helpText) && ( + + {helpText && ( + + {helpText} - - - )} - + )} + {showCharCount && ( + <> + + {characterCount} + {typeof maxLength === "number" && `/${maxLength}`} + + + + )} + + )} ); } From 1e34a3cff3ee9d1be3d62643258fbca20a2bed83 Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Sun, 17 Nov 2024 17:16:40 +0200 Subject: [PATCH 02/32] feat(PinFull): new icon (#2589) --- .../components/Icon/Icons/components/PinFull.tsx | 16 ++++++++++++++++ packages/core/src/components/Icon/Icons/index.ts | 1 + packages/style/src/Icons/PinFull.svg | 3 +++ packages/style/src/Icons/iconsMetaData.js | 16 ++++++++++++---- 4 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 packages/core/src/components/Icon/Icons/components/PinFull.tsx create mode 100644 packages/style/src/Icons/PinFull.svg diff --git a/packages/core/src/components/Icon/Icons/components/PinFull.tsx b/packages/core/src/components/Icon/Icons/components/PinFull.tsx new file mode 100644 index 0000000000..9fd5ed17f0 --- /dev/null +++ b/packages/core/src/components/Icon/Icons/components/PinFull.tsx @@ -0,0 +1,16 @@ +/* eslint-disable */ +/* tslint:disable */ +import * as React from 'react'; +export interface PinFullProps extends React.SVGAttributes { +size?: string | number; +} +const PinFull: React.FC = ({size, ...props}) => ( + + + +); +PinFull.displayName = 'PinFull'; +export default PinFull; +/* tslint:enable */ +/* eslint-enable */ diff --git a/packages/core/src/components/Icon/Icons/index.ts b/packages/core/src/components/Icon/Icons/index.ts index 0b1555d1c0..9effd13875 100644 --- a/packages/core/src/components/Icon/Icons/index.ts +++ b/packages/core/src/components/Icon/Icons/index.ts @@ -180,6 +180,7 @@ export {default as Pause} from './components/Pause'; export {default as Person} from './components/Person'; export {default as PersonRound} from './components/PersonRound'; export {default as Pin} from './components/Pin'; +export {default as PinFull} from './components/PinFull'; export {default as Placeholder} from './components/Placeholder'; export {default as Play} from './components/Play'; export {default as Print} from './components/Print'; diff --git a/packages/style/src/Icons/PinFull.svg b/packages/style/src/Icons/PinFull.svg new file mode 100644 index 0000000000..19cc3d9c3a --- /dev/null +++ b/packages/style/src/Icons/PinFull.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/style/src/Icons/iconsMetaData.js b/packages/style/src/Icons/iconsMetaData.js index 53371ff016..790d30ce80 100644 --- a/packages/style/src/Icons/iconsMetaData.js +++ b/packages/style/src/Icons/iconsMetaData.js @@ -5,10 +5,18 @@ export const iconsMetaData = [ // DO NOT REMOVE THIS FOLLOWING LINE! // plop_marker:icon_metadata { - name: "ThumbsDown", - file: "ThumbsDown.svg", - description: "Meant to indicate dislike in intake forms and feedback buttons. Can come as a supplement to thumbs up.", - tags: "Thumbs, Down, Dislike, Feedback" + name: "PinFull", + file: "PinFull.svg", + description: "Use to mark item as pinned.", + tags: "Pinned, Pinning" + }, + + { + name: "ThumbsDown", + file: "ThumbsDown.svg", + description: + "Meant to indicate dislike in intake forms and feedback buttons. Can come as a supplement to thumbs up.", + tags: "Thumbs, Down, Dislike, Feedback" }, { From fbcb99f257b624ee7a64eb270c30292b25f6e2ef Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Sun, 17 Nov 2024 19:19:46 +0200 Subject: [PATCH 03/32] fix(WhatsNew): update icon (#2592) --- .../__tests__/__snapshots__/Button.snapshot.test.tsx.snap | 6 ++---- .../core/src/components/Icon/Icons/components/WhatsNew.tsx | 4 ++-- packages/style/src/Icons/WhatsNew.svg | 4 ++-- packages/style/src/Icons/iconsMetaData.js | 2 +- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/core/src/components/Button/__tests__/__snapshots__/Button.snapshot.test.tsx.snap b/packages/core/src/components/Button/__tests__/__snapshots__/Button.snapshot.test.tsx.snap index 28c0139270..7c1f7ee691 100644 --- a/packages/core/src/components/Button/__tests__/__snapshots__/Button.snapshot.test.tsx.snap +++ b/packages/core/src/components/Button/__tests__/__snapshots__/Button.snapshot.test.tsx.snap @@ -376,8 +376,7 @@ exports[`Button renders correctly renders correctly with leftIcon 1`] = ` > @@ -428,8 +427,7 @@ exports[`Button renders correctly renders correctly with rightIcon 1`] = ` > diff --git a/packages/core/src/components/Icon/Icons/components/WhatsNew.tsx b/packages/core/src/components/Icon/Icons/components/WhatsNew.tsx index 410b9301fd..8541e9055d 100644 --- a/packages/core/src/components/Icon/Icons/components/WhatsNew.tsx +++ b/packages/core/src/components/Icon/Icons/components/WhatsNew.tsx @@ -6,8 +6,8 @@ size?: string | number; } const WhatsNew: React.FC = ({size, ...props}) => ( - + ); WhatsNew.displayName = 'WhatsNew'; diff --git a/packages/style/src/Icons/WhatsNew.svg b/packages/style/src/Icons/WhatsNew.svg index f82ddb196c..15a7c369d0 100644 --- a/packages/style/src/Icons/WhatsNew.svg +++ b/packages/style/src/Icons/WhatsNew.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/style/src/Icons/iconsMetaData.js b/packages/style/src/Icons/iconsMetaData.js index 790d30ce80..1094e97be8 100644 --- a/packages/style/src/Icons/iconsMetaData.js +++ b/packages/style/src/Icons/iconsMetaData.js @@ -1838,7 +1838,7 @@ export const iconsMetaData = [ name: "WhatsNew", file: "WhatsNew.svg", description: "Whats New", - tags: "WhatsNew, New", + tags: "WhatsNew, New, Gift", category: [PLATFORM] }, From 1c2a8638a1887425a95b18a3a0f7260f9c92c208 Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Sun, 17 Nov 2024 20:20:49 +0200 Subject: [PATCH 04/32] merge --- packages/core/src/components/TextArea/TextArea.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/TextArea/TextArea.tsx b/packages/core/src/components/TextArea/TextArea.tsx index a75c3b175d..bf520bfeae 100644 --- a/packages/core/src/components/TextArea/TextArea.tsx +++ b/packages/core/src/components/TextArea/TextArea.tsx @@ -93,9 +93,9 @@ const TextArea = forwardRef( onChange={handleOnChange} /> {(showCharCount || helpText) && ( - + {helpText && ( - + {helpText} )} From e5d2a46e5c5f7a0cb73b3e69d9671f270d84805f Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Sun, 17 Nov 2024 20:34:14 +0200 Subject: [PATCH 05/32] merge --- .../components/Icon/Icons/components/PinFull.tsx | 16 ---------------- .../Icon/Icons/components/WhatsNew.tsx | 0 packages/core/src/components/Icon/Icons/index.ts | 0 packages/icons/src/svg/PinFull.svg | 3 +++ 4 files changed, 3 insertions(+), 16 deletions(-) delete mode 100644 packages/core/src/components/Icon/Icons/components/PinFull.tsx delete mode 100644 packages/core/src/components/Icon/Icons/components/WhatsNew.tsx delete mode 100644 packages/core/src/components/Icon/Icons/index.ts diff --git a/packages/core/src/components/Icon/Icons/components/PinFull.tsx b/packages/core/src/components/Icon/Icons/components/PinFull.tsx deleted file mode 100644 index 9fd5ed17f0..0000000000 --- a/packages/core/src/components/Icon/Icons/components/PinFull.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/* eslint-disable */ -/* tslint:disable */ -import * as React from 'react'; -export interface PinFullProps extends React.SVGAttributes { -size?: string | number; -} -const PinFull: React.FC = ({size, ...props}) => ( - - - -); -PinFull.displayName = 'PinFull'; -export default PinFull; -/* tslint:enable */ -/* eslint-enable */ diff --git a/packages/core/src/components/Icon/Icons/components/WhatsNew.tsx b/packages/core/src/components/Icon/Icons/components/WhatsNew.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/core/src/components/Icon/Icons/index.ts b/packages/core/src/components/Icon/Icons/index.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/icons/src/svg/PinFull.svg b/packages/icons/src/svg/PinFull.svg index e69de29bb2..afad4f381c 100644 --- a/packages/icons/src/svg/PinFull.svg +++ b/packages/icons/src/svg/PinFull.svg @@ -0,0 +1,3 @@ + + + From d286b285900e73b65fc7658b61fb59af8dc1d846 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Mon, 18 Nov 2024 12:01:05 +0200 Subject: [PATCH 06/32] feat(AvatarGroupCounter): add option to render MenuButton on a container (#2591) --- .../core/src/components/AvatarGroup/AvatarGroupCounter.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx index 204b0795e8..610b7b9d21 100644 --- a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx +++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx @@ -26,6 +26,10 @@ export interface AvatarGroupCounterProps extends VibeComponentProps { counterProps?: AvatarGroupCounterVisualProps; counterTooltipCustomProps?: Partial; counterTooltipIsVirtualizedList?: boolean; + /** + * Relevant only for when AvatarGroup contains a clickable avatar + */ + counterDialogContainerSelector?: string; size?: AvatarSize; type?: AvatarType; counterAriaLabel?: string; @@ -37,6 +41,7 @@ const AvatarGroupCounter: React.FC = ({ counterProps, counterTooltipCustomProps, counterTooltipIsVirtualizedList = false, + counterDialogContainerSelector, size = Avatar.sizes.MEDIUM, type, counterAriaLabel, @@ -103,6 +108,7 @@ const AvatarGroupCounter: React.FC = ({ zIndex={1} className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)} ariaLabel={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`} + dialogContainerSelector={counterDialogContainerSelector} > {counterTooltipAvatars.map((avatar, index) => { From b27e3d2c90d0ce3d04d3ab6c7290029b8bc821ed Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Mon, 18 Nov 2024 10:49:05 +0000 Subject: [PATCH 07/32] Publish - monday-ui-react-core@2.145.0 - monday-ui-style@0.18.0 --- packages/core/CHANGELOG.md | 18 ++++++++++++++++++ packages/core/package.json | 4 ++-- packages/style/CHANGELOG.md | 16 ++++++++++++++++ packages/style/package.json | 2 +- 4 files changed, 37 insertions(+), 3 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 299d8a8e09..342b8fd9f4 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.145.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.144.0...monday-ui-react-core@2.145.0) (2024-11-18) + + +### Bug Fixes + +* **TextArea:** don't show the help section if no help text or char co… ([#2590](https://github.com/mondaycom/vibe/issues/2590)) ([162a77d](https://github.com/mondaycom/vibe/commit/162a77d3c734f7833772e5567222de5698108356)) +* **WhatsNew:** update icon ([#2592](https://github.com/mondaycom/vibe/issues/2592)) ([fbcb99f](https://github.com/mondaycom/vibe/commit/fbcb99f257b624ee7a64eb270c30292b25f6e2ef)) + + +### Features + +* **AvatarGroupCounter:** add option to render MenuButton on a container ([#2591](https://github.com/mondaycom/vibe/issues/2591)) ([d286b28](https://github.com/mondaycom/vibe/commit/d286b285900e73b65fc7658b61fb59af8dc1d846)) +* **PinFull:** new icon ([#2589](https://github.com/mondaycom/vibe/issues/2589)) ([1e34a3c](https://github.com/mondaycom/vibe/commit/1e34a3cff3ee9d1be3d62643258fbca20a2bed83)) + + + + + # [2.144.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.143.1...monday-ui-react-core@2.144.0) (2024-11-15) diff --git a/packages/core/package.json b/packages/core/package.json index 976db0fdb5..146a21dde4 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.144.0", + "version": "2.145.0", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", @@ -108,7 +108,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.17.0", + "monday-ui-style": "0.18.0", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^4.1.3", diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md index 8661db66e7..784d2e3af4 100644 --- a/packages/style/CHANGELOG.md +++ b/packages/style/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. +# [0.18.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.17.0...monday-ui-style@0.18.0) (2024-11-18) + + +### Bug Fixes + +* **WhatsNew:** update icon ([#2592](https://github.com/mondaycom/vibe/issues/2592)) ([fbcb99f](https://github.com/mondaycom/vibe/commit/fbcb99f257b624ee7a64eb270c30292b25f6e2ef)) + + +### Features + +* **PinFull:** new icon ([#2589](https://github.com/mondaycom/vibe/issues/2589)) ([1e34a3c](https://github.com/mondaycom/vibe/commit/1e34a3cff3ee9d1be3d62643258fbca20a2bed83)) + + + + + # [0.17.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.16.0...monday-ui-style@0.17.0) (2024-11-14) diff --git a/packages/style/package.json b/packages/style/package.json index 5f32dfec90..06b03470a0 100644 --- a/packages/style/package.json +++ b/packages/style/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-style", - "version": "0.17.0", + "version": "0.18.0", "description": "Monday UI CSS Foundations", "main": "dist/index.css", "scripts": { From 09c0dc83676f5b5a0504e25db0e26227f6b003c9 Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Mon, 18 Nov 2024 17:05:37 +0200 Subject: [PATCH 08/32] fix(table): horizontal scroll on react 18 (#2594) --- .../TableVirtualizedBody.tsx | 51 ++++++++++++------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx index a1be43399c..86f1d4ab8a 100644 --- a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx +++ b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx @@ -1,4 +1,4 @@ -import React, { ComponentType, forwardRef, UIEventHandler, useCallback, useEffect } from "react"; +import React, { ComponentType, forwardRef, useCallback, useEffect } from "react"; import { VibeComponentProps } from "../../../types"; import TableBody from "../TableBody/TableBody"; import styles from "./TableVirtualizedBody.module.scss"; @@ -28,29 +28,28 @@ const TableVirtualizedBody = forwardRef( const { size, virtualizedListRef, onVirtualizedListScroll, markTableAsVirtualized } = useTable(); const { resetHoveredRow } = useTableRowMenu(); - const onAutoSizerScroll = useCallback>( - e => { + const handleOuterScroll = useCallback( + (e: Event) => { + const target = e.target as HTMLDivElement; resetHoveredRow(); - onVirtualizedListScroll(e); + onVirtualizedListScroll({ + target, + currentTarget: target + } as unknown as React.UIEvent); }, [resetHoveredRow, onVirtualizedListScroll] ); useEffect(() => { - markTableAsVirtualized(); - }, [markTableAsVirtualized]); + const scrollElement = virtualizedListRef.current; + if (!scrollElement) return; - const itemRenderer = useCallback>>( - ({ index, style: { width: _width, ...style } }) => { - const currentItem = items[index]; - const element = rowRenderer(currentItem); - return React.cloneElement(element, { - style: { ...style, ...element.props?.style }, - key: index - }); - }, - [items, rowRenderer] - ); + scrollElement.addEventListener("scroll", handleOuterScroll); + + return () => { + scrollElement.removeEventListener("scroll", handleOuterScroll); + }; + }, [handleOuterScroll]); const handleVirtualizedVerticalScroll = useCallback( ({ @@ -67,6 +66,22 @@ const TableVirtualizedBody = forwardRef( [onScroll] ); + const itemRenderer = useCallback>>( + ({ index, style: { width: _width, ...style } }) => { + const currentItem = items[index]; + const element = rowRenderer(currentItem); + return React.cloneElement(element, { + style: { ...style, ...element.props?.style }, + key: index + }); + }, + [items, rowRenderer] + ); + + useEffect(() => { + markTableAsVirtualized(); + }, [markTableAsVirtualized]); + return ( {items?.length && ( - + {({ height, width }: AutoSizerSize) => ( Date: Mon, 18 Nov 2024 15:32:28 +0000 Subject: [PATCH 09/32] Publish - monday-ui-react-core@2.145.1 --- packages/core/CHANGELOG.md | 11 +++++++++++ packages/core/package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 342b8fd9f4..4116bbaf34 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.145.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.0...monday-ui-react-core@2.145.1) (2024-11-18) + + +### Bug Fixes + +* **table:** horizontal scroll on react 18 ([#2594](https://github.com/mondaycom/vibe/issues/2594)) ([09c0dc8](https://github.com/mondaycom/vibe/commit/09c0dc83676f5b5a0504e25db0e26227f6b003c9)) + + + + + # [2.145.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.144.0...monday-ui-react-core@2.145.0) (2024-11-18) diff --git a/packages/core/package.json b/packages/core/package.json index 146a21dde4..0789a432c6 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.145.0", + "version": "2.145.1", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", From 202e5a6a1e20b3fc9c9e20185d8d46fc713650b6 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Mon, 18 Nov 2024 19:25:34 +0200 Subject: [PATCH 10/32] fix(Switcher): revert icon change to older version (#2596) --- .../Icon/Icons/components/Switcher.tsx | 13 ++++++++++--- packages/style/src/Icons/Switcher.svg | 19 +++++++++++++++++-- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/Icon/Icons/components/Switcher.tsx b/packages/core/src/components/Icon/Icons/components/Switcher.tsx index e2c1e22703..9d217b2e5a 100644 --- a/packages/core/src/components/Icon/Icons/components/Switcher.tsx +++ b/packages/core/src/components/Icon/Icons/components/Switcher.tsx @@ -5,9 +5,16 @@ export interface SwitcherProps extends React.SVGAttributes { size?: string | number; } const Switcher: React.FC = ({size, ...props}) => ( - - + + + + + + + + + ); Switcher.displayName = 'Switcher'; diff --git a/packages/style/src/Icons/Switcher.svg b/packages/style/src/Icons/Switcher.svg index 3502be3030..5585371f9f 100644 --- a/packages/style/src/Icons/Switcher.svg +++ b/packages/style/src/Icons/Switcher.svg @@ -1,3 +1,18 @@ - - + + + + + + + + + + + + + + + + + From e9ffede548c1f06c2221c75864f04d542048d37f Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Mon, 18 Nov 2024 17:39:21 +0000 Subject: [PATCH 11/32] Publish - monday-ui-react-core@2.145.2 - monday-ui-style@0.18.1 --- packages/core/CHANGELOG.md | 11 +++++++++++ packages/core/package.json | 4 ++-- packages/style/CHANGELOG.md | 11 +++++++++++ packages/style/package.json | 2 +- 4 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 4116bbaf34..6bc698fde4 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.145.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.1...monday-ui-react-core@2.145.2) (2024-11-18) + + +### Bug Fixes + +* **Switcher:** revert icon change to older version ([#2596](https://github.com/mondaycom/vibe/issues/2596)) ([202e5a6](https://github.com/mondaycom/vibe/commit/202e5a6a1e20b3fc9c9e20185d8d46fc713650b6)) + + + + + ## [2.145.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.0...monday-ui-react-core@2.145.1) (2024-11-18) diff --git a/packages/core/package.json b/packages/core/package.json index 0789a432c6..4fd3301051 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.145.1", + "version": "2.145.2", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", @@ -108,7 +108,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.18.0", + "monday-ui-style": "0.18.1", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^4.1.3", diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md index 784d2e3af4..3c66c2bccf 100644 --- a/packages/style/CHANGELOG.md +++ b/packages/style/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.18.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.0...monday-ui-style@0.18.1) (2024-11-18) + + +### Bug Fixes + +* **Switcher:** revert icon change to older version ([#2596](https://github.com/mondaycom/vibe/issues/2596)) ([202e5a6](https://github.com/mondaycom/vibe/commit/202e5a6a1e20b3fc9c9e20185d8d46fc713650b6)) + + + + + # [0.18.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.17.0...monday-ui-style@0.18.0) (2024-11-18) diff --git a/packages/style/package.json b/packages/style/package.json index 06b03470a0..5636a6f255 100644 --- a/packages/style/package.json +++ b/packages/style/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-style", - "version": "0.18.0", + "version": "0.18.1", "description": "Monday UI CSS Foundations", "main": "dist/index.css", "scripts": { From 5a140e8f335c4b2f4c83ae6beeae3de7db55d746 Mon Sep 17 00:00:00 2001 From: Floris Date: Tue, 19 Nov 2024 09:25:29 +0000 Subject: [PATCH 12/32] fix(TextArea): Error state not correctly set when maxlength is exceeded (#2588) --- packages/core/src/components/TextArea/TextArea.tsx | 4 ++-- .../core/src/components/TextArea/__tests__/TextArea.test.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/TextArea/TextArea.tsx b/packages/core/src/components/TextArea/TextArea.tsx index a75c3b175d..ef4b5a7a8b 100644 --- a/packages/core/src/components/TextArea/TextArea.tsx +++ b/packages/core/src/components/TextArea/TextArea.tsx @@ -41,7 +41,6 @@ const TextArea = forwardRef( const numRows = rows || DEFAULT_ROWS[size]; const helpTextId = helpText && `${id}-help-text`; const allowExceedingMaxLengthTextId = allowExceedingMaxLength && `${id}-allow-exceeding-max-length`; - const isErrorState = error || (maxLength && value?.length > maxLength); const ariaDescribedby = useMemo( () => [helpTextId, allowExceedingMaxLengthTextId].filter(id => !!id).join(" ") || undefined, @@ -49,6 +48,7 @@ const TextArea = forwardRef( ); const [characterCount, setCharacterCount] = useState(value?.length || 0); + const isErrorState = error || (typeof maxLength === "number" && characterCount > maxLength); const handleOnChange = useCallback( (event: React.ChangeEvent) => { @@ -88,7 +88,7 @@ const TextArea = forwardRef( required={required} rows={numRows} className={cx(styles.textArea, [styles[size]], { [styles.resize]: resize })} - aria-invalid={error} + aria-invalid={isErrorState} aria-describedby={ariaDescribedby} onChange={handleOnChange} /> diff --git a/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx index ca6a3d7d1c..b504edc31b 100644 --- a/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx +++ b/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx @@ -143,6 +143,7 @@ describe("TextArea", () => { expect(input).toHaveValue("12345678910"); expect(charCount).toHaveTextContent("11/10"); + expect(input).toHaveAttribute("aria-invalid", "true"); }); it("should allow text removal when character limit is exceeded", () => { From 3c045b18caf3dad36787c5ee9e84ebb3f71425b2 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 19 Nov 2024 11:43:53 +0200 Subject: [PATCH 13/32] feat(Switcher): update icon (#2597) --- .../Icon/Icons/components/Switcher.tsx | 10 +++++----- packages/style/src/Icons/Switcher.svg | 18 +++++------------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/core/src/components/Icon/Icons/components/Switcher.tsx b/packages/core/src/components/Icon/Icons/components/Switcher.tsx index 9d217b2e5a..01fd7b4fc0 100644 --- a/packages/core/src/components/Icon/Icons/components/Switcher.tsx +++ b/packages/core/src/components/Icon/Icons/components/Switcher.tsx @@ -5,14 +5,14 @@ export interface SwitcherProps extends React.SVGAttributes { size?: string | number; } const Switcher: React.FC = ({size, ...props}) => ( - - - + + - - + + diff --git a/packages/style/src/Icons/Switcher.svg b/packages/style/src/Icons/Switcher.svg index 5585371f9f..9c7e8eb251 100644 --- a/packages/style/src/Icons/Switcher.svg +++ b/packages/style/src/Icons/Switcher.svg @@ -1,18 +1,10 @@ - - - - - - - - - - - + + + - - + + From ceb7414f48d0096517a52b580cd609bcb81031b0 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 19 Nov 2024 14:26:34 +0200 Subject: [PATCH 14/32] test: skip flaky dropdown e2e test --- packages/testkit/__TESTS__/dropdown.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/testkit/__TESTS__/dropdown.spec.js b/packages/testkit/__TESTS__/dropdown.spec.js index cdb58d4ca7..f2c04d4492 100644 --- a/packages/testkit/__TESTS__/dropdown.spec.js +++ b/packages/testkit/__TESTS__/dropdown.spec.js @@ -12,7 +12,7 @@ test.describe("dropdown Class with Storybook", () => { DropDown = new Dropdown(page, DropDownLocator, "Test DropDown"); }); - test("set dropdown value", async ({ page }) => { + test.fixme("set dropdown value", async ({ page }) => { await page.waitForTimeout(3000); await DropDown.selectItem("2"); await page.waitForTimeout(500); From fdf9c64ac57eabca466f8716a75cc302773abfa8 Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Tue, 19 Nov 2024 12:41:01 +0000 Subject: [PATCH 15/32] Publish - monday-ui-react-core@2.146.0 - monday-ui-style@0.19.0 - @vibe/testkit@1.0.4 --- packages/core/CHANGELOG.md | 16 ++++++++++++++++ packages/core/package.json | 4 ++-- packages/style/CHANGELOG.md | 11 +++++++++++ packages/style/package.json | 2 +- packages/testkit/CHANGELOG.md | 8 ++++++++ packages/testkit/package.json | 2 +- 6 files changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 6bc698fde4..81fceaed9a 100644 --- a/packages/core/CHANGELOG.md +++ b/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.146.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.2...monday-ui-react-core@2.146.0) (2024-11-19) + + +### Bug Fixes + +* **TextArea:** Error state not correctly set when maxlength is exceeded ([#2588](https://github.com/mondaycom/vibe/issues/2588)) ([5a140e8](https://github.com/mondaycom/vibe/commit/5a140e8f335c4b2f4c83ae6beeae3de7db55d746)) + + +### Features + +* **Switcher:** update icon ([#2597](https://github.com/mondaycom/vibe/issues/2597)) ([3c045b1](https://github.com/mondaycom/vibe/commit/3c045b18caf3dad36787c5ee9e84ebb3f71425b2)) + + + + + ## [2.145.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.1...monday-ui-react-core@2.145.2) (2024-11-18) diff --git a/packages/core/package.json b/packages/core/package.json index 4fd3301051..a032b8d17d 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.145.2", + "version": "2.146.0", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", @@ -108,7 +108,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.18.1", + "monday-ui-style": "0.19.0", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^4.1.3", diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md index 3c66c2bccf..c67ea6d104 100644 --- a/packages/style/CHANGELOG.md +++ b/packages/style/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.19.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.1...monday-ui-style@0.19.0) (2024-11-19) + + +### Features + +* **Switcher:** update icon ([#2597](https://github.com/mondaycom/vibe/issues/2597)) ([3c045b1](https://github.com/mondaycom/vibe/commit/3c045b18caf3dad36787c5ee9e84ebb3f71425b2)) + + + + + ## [0.18.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.0...monday-ui-style@0.18.1) (2024-11-18) diff --git a/packages/style/package.json b/packages/style/package.json index 5636a6f255..80fa54a0fc 100644 --- a/packages/style/package.json +++ b/packages/style/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-style", - "version": "0.18.1", + "version": "0.19.0", "description": "Monday UI CSS Foundations", "main": "dist/index.css", "scripts": { diff --git a/packages/testkit/CHANGELOG.md b/packages/testkit/CHANGELOG.md index 14a92da187..43adc8485e 100644 --- a/packages/testkit/CHANGELOG.md +++ b/packages/testkit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.4](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.3...@vibe/testkit@1.0.4) (2024-11-19) + +**Note:** Version bump only for package @vibe/testkit + + + + + ## [1.0.3](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.2...@vibe/testkit@1.0.3) (2024-11-14) **Note:** Version bump only for package @vibe/testkit diff --git a/packages/testkit/package.json b/packages/testkit/package.json index 67c65c4454..035e97e699 100644 --- a/packages/testkit/package.json +++ b/packages/testkit/package.json @@ -1,6 +1,6 @@ { "name": "@vibe/testkit", - "version": "1.0.3", + "version": "1.0.4", "description": "Vibe e2e testing toolkit", "keywords": [ "TESTING", From 4de6ea88d68eb042e221574d1bffda57c0069c32 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Tue, 19 Nov 2024 17:07:31 +0200 Subject: [PATCH 16/32] docs: migration --- .../storybook/stand-alone-documentaion/migration-guide.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx b/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx index 78bce2c497..54f05c7868 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx +++ b/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx @@ -127,9 +127,9 @@ These steps will guide you through the migration process: ## Breaking Changes 🚨 -Several breaking changes have been made to optimize and streamline the library. These changes include the removal of deprecated components, updates to component APIs, and overall enhancements. The following are the most significant changes that require manual intervention, **in addition to the automatic migration script**. +Several breaking changes have been made to optimize and streamline the library. These changes include the removal of deprecated components, updates to component APIs, and overall enhancements. -For the complete set of changes, refer to the [Vibe 3 changelog](https://github.com/mondaycom/vibe/blob/master/packages/core/docs/vibe-3-changelog.md). +Please note that the following changes are **complementary to the migration script** and require manual intervention, assuming that the migration script has ran successfully. If you prefer migrating entirely manually (without the `@vibe/codemod` script), please refer to the [Complete Vibe 3 changelog](https://github.com/mondaycom/vibe/blob/master/packages/core/docs/vibe-3-changelog.md). ### General From cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Wed, 20 Nov 2024 12:14:15 +0200 Subject: [PATCH 17/32] feat(Switcher): update icon (#2599) --- packages/core/src/components/Icon/Icons/components/Switcher.tsx | 2 +- packages/style/src/Icons/Switcher.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/Icon/Icons/components/Switcher.tsx b/packages/core/src/components/Icon/Icons/components/Switcher.tsx index 01fd7b4fc0..0ca8041213 100644 --- a/packages/core/src/components/Icon/Icons/components/Switcher.tsx +++ b/packages/core/src/components/Icon/Icons/components/Switcher.tsx @@ -7,7 +7,7 @@ size?: string | number; const Switcher: React.FC = ({size, ...props}) => ( - diff --git a/packages/style/src/Icons/Switcher.svg b/packages/style/src/Icons/Switcher.svg index 9c7e8eb251..8cbbb3e8ae 100644 --- a/packages/style/src/Icons/Switcher.svg +++ b/packages/style/src/Icons/Switcher.svg @@ -1,6 +1,6 @@ - + From 32fd1945b623e23f5cd36039b777eaf3182f6c95 Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Wed, 20 Nov 2024 10:29:53 +0000 Subject: [PATCH 18/32] Publish - monday-ui-react-core@2.147.0 - monday-ui-style@0.20.0 --- packages/core/CHANGELOG.md | 11 +++++++++++ packages/core/package.json | 4 ++-- packages/style/CHANGELOG.md | 11 +++++++++++ packages/style/package.json | 2 +- 4 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 81fceaed9a..9a0badd1a1 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.147.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.146.0...monday-ui-react-core@2.147.0) (2024-11-20) + + +### Features + +* **Switcher:** update icon ([#2599](https://github.com/mondaycom/vibe/issues/2599)) ([cdac401](https://github.com/mondaycom/vibe/commit/cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0)) + + + + + # [2.146.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.2...monday-ui-react-core@2.146.0) (2024-11-19) diff --git a/packages/core/package.json b/packages/core/package.json index a032b8d17d..06c6601741 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.146.0", + "version": "2.147.0", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", @@ -108,7 +108,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.19.0", + "monday-ui-style": "0.20.0", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^4.1.3", diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md index c67ea6d104..da96bc1a6e 100644 --- a/packages/style/CHANGELOG.md +++ b/packages/style/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.20.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.19.0...monday-ui-style@0.20.0) (2024-11-20) + + +### Features + +* **Switcher:** update icon ([#2599](https://github.com/mondaycom/vibe/issues/2599)) ([cdac401](https://github.com/mondaycom/vibe/commit/cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0)) + + + + + # [0.19.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.1...monday-ui-style@0.19.0) (2024-11-19) diff --git a/packages/style/package.json b/packages/style/package.json index 80fa54a0fc..d9fc2a57fc 100644 --- a/packages/style/package.json +++ b/packages/style/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-style", - "version": "0.19.0", + "version": "0.20.0", "description": "Monday UI CSS Foundations", "main": "dist/index.css", "scripts": { From 3af508ade6f12076d7764168668545dcc43ffe4f Mon Sep 17 00:00:00 2001 From: uziab Date: Wed, 20 Nov 2024 15:57:12 +0200 Subject: [PATCH 19/32] chore: add d.ts file compilation to testkit (#2585) --- packages/testkit/__TESTS__/dropdown.spec.js | 4 +- packages/testkit/eslint.config.mjs | 6 +++ packages/testkit/package.json | 18 ++++++++- packages/testkit/tsconfig.esm.json | 8 ++++ packages/testkit/tsconfig.json | 45 +++++++++------------ 5 files changed, 51 insertions(+), 30 deletions(-) create mode 100644 packages/testkit/eslint.config.mjs create mode 100644 packages/testkit/tsconfig.esm.json diff --git a/packages/testkit/__TESTS__/dropdown.spec.js b/packages/testkit/__TESTS__/dropdown.spec.js index f2c04d4492..3db16d7a6e 100644 --- a/packages/testkit/__TESTS__/dropdown.spec.js +++ b/packages/testkit/__TESTS__/dropdown.spec.js @@ -13,7 +13,9 @@ test.describe("dropdown Class with Storybook", () => { }); test.fixme("set dropdown value", async ({ page }) => { - await page.waitForTimeout(3000); + // extended wait for interaction test to finish + await page.waitForTimeout(10000); + await DropDown.inputField.setText(""); await DropDown.selectItem("2"); await page.waitForTimeout(500); expect(await DropDown.getText()).toContain("2"); diff --git a/packages/testkit/eslint.config.mjs b/packages/testkit/eslint.config.mjs new file mode 100644 index 0000000000..53b77e189d --- /dev/null +++ b/packages/testkit/eslint.config.mjs @@ -0,0 +1,6 @@ +// eslint.config.js +export default [ +{ + ignores: ["node_modules/", "dist/", "*.config.js", "*.spec.js"], +} +]; \ No newline at end of file diff --git a/packages/testkit/package.json b/packages/testkit/package.json index 035e97e699..5df1de1f9d 100644 --- a/packages/testkit/package.json +++ b/packages/testkit/package.json @@ -6,6 +6,15 @@ "TESTING", "E2E" ], + "module": "dist/esm/index.js", + "types": "dist/index.d.ts", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/esm/index.js", + "types": "./dist/index.d.ts" + } + }, "author": "monday.com", "homepage": "https://github.com/mondaycom/vibe#readme", "license": "ISC", @@ -17,13 +26,18 @@ }, "scripts": { "test:e2e": "npx playwright test", - "build": "tsc", - "start-server": "yarn lerna run storybook --scope=monday-ui-react-core" + "build:cjs": "tsc", + "build:esm": "tsc --project tsconfig.esm.json", + "build": "yarn build:cjs && yarn build:esm", + "start-server": "yarn lerna run storybook --scope=monday-ui-react-core", + "lint": "eslint \"./**/*.{js,jsx,ts,tsx}\"", + "lint:fix": "yarn lint -- --fix" }, "bugs": { "url": "https://github.com/mondaycom/vibe/issues" }, "devDependencies": { + "eslint": "^8.23.0", "@playwright/test": "1.45.3" } } diff --git a/packages/testkit/tsconfig.esm.json b/packages/testkit/tsconfig.esm.json new file mode 100644 index 0000000000..d9877bd4bc --- /dev/null +++ b/packages/testkit/tsconfig.esm.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "dist/esm", + "module": "esnext" + }, + "include": ["./**/*.ts"] + } \ No newline at end of file diff --git a/packages/testkit/tsconfig.json b/packages/testkit/tsconfig.json index 198d44ed7c..aa57a38526 100644 --- a/packages/testkit/tsconfig.json +++ b/packages/testkit/tsconfig.json @@ -1,28 +1,19 @@ { - "compilerOptions": { - "module": "commonjs", - "target": "es6", - "outDir": "dist", - "strict": true, - "sourceMap": true, - "strictNullChecks": true, - "moduleResolution": "node", - "importHelpers": true, - "esModuleInterop": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "strictBindCallApply": true, - "strictFunctionTypes": true, - "strictPropertyInitialization": true, - "rootDir": ".", - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "noImplicitOverride": true, - "noImplicitReturns": true, - }, - "include": [ "buttons", "inputs", "navigation", "pickers", "popover", "text", "utils", "BaseElement.ts", "index.ts"] - } + "compilerOptions": { + "lib": ["ESNext"], + "target": "es6", + "module": "commonjs", + "moduleResolution": "node", + "strict": true, + "skipLibCheck": true, + "noImplicitAny": true, + "outDir": "dist", + "baseUrl": ".", + "allowSyntheticDefaultImports": true, + "declaration": true, + "declarationMap": true, + "sourceMap": true + }, + "include": ["./**/*.ts"], + "exclude": ["__TESTS__", "./playwright.config.ts", "node_modules", "dist"] +} \ No newline at end of file From 00a99882b2cac739720dd9207a1379e28c2a77a0 Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Wed, 20 Nov 2024 15:17:19 +0000 Subject: [PATCH 20/32] Publish - @vibe/testkit@1.0.5 --- packages/testkit/CHANGELOG.md | 8 ++++++++ packages/testkit/package.json | 6 +++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/testkit/CHANGELOG.md b/packages/testkit/CHANGELOG.md index 43adc8485e..bd2ca2b0fc 100644 --- a/packages/testkit/CHANGELOG.md +++ b/packages/testkit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.5](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.4...@vibe/testkit@1.0.5) (2024-11-20) + +**Note:** Version bump only for package @vibe/testkit + + + + + ## [1.0.4](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.3...@vibe/testkit@1.0.4) (2024-11-19) **Note:** Version bump only for package @vibe/testkit diff --git a/packages/testkit/package.json b/packages/testkit/package.json index 5df1de1f9d..e9719c84f6 100644 --- a/packages/testkit/package.json +++ b/packages/testkit/package.json @@ -1,6 +1,6 @@ { "name": "@vibe/testkit", - "version": "1.0.4", + "version": "1.0.5", "description": "Vibe e2e testing toolkit", "keywords": [ "TESTING", @@ -37,7 +37,7 @@ "url": "https://github.com/mondaycom/vibe/issues" }, "devDependencies": { - "eslint": "^8.23.0", - "@playwright/test": "1.45.3" + "@playwright/test": "1.45.3", + "eslint": "^8.23.0" } } From ad983408dcbdfc725f9106c0a314c7c84ffb66ec Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 21 Nov 2024 08:59:55 +0200 Subject: [PATCH 21/32] fix(TextField): when inputValue is undefined, length check fails (#2603) --- packages/core/src/components/TextField/TextField.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/TextField/TextField.tsx b/packages/core/src/components/TextField/TextField.tsx index e958e6f870..6cc32df788 100644 --- a/packages/core/src/components/TextField/TextField.tsx +++ b/packages/core/src/components/TextField/TextField.tsx @@ -244,7 +244,7 @@ const TextField: VibeComponent & { }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]); const validationClass = useMemo(() => { - if (typeof maxLength === "number" && inputValue.length > maxLength) { + if (typeof maxLength === "number" && inputValue && inputValue.length > maxLength) { return FEEDBACK_CLASSES.error; } @@ -253,7 +253,7 @@ const TextField: VibeComponent & { } const status = isRequiredAndEmpty ? "error" : validation.status; return FEEDBACK_CLASSES[status]; - }, [validation, isRequiredAndEmpty, inputValue]); + }, [maxLength, validation, isRequiredAndEmpty, inputValue]); const hasIcon = iconName || secondaryIconName; const shouldShowExtraText = showCharCount || (validation && validation.text) || isRequiredAndEmpty; From 571e908bbc7e8647444026d08a6fe93a2c000330 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 21 Nov 2024 09:00:06 +0200 Subject: [PATCH 22/32] fix(AvatarGroup): pass dialogContainerSelector from AvatarGroup to AvatarGroupCounter (#2602) --- .../core/src/components/AvatarGroup/AvatarGroup.tsx | 4 ++++ .../src/components/AvatarGroup/AvatarGroupCounter.tsx | 10 +++------- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/core/src/components/AvatarGroup/AvatarGroup.tsx b/packages/core/src/components/AvatarGroup/AvatarGroup.tsx index 52582fc4f8..8ba88655a6 100644 --- a/packages/core/src/components/AvatarGroup/AvatarGroup.tsx +++ b/packages/core/src/components/AvatarGroup/AvatarGroup.tsx @@ -16,6 +16,10 @@ export type AvatarGroupCounterVisualProps = { maxDigits?: number; ariaLabelItemsName?: string; noAnimation?: boolean; + /** + * Relevant only for when AvatarGroup contains a clickable avatar + */ + dialogContainerSelector?: string; }; export interface AvatarGroupProps extends VibeComponentProps { diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx index 610b7b9d21..08ee8e06b4 100644 --- a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx +++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx @@ -26,10 +26,6 @@ export interface AvatarGroupCounterProps extends VibeComponentProps { counterProps?: AvatarGroupCounterVisualProps; counterTooltipCustomProps?: Partial; counterTooltipIsVirtualizedList?: boolean; - /** - * Relevant only for when AvatarGroup contains a clickable avatar - */ - counterDialogContainerSelector?: string; size?: AvatarSize; type?: AvatarType; counterAriaLabel?: string; @@ -41,7 +37,6 @@ const AvatarGroupCounter: React.FC = ({ counterProps, counterTooltipCustomProps, counterTooltipIsVirtualizedList = false, - counterDialogContainerSelector, size = Avatar.sizes.MEDIUM, type, counterAriaLabel, @@ -53,7 +48,8 @@ const AvatarGroupCounter: React.FC = ({ prefix: counterPrefix = "+", maxDigits: counterMaxDigits = 3, ariaLabelItemsName: counterAriaLabelItemsName = "items", - noAnimation + noAnimation, + dialogContainerSelector } = counterProps || {}; const counterSizeStyle = getStyle(styles, size?.toString()); @@ -108,7 +104,7 @@ const AvatarGroupCounter: React.FC = ({ zIndex={1} className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)} ariaLabel={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`} - dialogContainerSelector={counterDialogContainerSelector} + dialogContainerSelector={dialogContainerSelector} > {counterTooltipAvatars.map((avatar, index) => { From ddd22e01f568f1dce6548d1701002fc1ed50e1da Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Thu, 21 Nov 2024 07:15:01 +0000 Subject: [PATCH 23/32] Publish - monday-ui-react-core@2.147.1 --- packages/core/CHANGELOG.md | 12 ++++++++++++ packages/core/package.json | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 9a0badd1a1..c952f11968 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.147.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.147.0...monday-ui-react-core@2.147.1) (2024-11-21) + + +### Bug Fixes + +* **AvatarGroup:** pass dialogContainerSelector from AvatarGroup to AvatarGroupCounter ([#2602](https://github.com/mondaycom/vibe/issues/2602)) ([571e908](https://github.com/mondaycom/vibe/commit/571e908bbc7e8647444026d08a6fe93a2c000330)) +* **TextField:** when inputValue is undefined, length check fails ([#2603](https://github.com/mondaycom/vibe/issues/2603)) ([ad98340](https://github.com/mondaycom/vibe/commit/ad983408dcbdfc725f9106c0a314c7c84ffb66ec)) + + + + + # [2.147.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.146.0...monday-ui-react-core@2.147.0) (2024-11-20) diff --git a/packages/core/package.json b/packages/core/package.json index 06c6601741..7e7bb91be9 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.147.0", + "version": "2.147.1", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", From 6a5598ca6ad50c2a383fcbe0657a80f138383d57 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:13:53 +0200 Subject: [PATCH 24/32] feat: new major version BREAKING CHANGE: new major version --- packages/icons/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icons/package.json b/packages/icons/package.json index 93f197690f..75d4a22c5b 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@vibe/icons", "version": "0.1.0", - "description": "Vibe's icon library", + "description": "Vibe's Icon Library", "repository": { "type": "git", "url": "git+https://github.com/mondaycom/vibe.git", From 9e869b7d800686683e4cd40e6df0514ee9667213 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:19:01 +0200 Subject: [PATCH 25/32] chore: release v1 --- packages/codemod/package.json | 2 +- packages/icons/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/codemod/package.json b/packages/codemod/package.json index af3bed79ce..48c23e418a 100644 --- a/packages/codemod/package.json +++ b/packages/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@vibe/codemod", - "version": "0.1.0", + "version": "1.0.0-rc.0", "description": "Vibe's component library migration tool", "repository": { "type": "git", diff --git a/packages/icons/package.json b/packages/icons/package.json index 75d4a22c5b..dbcea110cf 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@vibe/icons", - "version": "0.1.0", + "version": "1.0.0-rc.0", "description": "Vibe's Icon Library", "repository": { "type": "git", From 7e3071dbd4c5d8e3bddfafee5d802ee6930b2f6a Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:21:46 +0200 Subject: [PATCH 26/32] docs: migration guide --- .../storybook/stand-alone-documentaion/migration-guide.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx b/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx index 54f05c7868..f66bc5ec90 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx +++ b/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx @@ -45,9 +45,7 @@ The `monday-ui-react-core` package has been renamed to `@vibe/core` to better re ### Reduced bundle size -By removing CommonJS support, dividing the library into packages, and optimizing the library exports - the bundle size has been reduced to [fill in] kb, resulting in faster load times and improved performance. - -{/* bundle phobia image? */} +By removing CommonJS support, dividing the library into packages, and optimizing the library exports - the bundle size has been reduced by 43%, resulting in faster load times and improved performance. ### New Typography System From 34f79e2ff94689167d2d56308c606c65df22a7a0 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:23:07 +0200 Subject: [PATCH 27/32] docs: readme --- packages/codemod/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/codemod/README.md b/packages/codemod/README.md index 5fddb43000..eaf156da07 100644 --- a/packages/codemod/README.md +++ b/packages/codemod/README.md @@ -66,3 +66,9 @@ The following migrations are included in this CLI: - **Migration Type**: `v3` (`--migration v3`) - **Description**: This migration transforms components and files to comply with version 3 of @vibe/code. + +### `enums` Migration + +- **Migration Type**: `enums` (`--migration enums`) +- **Description**: This migration transforms enums to TS types with version 3 of @vibe/code. +- From 6ca3a782ae87366967d5163866c7ea5474d175ec Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:24:05 +0200 Subject: [PATCH 28/32] ci(release): add conventional graduate --- .github/workflows/release.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 2d48262987..b5cf66b40a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -35,7 +35,7 @@ jobs: - uses: ./.github/actions/git-creds - uses: ./.github/actions/download-builds - name: Generate new versions - run: yarn lerna version --exact --conventional-commits -y + run: yarn lerna version --exact --conventional-commits --conventional-graduate -y - run: yarn config set registry https://registry.npmjs.org/ - name: Setup .npmrc for publish id: setup-npmrc From 643c31fef0f6f0dfe767a5758b751f908f602d18 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:38:04 +0200 Subject: [PATCH 29/32] docs: readme --- packages/codemod/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/codemod/README.md b/packages/codemod/README.md index eaf156da07..edc53f782a 100644 --- a/packages/codemod/README.md +++ b/packages/codemod/README.md @@ -71,4 +71,3 @@ The following migrations are included in this CLI: - **Migration Type**: `enums` (`--migration enums`) - **Description**: This migration transforms enums to TS types with version 3 of @vibe/code. -- From 798497f869e509553206de040ead433e35a866f7 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 21 Nov 2024 14:54:10 +0200 Subject: [PATCH 30/32] chore: standardize testkit package with lint, config, plugins (#2601) --- .github/workflows/test.yml | 7 +-- packages/testkit/.eslintrc.js | 59 +++++++++++++++++++ packages/testkit/BaseElement.ts | 43 ++++++++------ packages/testkit/__TESTS__/button.spec.js | 41 ------------- packages/testkit/__TESTS__/checkbox.spec.js | 24 -------- packages/testkit/__tests__/button.test.js | 43 ++++++++++++++ .../buttonGroup.test.js} | 8 +-- packages/testkit/__tests__/checkbox.test.js | 28 +++++++++ .../dropdown.test.js} | 3 +- .../menuButton.test.js} | 4 +- .../textArea.test.js} | 8 ++- .../textfield.test.js} | 8 ++- .../utils/url-helper.js | 1 - packages/testkit/buttons/Button.ts | 4 +- packages/testkit/buttons/ButtonGroup.ts | 13 ++-- packages/testkit/buttons/MenuButton.ts | 4 +- packages/testkit/buttons/SplitButton.ts | 6 +- packages/testkit/eslint.config.mjs | 6 -- packages/testkit/index.ts | 2 +- packages/testkit/navigation/List.ts | 2 +- packages/testkit/navigation/TabList.ts | 4 +- packages/testkit/package.json | 10 +++- packages/testkit/pickers/ColorPicker.ts | 4 +- packages/testkit/playwright.config.ts | 16 ++--- packages/testkit/popover/Dialog.ts | 2 +- packages/testkit/tsconfig.json | 5 +- yarn.lock | 40 +++++++++++-- 27 files changed, 251 insertions(+), 144 deletions(-) create mode 100644 packages/testkit/.eslintrc.js delete mode 100644 packages/testkit/__TESTS__/button.spec.js delete mode 100644 packages/testkit/__TESTS__/checkbox.spec.js create mode 100644 packages/testkit/__tests__/button.test.js rename packages/testkit/{__TESTS__/buttonGroup.spec.js => __tests__/buttonGroup.test.js} (89%) create mode 100644 packages/testkit/__tests__/checkbox.test.js rename packages/testkit/{__TESTS__/dropdown.spec.js => __tests__/dropdown.test.js} (81%) rename packages/testkit/{__TESTS__/menuButton.spec.js => __tests__/menuButton.test.js} (81%) rename packages/testkit/{__TESTS__/textArea.spec.js => __tests__/textArea.test.js} (76%) rename packages/testkit/{__TESTS__/textfield.spec.js => __tests__/textfield.test.js} (77%) rename packages/testkit/{__TESTS__ => __tests__}/utils/url-helper.js (99%) delete mode 100644 packages/testkit/eslint.config.mjs diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 93b39bc347..8a2d89ef31 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -40,8 +40,7 @@ jobs: 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 + e2e: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -56,7 +55,7 @@ jobs: - uses: ./.github/actions/download-builds - name: Install playwright browsers run: npx playwright install --with-deps - - name: Run tests + - name: Run e2e tests run: yarn lerna run test:e2e $SINCE_FLAG --scope "@vibe/testkit" - uses: actions/upload-artifact@v4 if: ${{ always() }} @@ -64,4 +63,4 @@ jobs: name: test-results path: | packages/testkit/reports - packages/testkit/test-results \ No newline at end of file + packages/testkit/test-results diff --git a/packages/testkit/.eslintrc.js b/packages/testkit/.eslintrc.js new file mode 100644 index 0000000000..4e7dd544f9 --- /dev/null +++ b/packages/testkit/.eslintrc.js @@ -0,0 +1,59 @@ +const defaultPlugins = ["prettier"]; +const defaultExtends = ["eslint:recommended", "plugin:prettier/recommended"]; +const defaultRules = { + "prettier/prettier": "error" +}; + +const commonJsPlugins = defaultPlugins; +const commonJsExtends = defaultExtends; +const commonJsRules = { + ...defaultRules, + "no-unused-vars": ["error", { argsIgnorePattern: "^_" }] +}; + +const commonTsPlugins = [...defaultPlugins, "@typescript-eslint"]; +const commonTsExtends = [...defaultExtends, "plugin:@typescript-eslint/recommended"]; +const commonTsRules = { + ...defaultRules, + "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }], + "@typescript-eslint/no-explicit-any": "warn" +}; + +module.exports = { + ignorePatterns: ["node_modules", "dist"], + parserOptions: { + sourceType: "module" + }, + env: { + es2021: true, + node: true + }, + overrides: [ + { + files: ["**/*.js"], + extends: commonJsExtends, + plugins: commonJsPlugins, + rules: commonJsRules + }, + { + files: ["**/*.ts"], + parser: "@typescript-eslint/parser", + plugins: commonTsPlugins, + extends: commonTsExtends, + rules: commonTsRules + }, + { + files: ["./__tests__/*.test.js"], + plugins: [...commonJsPlugins, "playwright"], + extends: [...commonJsExtends, "plugin:playwright/recommended"], + rules: commonJsRules + }, + { + files: ["./__tests__/*.test.ts"], + parser: "@typescript-eslint/parser", + plugins: [...commonTsPlugins, "playwright"], + extends: [...commonTsExtends, "plugin:playwright/recommended"], + rules: commonTsRules + } + ] +}; diff --git a/packages/testkit/BaseElement.ts b/packages/testkit/BaseElement.ts index ae77c4814b..a66d4ce0ad 100644 --- a/packages/testkit/BaseElement.ts +++ b/packages/testkit/BaseElement.ts @@ -4,16 +4,16 @@ import { test, Page, Locator } from "@playwright/test"; * Class representing a base element for Playwright tests. */ export class BaseElement { - page : Page; - locator : Locator; - elementReportName: String + page: Page; + locator: Locator; + elementReportName: string; /** * Create a BaseElement. * @param {Object} page - The Playwright page object. * @param {Object} locator - The locator for the element. * @param {string} elementReportName - The name for reporting purposes. */ - constructor(page: Page, locator: Locator, elementReportName: String) { + constructor(page: Page, locator: Locator, elementReportName: string) { this.page = page; this.locator = locator; this.elementReportName = elementReportName; @@ -31,11 +31,12 @@ export class BaseElement { * Wait for the list elements to stabilize (i.e., the count of items remains constant for a specified duration). * @returns {Promise} */ - async waitForElementsGroup(locator: Locator, elementReportName: String): Promise { + async waitForElementsGroup(locator: Locator, elementReportName: string): Promise { await test.step(`Wait for ${elementReportName} items to stabilize`, async () => { let previousCount = 0; let stableCountTime = 0; const stabilizationTimeMs = 500; + // eslint-disable-next-line no-constant-condition while (true) { const currentCount = await this.locator.locator(locator).count(); @@ -58,12 +59,12 @@ export class BaseElement { * @returns {Promise} - Returns true if the element is enabled, otherwise false. */ async isEnabled(): Promise { - let isEnabled: boolean = false; - await test.step(`Return if ${this.elementReportName} is enabled`, async () => { - isEnabled = await this.locator.isEnabled(); - return isEnabled; - }); + let isEnabled = false; + await test.step(`Return if ${this.elementReportName} is enabled`, async () => { + isEnabled = await this.locator.isEnabled(); return isEnabled; + }); + return isEnabled; } /** @@ -75,15 +76,19 @@ export class BaseElement { await this.locator.scrollIntoViewIfNeeded(); }); } - async getAttributeValue(attributeName: string, options: any = { timeout: 10000, pollInterval: 500 }) : Promise { + async getAttributeValue( + attributeName: string, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + options: any = { timeout: 10000, pollInterval: 500 } + ): Promise { let attributeValue = null; - + await test.step(`Get attribute ${attributeName} of ${this.elementReportName}`, async () => { const startTime = Date.now(); - + while (Date.now() - startTime < options.timeout) { attributeValue = await this.locator.getAttribute(attributeName); - + if (attributeValue !== null) { break; } @@ -98,8 +103,8 @@ export class BaseElement { return attributeValue; } - async getText() : Promise { - let text: string|undefined; + async getText(): Promise { + let text: string | undefined; await test.step(`Get text of ${this.elementReportName}`, async () => { text = await this.locator.innerText(); return text; @@ -113,14 +118,14 @@ export class BaseElement { }); } - async waitForAbsence() : Promise{ + async waitForAbsence(): Promise { await test.step(`Wait for ${this.elementReportName} to be absent`, async () => { await this.waitFor({ state: "detached" }); }); } - async count() : Promise{ - let count: number=0; + async count(): Promise { + let count = 0; await test.step(`Count elements matching ${this.elementReportName}`, async () => { count = await this.locator.count(); }); diff --git a/packages/testkit/__TESTS__/button.spec.js b/packages/testkit/__TESTS__/button.spec.js deleted file mode 100644 index 1f3a94e435..0000000000 --- a/packages/testkit/__TESTS__/button.spec.js +++ /dev/null @@ -1,41 +0,0 @@ -import { test, expect } from '@playwright/test'; -import { Button } from '../buttons/Button'; -import { buttonStory } from './utils/url-helper'; - -test('should fire a click event and log to console', async ({ page }) => { - // Navigate to the Storybook page with the component - await page.goto(buttonStory, {timeout: 100000}); - // Locate the iframe where the button is rendered - const frame = page.frameLocator("[id='storybook-preview-iframe']"); - const button = new Button(page, frame.locator('button[data-testid="button"]'), 'Button'); - - //TODO - find a better way to wait for the storybook to load - while (await button.locator.isVisible() === false) { - await page.waitForTimeout(30000); - await page.reload(); - if (await button.locator.isVisible() === true) { - break; - } - } - // Add a listener to capture console logs - let consoleMessage = ''; - page.on('console', async (msg) => { - const values = await Promise.all(msg.args().map(arg => arg.jsonValue())); - consoleMessage = values.join(' '); - }); - - // Attach a click event listener that logs a message to the console - await button.locator.evaluate((buttonElement) => { - buttonElement.addEventListener('click', () => { - console.log('Button clicked'); // Log to console when clicked - }); - }); - // Click the button - await button.click(); - - // Wait a bit to ensure the console log is captured - await page.waitForTimeout(500); - - // Verify the console log contains the expected message - expect(consoleMessage).toContain('Button clicked'); -}); diff --git a/packages/testkit/__TESTS__/checkbox.spec.js b/packages/testkit/__TESTS__/checkbox.spec.js deleted file mode 100644 index 6c03dfbeee..0000000000 --- a/packages/testkit/__TESTS__/checkbox.spec.js +++ /dev/null @@ -1,24 +0,0 @@ -import { test, expect } from "@playwright/test"; -import { Checkbox } from "../inputs/Checkbox"; -import { checkboxStory } from "./utils/url-helper"; - -test.describe("menuButton Class with Storybook", () => { - let checkbox; - - test.beforeEach(async ({ page }) => { - await page.goto(checkboxStory); - const frame = page.frameLocator("[id='storybook-preview-iframe']"); - const checkboxLocator = frame.locator('[data-testid="checkbox-checkbox"]'); - checkbox = new Checkbox(page, checkboxLocator, "Test checkbox button"); - }); - - test("set checkbox", async ({page}) => { - if (await checkbox.isChecked()){ - await checkbox.setChecked(false); - expect(await checkbox.isChecked()).toBe(false); - }else { - await checkbox.setChecked(true); - expect(await checkbox.isChecked()).toBe(true); - } - }); -}); \ No newline at end of file diff --git a/packages/testkit/__tests__/button.test.js b/packages/testkit/__tests__/button.test.js new file mode 100644 index 0000000000..7f60935877 --- /dev/null +++ b/packages/testkit/__tests__/button.test.js @@ -0,0 +1,43 @@ +import { test, expect } from "@playwright/test"; +import { Button } from "../buttons/Button"; +import { buttonStory } from "./utils/url-helper"; + +test("should fire a click event and log to console", async ({ page }) => { + // Navigate to the Storybook page with the component + await page.goto(buttonStory, { timeout: 100000 }); + // Locate the iframe where the button is rendered + const frame = page.frameLocator("[id='storybook-preview-iframe']"); + const button = new Button(page, frame.locator('button[data-testid="button"]'), "Button"); + + //TODO - find a better way to wait for the storybook to load + while ((await button.locator.isVisible()) === false) { + // eslint-disable-next-line playwright/no-wait-for-timeout + await page.waitForTimeout(30000); + await page.reload(); + // eslint-disable-next-line playwright/no-conditional-in-test + if ((await button.locator.isVisible()) === true) { + break; + } + } + // Add a listener to capture console logs + let consoleMessage = ""; + page.on("console", async msg => { + const values = await Promise.all(msg.args().map(arg => arg.jsonValue())); + consoleMessage = values.join(" "); + }); + + // Attach a click event listener that logs a message to the console + await button.locator.evaluate(buttonElement => { + buttonElement.addEventListener("click", () => { + console.log("Button clicked"); // Log to console when clicked + }); + }); + // Click the button + await button.click(); + + // eslint-disable-next-line playwright/no-wait-for-timeout -- Wait a bit to ensure the console log is captured + await page.waitForTimeout(500); + + // Verify the console log contains the expected message + expect(consoleMessage).toContain("Button clicked"); +}); diff --git a/packages/testkit/__TESTS__/buttonGroup.spec.js b/packages/testkit/__tests__/buttonGroup.test.js similarity index 89% rename from packages/testkit/__TESTS__/buttonGroup.spec.js rename to packages/testkit/__tests__/buttonGroup.test.js index ba07572ca8..ad6e4c62d5 100644 --- a/packages/testkit/__TESTS__/buttonGroup.spec.js +++ b/packages/testkit/__tests__/buttonGroup.test.js @@ -2,7 +2,6 @@ import { test, expect } from "@playwright/test"; import { ButtonGroup } from "../buttons/ButtonGroup"; import { buttonGroupStory } from "./utils/url-helper"; - test.describe("ButtonGroup Class with Storybook", () => { let buttonGroup; @@ -15,10 +14,11 @@ test.describe("ButtonGroup Class with Storybook", () => { // Locate the button group inside the iframe const buttonGroupLocator = frame.locator('div[data-testid="button-group"]'); - while (await buttonGroupLocator.isVisible() === false) { + while ((await buttonGroupLocator.isVisible()) === false) { + // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(30000); await page.reload(); - if (await buttonGroupLocator.isVisible() === true) { + if ((await buttonGroupLocator.isVisible()) === true) { break; } } @@ -60,7 +60,7 @@ test.describe("ButtonGroup Class with Storybook", () => { // Click the button await buttonGroup.click("Beta"); - // Wait a bit to ensure the console log is captured + // eslint-disable-next-line playwright/no-wait-for-timeout -- Wait a bit to ensure the console log is captured await page.waitForTimeout(500); // Verify the console message contains the expected log diff --git a/packages/testkit/__tests__/checkbox.test.js b/packages/testkit/__tests__/checkbox.test.js new file mode 100644 index 0000000000..d1286d7122 --- /dev/null +++ b/packages/testkit/__tests__/checkbox.test.js @@ -0,0 +1,28 @@ +import { test, expect } from "@playwright/test"; +import { Checkbox } from "../inputs/Checkbox"; +import { checkboxStory } from "./utils/url-helper"; + +test.describe("menuButton Class with Storybook", () => { + let checkbox; + + test.beforeEach(async ({ page }) => { + await page.goto(checkboxStory); + const frame = page.frameLocator("[id='storybook-preview-iframe']"); + const checkboxLocator = frame.locator('[data-testid="checkbox-checkbox"]'); + checkbox = new Checkbox(page, checkboxLocator, "Test checkbox button"); + }); + + // eslint-disable-next-line no-unused-vars + test("set checkbox", async ({ page }) => { + // eslint-disable-next-line playwright/no-conditional-in-test + if (await checkbox.isChecked()) { + await checkbox.setChecked(false); + // eslint-disable-next-line playwright/prefer-web-first-assertions, playwright/no-conditional-expect + expect(await checkbox.isChecked()).toBe(false); + } else { + await checkbox.setChecked(true); + // eslint-disable-next-line playwright/prefer-web-first-assertions, playwright/no-conditional-expect + expect(await checkbox.isChecked()).toBe(true); + } + }); +}); diff --git a/packages/testkit/__TESTS__/dropdown.spec.js b/packages/testkit/__tests__/dropdown.test.js similarity index 81% rename from packages/testkit/__TESTS__/dropdown.spec.js rename to packages/testkit/__tests__/dropdown.test.js index 3db16d7a6e..3723dfe173 100644 --- a/packages/testkit/__TESTS__/dropdown.spec.js +++ b/packages/testkit/__tests__/dropdown.test.js @@ -13,10 +13,11 @@ test.describe("dropdown Class with Storybook", () => { }); test.fixme("set dropdown value", async ({ page }) => { - // extended wait for interaction test to finish + // eslint-disable-next-line playwright/no-wait-for-timeout -- extended wait for interaction test to finish await page.waitForTimeout(10000); await DropDown.inputField.setText(""); await DropDown.selectItem("2"); + // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(500); expect(await DropDown.getText()).toContain("2"); }); diff --git a/packages/testkit/__TESTS__/menuButton.spec.js b/packages/testkit/__tests__/menuButton.test.js similarity index 81% rename from packages/testkit/__TESTS__/menuButton.spec.js rename to packages/testkit/__tests__/menuButton.test.js index 42efcc601f..1f45a6bb45 100644 --- a/packages/testkit/__TESTS__/menuButton.spec.js +++ b/packages/testkit/__tests__/menuButton.test.js @@ -12,11 +12,13 @@ test.describe("menuButton Class with Storybook", () => { menuButton = new MenuButton(page, menubuttonLocator, "Test menu button"); }); - test("should open and close menu", async ({page}) => { + test("should open and close menu", async ({ page }) => { await menuButton.openMenu(); + // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(500); expect(await menuButton.isExpanded()).toBe(true); await menuButton.closeMenu(); + // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(500); expect(await menuButton.isExpanded()).toBe(false); }); diff --git a/packages/testkit/__TESTS__/textArea.spec.js b/packages/testkit/__tests__/textArea.test.js similarity index 76% rename from packages/testkit/__TESTS__/textArea.spec.js rename to packages/testkit/__tests__/textArea.test.js index c57cc2b33f..75f4f4e4a8 100644 --- a/packages/testkit/__TESTS__/textArea.spec.js +++ b/packages/testkit/__tests__/textArea.test.js @@ -4,7 +4,7 @@ import { textAreaStory } from "./utils/url-helper"; test.describe("textArea Class with Storybook", () => { let textArea; - let textAreaLocator + let textAreaLocator; test.beforeEach(async ({ page }) => { await page.goto(textAreaStory); @@ -13,8 +13,10 @@ test.describe("textArea Class with Storybook", () => { textArea = new TextArea(page, textAreaLocator, "Test text field"); }); - test("set text in textarea", async ({page}) => { + // eslint-disable-next-line no-unused-vars + test("set text in textarea", async ({ page }) => { await textArea.setText("Test Text"); + // eslint-disable-next-line playwright/missing-playwright-await expect(textArea.textAreaInput.locator).toHaveValue("Test Text"); }); -}); \ No newline at end of file +}); diff --git a/packages/testkit/__TESTS__/textfield.spec.js b/packages/testkit/__tests__/textfield.test.js similarity index 77% rename from packages/testkit/__TESTS__/textfield.spec.js rename to packages/testkit/__tests__/textfield.test.js index b8235a2e61..2418126b83 100644 --- a/packages/testkit/__TESTS__/textfield.spec.js +++ b/packages/testkit/__tests__/textfield.test.js @@ -4,7 +4,7 @@ import { textfieldStory } from "./utils/url-helper"; test.describe("textArea Class with Storybook", () => { let textField; - let textfieldLocator + let textfieldLocator; test.beforeEach(async ({ page }) => { await page.goto(textfieldStory); @@ -13,9 +13,11 @@ test.describe("textArea Class with Storybook", () => { textField = new TextField(page, textfieldLocator, "Test text field"); }); - test("set text in text field", async ({page}) => { + // eslint-disable-next-line no-unused-vars + test("set text in text field", async ({ page }) => { await textField.setText("Test Text"); await textField.exitEditMode(); + // eslint-disable-next-line playwright/missing-playwright-await expect(textField.locator).toHaveValue("Test Text"); }); -}); \ No newline at end of file +}); diff --git a/packages/testkit/__TESTS__/utils/url-helper.js b/packages/testkit/__tests__/utils/url-helper.js similarity index 99% rename from packages/testkit/__TESTS__/utils/url-helper.js rename to packages/testkit/__tests__/utils/url-helper.js index 22817cb5a6..6b9c70b216 100644 --- a/packages/testkit/__TESTS__/utils/url-helper.js +++ b/packages/testkit/__tests__/utils/url-helper.js @@ -5,4 +5,3 @@ export const dropdownStory = "/?path=/story/inputs-dropdown--overview"; export const menuButtonStory = "/?path=/story/buttons-menubutton--overview"; export const textAreaStory = "/?path=/story/inputs-textarea--overview"; export const textfieldStory = "/?path=/story/inputs-textfield--overview"; - diff --git a/packages/testkit/buttons/Button.ts b/packages/testkit/buttons/Button.ts index 796d4c21d6..bcf33bcba8 100644 --- a/packages/testkit/buttons/Button.ts +++ b/packages/testkit/buttons/Button.ts @@ -7,7 +7,7 @@ import { BaseElement } from "../BaseElement"; * Extends the BaseElement class. */ export class Button extends BaseElement { - override page : Page; + override page: Page; override locator: Locator; override elementReportName: string; /** @@ -27,7 +27,7 @@ export class Button extends BaseElement { * Execute click action on the element. * @returns {Promise} */ - async click() : Promise { + async click(): Promise { await test.step(`Click on: ${this.elementReportName}`, async () => { await this.locator.click(); }); diff --git a/packages/testkit/buttons/ButtonGroup.ts b/packages/testkit/buttons/ButtonGroup.ts index c7b6145878..75da7dbf37 100644 --- a/packages/testkit/buttons/ButtonGroup.ts +++ b/packages/testkit/buttons/ButtonGroup.ts @@ -7,14 +7,12 @@ import { Button } from "./Button"; * Extends the BaseElement class. */ export class ButtonGroup extends BaseElement { - - override page : Page; + override page: Page; override locator: Locator; override elementReportName: string; items: Button[]; buttonsInitialized: boolean; - constructor(page: Page, locator: Locator, elementReportName: string) { super(page, locator, elementReportName); this.page = page; @@ -54,13 +52,12 @@ export class ButtonGroup extends BaseElement { }); } - /** * Get a button by its name. * @param {string} buttonName - The name of the button to retrieve. * @returns {Button} The button with the specified name. */ - getButtonByName(buttonName: string): Button|undefined { + getButtonByName(buttonName: string): Button | undefined { if (!buttonName || typeof buttonName !== "string") { throw new Error("Invalid button name provided"); } @@ -75,14 +72,14 @@ export class ButtonGroup extends BaseElement { */ async click(buttonName: string): Promise { await this.initializeButtonsIfNeeded(); - + const button = this.getButtonByName(buttonName); - + // Throw an error if the button is not found if (!button) { throw new Error(`Invalid button name provided: ${buttonName}`); } - + await button.click(); } } diff --git a/packages/testkit/buttons/MenuButton.ts b/packages/testkit/buttons/MenuButton.ts index 964eada883..05b4f14942 100644 --- a/packages/testkit/buttons/MenuButton.ts +++ b/packages/testkit/buttons/MenuButton.ts @@ -9,7 +9,8 @@ export class MenuButton extends Button { override locator: Locator; override elementReportName: string; button: Button; - menu: any; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + menu: any; /** * Create a MenuButton. @@ -18,6 +19,7 @@ export class MenuButton extends Button { * @param {string} elementReportName - The name for reporting purposes. * @param {any} menuType - The type of menu associated with the button. */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any constructor(page: Page, locator: Locator, elementReportName: string, menuType: any) { super(page, locator, elementReportName); this.page = page; diff --git a/packages/testkit/buttons/SplitButton.ts b/packages/testkit/buttons/SplitButton.ts index 434df0f077..729774dedd 100644 --- a/packages/testkit/buttons/SplitButton.ts +++ b/packages/testkit/buttons/SplitButton.ts @@ -5,9 +5,9 @@ import { Button } from "./Button"; * Class representing a split button that extends the Button class. */ export class SplitButton extends Button { - override page: Page; - override locator: Locator; - override elementReportName: string; + override page: Page; + override locator: Locator; + override elementReportName: string; /** * Create a SplitButton. diff --git a/packages/testkit/eslint.config.mjs b/packages/testkit/eslint.config.mjs deleted file mode 100644 index 53b77e189d..0000000000 --- a/packages/testkit/eslint.config.mjs +++ /dev/null @@ -1,6 +0,0 @@ -// eslint.config.js -export default [ -{ - ignores: ["node_modules/", "dist/", "*.config.js", "*.spec.js"], -} -]; \ No newline at end of file diff --git a/packages/testkit/index.ts b/packages/testkit/index.ts index b903f04a4b..c74e1ef1eb 100644 --- a/packages/testkit/index.ts +++ b/packages/testkit/index.ts @@ -5,4 +5,4 @@ export * from "./navigation"; export * from "./popover"; export * from "./text"; export * from "./utils/common-actions"; -export * from "./BaseElement"; \ No newline at end of file +export * from "./BaseElement"; diff --git a/packages/testkit/navigation/List.ts b/packages/testkit/navigation/List.ts index 7d4ba00093..531d95fb5d 100644 --- a/packages/testkit/navigation/List.ts +++ b/packages/testkit/navigation/List.ts @@ -76,4 +76,4 @@ export class List extends BaseElement { await item.scrollIntoView(); await item.click(); } -} \ No newline at end of file +} diff --git a/packages/testkit/navigation/TabList.ts b/packages/testkit/navigation/TabList.ts index af5b1eb19e..064465e707 100644 --- a/packages/testkit/navigation/TabList.ts +++ b/packages/testkit/navigation/TabList.ts @@ -7,7 +7,7 @@ import { Tab } from "./Tab"; * Extends the BaseElement class. */ export class TabList extends BaseElement { - private items: Tab[]; // List of tabs + private items: Tab[]; // List of tabs private tabsInitialized: boolean; /** @@ -44,7 +44,7 @@ export class TabList extends BaseElement { await this.waitForElementsGroup(this.locator.locator("li"), this.elementReportName); const tabElements = await this.locator.locator("li").all(); this.items = await Promise.all( - tabElements.map(async (locator) => { + tabElements.map(async locator => { const tabName = await locator.innerText(); return new Tab(this.page, locator.getByText(`${tabName}`), `Tab Item: ${tabName}`); }) diff --git a/packages/testkit/package.json b/packages/testkit/package.json index e9719c84f6..f1a504d5cd 100644 --- a/packages/testkit/package.json +++ b/packages/testkit/package.json @@ -30,7 +30,7 @@ "build:esm": "tsc --project tsconfig.esm.json", "build": "yarn build:cjs && yarn build:esm", "start-server": "yarn lerna run storybook --scope=monday-ui-react-core", - "lint": "eslint \"./**/*.{js,jsx,ts,tsx}\"", + "lint": "eslint . --max-warnings=0", "lint:fix": "yarn lint -- --fix" }, "bugs": { @@ -38,6 +38,12 @@ }, "devDependencies": { "@playwright/test": "1.45.3", - "eslint": "^8.23.0" + "@typescript-eslint/eslint-plugin": "^5.36.1", + "@typescript-eslint/parser": "^5.36.1", + "eslint": "^8.23.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-playwright": "^2.1.0", + "eslint-plugin-prettier": "^4.0.0", + "prettier": "^2.5.1" } } diff --git a/packages/testkit/pickers/ColorPicker.ts b/packages/testkit/pickers/ColorPicker.ts index e45a501f59..3abfbc4774 100644 --- a/packages/testkit/pickers/ColorPicker.ts +++ b/packages/testkit/pickers/ColorPicker.ts @@ -33,7 +33,7 @@ export class ColorPicker extends BaseElement { * Get the currently selected color. * @returns {Promise} The selected color. */ - async getSelectedColor(): Promise { + async getSelectedColor(): Promise { const selectedColor = new BaseElement( this.page, this.locator.locator("//*[contains(@class, 'selectedColor')]"), @@ -41,6 +41,6 @@ export class ColorPicker extends BaseElement { ); const dataTestIdAttr = await selectedColor.getAttributeValue("data-testId"); const parts = dataTestIdAttr?.split("_"); - return parts?.slice(-2).join("_"); // Returning the last two parts as the selected color + return parts?.slice(-2).join("_"); // Returning the last two parts as the selected color } } diff --git a/packages/testkit/playwright.config.ts b/packages/testkit/playwright.config.ts index 2fbc9db00c..2ee1b108d2 100644 --- a/packages/testkit/playwright.config.ts +++ b/packages/testkit/playwright.config.ts @@ -1,4 +1,4 @@ -import { defineConfig } from '@playwright/test'; +import { defineConfig } from "@playwright/test"; import path from "path"; /** @@ -8,17 +8,17 @@ export default defineConfig({ fullyParallel: false, workers: 1, reporter: [["html", { open: "never", outputFolder: path.join(process.cwd(), "/reports") }]], - + // Run your local dev server before starting the tests webServer: { - command: 'yarn start-server', - url: 'http://127.0.0.1:7008', + command: "yarn start-server", + url: "http://127.0.0.1:7008", reuseExistingServer: !process.env.CI, timeout: 120 * 1000, - stdout: 'ignore', - stderr: 'pipe', + stdout: "ignore", + stderr: "pipe" }, - + use: { headless: true, baseURL: "http://127.0.0.1:7008", @@ -30,5 +30,5 @@ export default defineConfig({ args: ["--disable-web-security"] } }, - timeout: 180 * 1000, + timeout: 180 * 1000 }); diff --git a/packages/testkit/popover/Dialog.ts b/packages/testkit/popover/Dialog.ts index d45f52a384..e552b4d7c6 100644 --- a/packages/testkit/popover/Dialog.ts +++ b/packages/testkit/popover/Dialog.ts @@ -1,6 +1,6 @@ import { Page, Locator } from "@playwright/test"; import { BaseElement } from "../BaseElement"; -import { Button } from "../buttons/Button"; +import { Button } from "../buttons/Button"; /** * Class representing a Dialog element. diff --git a/packages/testkit/tsconfig.json b/packages/testkit/tsconfig.json index aa57a38526..848b3eb15a 100644 --- a/packages/testkit/tsconfig.json +++ b/packages/testkit/tsconfig.json @@ -15,5 +15,6 @@ "sourceMap": true }, "include": ["./**/*.ts"], - "exclude": ["__TESTS__", "./playwright.config.ts", "node_modules", "dist"] -} \ No newline at end of file + "exclude": [ + "__tests__", "./playwright.config.ts", "node_modules", "dist"] +} diff --git a/yarn.lock b/yarn.lock index 944825241f..483a0df70d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9494,6 +9494,13 @@ eslint-plugin-only-warn@^1.0.3: resolved "https://registry.npmjs.org/eslint-plugin-only-warn/-/eslint-plugin-only-warn-1.1.0.tgz#c6ddc37ddc4e72c121f07be565fcb7b6671fe78a" integrity sha512-2tktqUAT+Q3hCAU0iSf4xAN1k9zOpjK5WO8104mB0rT/dGhOa09582HN5HlbxNbPRZ0THV7nLGvzugcNOSjzfA== +eslint-plugin-playwright@^2.1.0: + version "2.1.0" + resolved "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-2.1.0.tgz#9d84b5d839226e1f9ac926663baee29d103dcc99" + integrity sha512-wMbHOehofSB1cBdzz2CLaCYaKNLeTQ0YnOW+7AHa281TJqlpEJUBgTHbRUYOUxiXphfWwOyTPvgr6vvEmArbSA== + dependencies: + globals "^13.23.0" + eslint-plugin-prettier@^4.0.0: version "4.2.1" resolved "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b" @@ -10733,7 +10740,7 @@ globals@^11.1.0: resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== -globals@^13.19.0: +globals@^13.19.0, globals@^13.23.0: version "13.24.0" resolved "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171" integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ== @@ -18467,7 +18474,16 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -18553,7 +18569,7 @@ stringify-entities@^4.0.0: character-entities-html4 "^2.0.0" character-entities-legacy "^3.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -18574,6 +18590,13 @@ strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -20416,7 +20439,7 @@ workerpool@6.2.1: resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343" integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -20434,6 +20457,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 01a677ab1665cbb34c1a975663fb7195e2adf3df Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 21 Nov 2024 15:29:09 +0200 Subject: [PATCH 31/32] feat(Search): allow tracking Enter key press (#2600) --- .../core/src/components/Search/Search.tsx | 9 +++-- .../src/components/Search/Search.types.ts | 6 +++- .../Search/__tests__/Search.test.tsx | 36 ++++++++++++++++--- 3 files changed, 41 insertions(+), 10 deletions(-) diff --git a/packages/core/src/components/Search/Search.tsx b/packages/core/src/components/Search/Search.tsx index 62257d38c5..490f697e68 100644 --- a/packages/core/src/components/Search/Search.tsx +++ b/packages/core/src/components/Search/Search.tsx @@ -35,6 +35,7 @@ const Search = forwardRef( onFocus, onBlur, onClear, + onKeyDown, className, ariaExpanded, ariaHasPopup, @@ -53,14 +54,11 @@ const Search = forwardRef( }); const onClearButtonClick = useCallback(() => { - if (disabled) { - return; - } - + if (disabled) return; inputRef.current?.focus?.(); clearValue(); onClear?.(); - }, [disabled, clearValue]); + }, [disabled, clearValue, onClear]); const SearchIcon = ( void; + /** + * Callback function that is called when a keyboard key is down. + */ + onKeyDown?: (event: React.KeyboardEvent) => void; } diff --git a/packages/core/src/components/Search/__tests__/Search.test.tsx b/packages/core/src/components/Search/__tests__/Search.test.tsx index ec50361156..79a0c397b7 100644 --- a/packages/core/src/components/Search/__tests__/Search.test.tsx +++ b/packages/core/src/components/Search/__tests__/Search.test.tsx @@ -24,19 +24,19 @@ describe("Search", () => { expect(queryByLabelText("Clear")).toBeNull(); }); - it("should display both the search icon and clear icon when input has value", async () => { + it("should display both the search icon and clear icon when input has value", () => { const { getByTestId, getAllByTestId } = renderSearch({ value: "Test" }); expect(getAllByTestId("icon")).toHaveLength(2); expect(getByTestId("clean-search-button")).toBeInTheDocument(); }); - it("should clear the input value when the clear icon is clicked", async () => { + it("should clear the input value when the clear icon is clicked", () => { const { getByRole, getByLabelText } = renderSearch({ value: "Test" }); userEvent.click(getByLabelText("Clear")); expect(getByRole("searchbox")).toHaveValue(""); }); - it("should display the clear icon once user inputs", async () => { + it("should display the clear icon once user inputs", () => { const { getByRole, getByTestId } = renderSearch(); userEvent.type(getByRole("searchbox"), "Test"); expect(getByTestId("clean-search-button")).toBeInTheDocument(); @@ -63,7 +63,7 @@ describe("Search", () => { expect(onClear).toHaveBeenCalled; }); - it("should debounce the onChange call", async () => { + it("should debounce the onChange call", () => { jest.useFakeTimers(); const onChange = jest.fn(); @@ -153,5 +153,33 @@ describe("Search", () => { userEvent.tab(); expect(onBlur).toHaveBeenCalled(); }); + + it("should call onKeyDown when Enter key is pressed", () => { + const onKeyDown = jest.fn(); + const { getByRole } = renderSearch({ onKeyDown }); + const input = getByRole("searchbox"); + userEvent.click(input); + userEvent.keyboard("{Enter}"); + expect(onKeyDown).toHaveBeenCalledTimes(1); + }); + + it("should not call onKeyDown when input is disabled", () => { + const onKeyDown = jest.fn(); + const { getByRole } = renderSearch({ onKeyDown, disabled: true }); + const input = getByRole("searchbox"); + userEvent.click(input); + userEvent.keyboard("{Enter}"); + expect(onKeyDown).not.toHaveBeenCalled(); + }); + + it("should call onKeyDown for each character when input is typed with content", () => { + const onKeyDown = jest.fn(); + const string = "Hello, World!"; + const { getByRole } = renderSearch({ onKeyDown }); + const input = getByRole("searchbox"); + userEvent.click(input); + userEvent.type(input, string); + expect(onKeyDown).toHaveBeenCalledTimes(string.length); + }); }); }); From 9a7bad770bd5966210684236663de577345c5a5a Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Thu, 21 Nov 2024 15:44:05 +0200 Subject: [PATCH 32/32] fix(TextSmall): fix icon (#2604) --- .../core/src/components/Icon/Icons/components/TextSmall.tsx | 3 +-- packages/style/src/Icons/TextSmall.svg | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/Icon/Icons/components/TextSmall.tsx b/packages/core/src/components/Icon/Icons/components/TextSmall.tsx index 0bf5148eff..aa8f163274 100644 --- a/packages/core/src/components/Icon/Icons/components/TextSmall.tsx +++ b/packages/core/src/components/Icon/Icons/components/TextSmall.tsx @@ -6,8 +6,7 @@ size?: string | number; } const TextSmall: React.FC = ({size, ...props}) => ( - + ); TextSmall.displayName = 'TextSmall'; diff --git a/packages/style/src/Icons/TextSmall.svg b/packages/style/src/Icons/TextSmall.svg index 6a54ad7b04..4a1a7a5a4f 100644 --- a/packages/style/src/Icons/TextSmall.svg +++ b/packages/style/src/Icons/TextSmall.svg @@ -1,3 +1,3 @@ - - + +