diff --git a/src/components/Modal/Dialog.mdx b/src/components/Modal/Dialog.mdx index 4f7db6f8a..7ab371cd1 100644 --- a/src/components/Modal/Dialog.mdx +++ b/src/components/Modal/Dialog.mdx @@ -21,9 +21,9 @@ Dialog are opened via method `openDialog` from [useModal](../?path=/docs/composa ## Styling -The style of the modal can be changed by passing the prop `type`. It accepts the following values: +The style of the modal can be changed by passing the prop `modalStyle`. It accepts the following values: -- **`default`**: The standard modal style that uses primary color styling. This serves as the default value for the modal type. +- **`default`**: The standard modal style that uses primary color styling. This serves as the default value for the modal style. - **`negative`**: Indicates a negative state, typically for error messages or alerts. - **`success`**: Represents a positive state, often used for success notifications. diff --git a/src/components/Modal/Dialog.stories.js b/src/components/Modal/Dialog.stories.js index 437d10138..114c3d854 100644 --- a/src/components/Modal/Dialog.stories.js +++ b/src/components/Modal/Dialog.stories.js @@ -184,7 +184,7 @@ export const NegativeState = { }, ], close: () => console.log('closed full example dialog'), // eslint-disable-line, - type: 'negative', + modalStyle: 'negative', }, play: async ({canvasElement}) => { // Assigns canvas to the component root element @@ -209,7 +209,7 @@ export const SuccessState = { }, ], close: () => console.log('closed full example dialog'), // eslint-disable-line, - type: 'success', + modalStyle: 'success', }, play: async ({canvasElement}) => { // Assigns canvas to the component root element diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue index 9c6223329..468b635df 100644 --- a/src/components/Modal/Dialog.vue +++ b/src/components/Modal/Dialog.vue @@ -111,7 +111,7 @@ const props = defineProps({ /** Callback when dialog is being closed by close button or clicking outside of the modal */ close: {type: Function, default: null}, /** Defines the visual style of the modal: 'default' (primary color), 'negative', or 'success'. */ - type: { + modalStyle: { type: String, default: () => 'default', validator: (value) => ['default', 'negative', 'success'].includes(value), @@ -120,13 +120,13 @@ const props = defineProps({ const styles = computed(() => ({ 'modal__panel modal__panel--dialog relative mx-3 w-10/12 max-w-3xl transform overflow-hidden rounded bg-secondary text-start shadow transition-all sm:my-8': true, - 'border-s-[14px] border-primary': props.type === 'default', - 'border-s-[14px] border-success': props.type === 'success', - 'border-s-[14px] border-negative': props.type === 'negative', + 'border-s-[14px] border-primary': props.modalStyle === 'default', + 'border-s-[14px] border-success': props.modalStyle === 'success', + 'border-s-[14px] border-negative': props.modalStyle === 'negative', })); const icon = computed(() => { - switch (props.type) { + switch (props.modalStyle) { case 'negative': return 'Cancel'; case 'success': @@ -138,8 +138,8 @@ const icon = computed(() => { const iconStyles = computed(() => ({ 'flex h-12 w-12 items-center justify-center rounded-full': true, - 'bg-success': props.type === 'success', - 'bg-negative': props.type === 'negative', + 'bg-success': props.modalStyle === 'success', + 'bg-negative': props.modalStyle === 'negative', })); const emit = defineEmits(['close']);