diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png index 12e526ce63..9ca4c0fab0 100644 Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png differ diff --git a/src/components/button/IconButton.stories.ts b/src/components/button/IconButton.stories.ts index a0194a2407..7caf298e9a 100644 --- a/src/components/button/IconButton.stories.ts +++ b/src/components/button/IconButton.stories.ts @@ -16,6 +16,14 @@ const meta: Meta = { control: { type: 'select' }, options: ['primary', 'secondary', 'transparent'] }, + border: { + control: 'boolean', + description: 'Toggle border attribute' + }, + disabled: { + control: 'boolean', + description: 'Toggle disable status' + }, onClick: { action: 'clicked' } } } diff --git a/src/components/button/IconButton.vue b/src/components/button/IconButton.vue index 1a38866f75..1f5b24bac5 100644 --- a/src/components/button/IconButton.vue +++ b/src/components/button/IconButton.vue @@ -1,5 +1,5 @@ @@ -11,6 +11,7 @@ import { computed } from 'vue' import type { BaseButtonProps } from '@/types/buttonTypes' import { getBaseButtonClasses, + getBorderButtonTypeClasses, getButtonTypeClasses, getIconButtonSizeClasses } from '@/types/buttonTypes' @@ -22,6 +23,8 @@ interface IconButtonProps extends BaseButtonProps { const { size = 'md', type = 'secondary', + border = false, + disabled = false, class: className, onClick } = defineProps() @@ -29,7 +32,9 @@ const { const buttonStyle = computed(() => { const baseClasses = `${getBaseButtonClasses()} p-0` const sizeClasses = getIconButtonSizeClasses(size) - const typeClasses = getButtonTypeClasses(type) + const typeClasses = border + ? getBorderButtonTypeClasses(type) + : getButtonTypeClasses(type) return [baseClasses, sizeClasses, typeClasses, className] .filter(Boolean) diff --git a/src/components/button/IconTextButton.stories.ts b/src/components/button/IconTextButton.stories.ts index 3c08c418a9..da07d9a669 100644 --- a/src/components/button/IconTextButton.stories.ts +++ b/src/components/button/IconTextButton.stories.ts @@ -28,6 +28,14 @@ const meta: Meta = { control: { type: 'select' }, options: ['primary', 'secondary', 'transparent'] }, + border: { + control: 'boolean', + description: 'Toggle border attribute' + }, + disabled: { + control: 'boolean', + description: 'Toggle disable status' + }, iconPosition: { control: { type: 'select' }, options: ['left', 'right'] diff --git a/src/components/button/IconTextButton.vue b/src/components/button/IconTextButton.vue index 12aeba3cae..8bcdc3bf1c 100644 --- a/src/components/button/IconTextButton.vue +++ b/src/components/button/IconTextButton.vue @@ -1,5 +1,5 @@ -
+
@@ -45,35 +51,35 @@