Fixed #4159 - Rename button and buttonIcon pt options with closeButton and closeIcon options in Message

pull/4172/head
mertsincan 2023-07-19 09:21:09 +01:00
parent ee4dfdcdd4
commit 822d217a87
3 changed files with 15 additions and 5 deletions

View File

@ -53,8 +53,8 @@ const classes = {
wrapper: 'p-message-wrapper', wrapper: 'p-message-wrapper',
icon: 'p-message-icon', icon: 'p-message-icon',
text: 'p-message-text', text: 'p-message-text',
button: 'p-message-close p-link', closeButton: 'p-message-close p-link',
buttonIcon: 'p-message-close-icon' closeIcon: 'p-message-close-icon'
}; };
const { load: loadStyle } = useStyle(styles, { name: 'message', manual: true }); const { load: loadStyle } = useStyle(styles, { name: 'message', manual: true });

View File

@ -45,12 +45,22 @@ export interface MessagePassThroughOptions {
text?: MessagePassThroughOptionType; text?: MessagePassThroughOptionType;
/** /**
* Uses to pass attributes to the button's DOM element. * Uses to pass attributes to the button's DOM element.
* @deprecated since v3.30.2. Use 'closeButton' option.
*/ */
button?: MessagePassThroughOptionType; button?: MessagePassThroughOptionType;
/**
* Uses to pass attributes to the button's DOM element.
*/
closeButton?: MessagePassThroughOptionType;
/** /**
* Uses to pass attributes to the button icon's DOM element. * Uses to pass attributes to the button icon's DOM element.
* @deprecated since v3.30.2. Use 'closeIcon' option.
*/ */
buttonIcon?: MessagePassThroughOptionType; buttonIcon?: MessagePassThroughOptionType;
/**
* Uses to pass attributes to the button icon's DOM element.
*/
closeIcon?: MessagePassThroughOptionType;
/** /**
* Uses to manage all lifecycle hooks * Uses to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

View File

@ -8,10 +8,10 @@
<div class="p-message-text" :class="cx('text')" v-bind="ptm('text')"> <div class="p-message-text" :class="cx('text')" v-bind="ptm('text')">
<slot></slot> <slot></slot>
</div> </div>
<button v-if="closable" v-ripple :class="cx('button')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('button') }"> <button v-if="closable" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('button'), ...ptm('closeButton') }">
<slot name="closeicon"> <slot name="closeicon">
<i v-if="closeIcon" :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" /> <i v-if="closeIcon" :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" />
<TimesIcon v-else :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" /> <TimesIcon v-else :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" />
</slot> </slot>
</button> </button>
</div> </div>