diff --git a/.changeset/gorgeous-weeks-learn.md b/.changeset/gorgeous-weeks-learn.md deleted file mode 100644 index 8f5c19672..000000000 --- a/.changeset/gorgeous-weeks-learn.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@appsmithorg/design-system": patch ---- - -update DropdownOption to TableDropdownOption and export for typechecking ease diff --git a/.changeset/large-beans-brush.md b/.changeset/large-beans-brush.md new file mode 100644 index 000000000..d9ec4bdf9 --- /dev/null +++ b/.changeset/large-beans-brush.md @@ -0,0 +1,5 @@ +--- +"@appsmithorg/design-system": patch +--- + +fix: Button and ButtonTab component issue in onclick functions diff --git a/.changeset/yellow-wasps-work.md b/.changeset/yellow-wasps-work.md deleted file mode 100644 index 4a8791b4d..000000000 --- a/.changeset/yellow-wasps-work.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@appsmithorg/design-system": patch ---- - -feat: Added button test diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index 9cfa98ad9..60ca6a049 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,17 @@ # @appsmithorg/design-system +## 1.0.12 + +### Patch Changes + +- [#105](https://github.com/appsmithorg/design-system/pull/105) [`444cee2`](https://github.com/appsmithorg/design-system/commit/444cee2ace642335988ebab974f02ff17a775f9c) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - update DropdownOption to TableDropdownOption and export for typechecking ease + +## 1.0.11 + +### Patch Changes + +- [#100](https://github.com/appsmithorg/design-system/pull/100) [`cedb54d`](https://github.com/appsmithorg/design-system/commit/cedb54d0f357389f5db571fdb5a20ad3c675885d) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Added button test + ## 1.0.10 ### Patch Changes diff --git a/packages/design-system/package.json b/packages/design-system/package.json index cacb581bb..eab168093 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@appsmithorg/design-system", - "version": "1.0.10", + "version": "1.0.12", "description": "This is the package for the Appsmith design system components", "module": "build/index.js", "types": "build/index.d.ts", diff --git a/packages/design-system/src/Button/index.tsx b/packages/design-system/src/Button/index.tsx index 8489e50b8..3a4ea8f07 100644 --- a/packages/design-system/src/Button/index.tsx +++ b/packages/design-system/src/Button/index.tsx @@ -557,14 +557,15 @@ const getButtonContent = (props: ButtonProps) => { }; function ButtonComponent(props: ButtonProps) { + const { className, cypressSelector, isLoading, onClick } = props; const omitProps = ["fill"]; return ( ) => - props.onClick && !props.isLoading && props.onClick(e) + onClick && !isLoading && onClick(e) } > {getButtonContent(props)} @@ -573,15 +574,14 @@ function ButtonComponent(props: ButtonProps) { } function LinkButtonComponent(props: ButtonProps) { + const { className, cypressSelector, href, onClick } = props; return ( ) => - props.onClick && props.onClick(e) - } + onClick={(e: React.MouseEvent) => onClick && onClick(e)} > {getButtonContent(props)} diff --git a/packages/design-system/src/ButtonTab/index.tsx b/packages/design-system/src/ButtonTab/index.tsx index 31e3e523b..a2c08a657 100644 --- a/packages/design-system/src/ButtonTab/index.tsx +++ b/packages/design-system/src/ButtonTab/index.tsx @@ -58,9 +58,10 @@ interface ButtonTabComponentProps { // eslint-disable-next-line react/display-name const ButtonTabComponent = React.forwardRef( (props: ButtonTabComponentProps, ref: any) => { - const valueSet = new Set(props.values); + const { options, selectButton, values } = props; + const valueSet = new Set(values); let firstValueIndex = 0; - for (const [i, x] of props.options.entries()) { + for (const [i, x] of options.entries()) { if (valueSet.has(x.value)) { firstValueIndex = i; break; @@ -93,20 +94,20 @@ const ButtonTabComponent = React.forwardRef( case "Right": emitKeyPressEvent(e.key); setFocusedIndex((prev) => - prev === props.options.length - 1 ? 0 : prev + 1, + prev === options.length - 1 ? 0 : prev + 1, ); break; case "ArrowLeft": case "Left": emitKeyPressEvent(e.key); setFocusedIndex((prev) => - prev === 0 ? props.options.length - 1 : prev - 1, + prev === 0 ? options.length - 1 : prev - 1, ); break; case "Enter": case " ": emitKeyPressEvent(e.key); - props.selectButton(props.options[focusedIndex].value, true); + selectButton(options[focusedIndex].value, true); e.preventDefault(); break; case "Tab": @@ -124,7 +125,7 @@ const ButtonTabComponent = React.forwardRef( role="tablist" tabIndex={0} > - {props.options.map( + {options.map( ({ icon, value, width = 24 }: ButtonTabOption, index: number) => { let ControlIcon; if (_.isString(icon)) { @@ -142,7 +143,7 @@ const ButtonTabComponent = React.forwardRef( }`} key={index} onClick={() => { - props.selectButton(value, false); + selectButton(value, false); setFocusedIndex(index); }} role="tab"