Skip to content

Commit

Permalink
pkp/pkp-lib#10444 Rename prop type with modalStyle
Browse files Browse the repository at this point in the history
  • Loading branch information
blesildaramirez committed Oct 7, 2024
1 parent 9f088c8 commit 136b3e3
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 11 deletions.
4 changes: 2 additions & 2 deletions src/components/Modal/Dialog.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions src/components/Modal/Dialog.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
14 changes: 7 additions & 7 deletions src/components/Modal/Dialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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':
Expand All @@ -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']);
Expand Down

0 comments on commit 136b3e3

Please sign in to comment.