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',
icon: 'p-message-icon',
text: 'p-message-text',
button: 'p-message-close p-link',
buttonIcon: 'p-message-close-icon'
closeButton: 'p-message-close p-link',
closeIcon: 'p-message-close-icon'
};
const { load: loadStyle } = useStyle(styles, { name: 'message', manual: true });

View File

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

View File

@ -8,10 +8,10 @@
<div class="p-message-text" :class="cx('text')" v-bind="ptm('text')">
<slot></slot>
</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">
<i v-if="closeIcon" :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" />
<TimesIcon v-else :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('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" />
</slot>
</button>
</div>