Merge pull request #6595 from nextcloud-libraries/backport/6472/next

[next] feat: Add consistent `variant` prop for design variant of buttons / chips

Author: susnux

CHANGELOG.md

@@ -96,6 +96,20 @@ are now removed. Following components have been adjusted:
 
 Additionally the default value `closeOnClickOutside` for `NcModal` was aligned with `NcDialog` and now defaults to `false`.
 
+#### Removal of `type` and `nativeType` props
+
+The `type`  property for button components (`NcButton`, `NcActions`, `NcDialogButton`) was deprecated for the usage with color variants like `primary`.
+The fallback behavior was removed, `type` now only allows the native HTML button type like `button`, `reset` or `submit`.
+Instead use the `variant` property for the color variant.
+
+The `nativeType` property was removed in favor of `type`.
+```vue
+<!-- Old: Nextcloud Vue v8 -->
+<NcButton type="primary" native-type="submit">Submit</NcButton>
+<!-- New: Nextcloud Vue v9 -->
+<NcButton type="submit" variant="primary">Submit</NcButton>
+```
+
 #### Mixins are removed
 Mixins only work in Options API and are in general not recommended by Vue anymore:
 

src/components/NcActions/NcActions.vue

@@ -444,12 +444,12 @@ export default {
 </script>
 ```
 
-### Type variants
+### Design variants
 
 ```vue
 <template>
 	<div>
-		<NcActions :type="current">
+		<NcActions :variant="current">
 			<template #icon>
 				<SelectColor :size="20" />
 			</template>
@@ -461,7 +461,7 @@ export default {
 				Remove
 			</NcActionButton>
 
-			<NcActionButton v-for="row in types" close-after-click @click="define(row)" :key="`type-icon--${row}`">
+			<NcActionButton v-for="row in variants" close-after-click @click="define(row)" :key="`type-icon--${row}`">
 				<template #icon>
 					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
 					<SelectColor v-else :size="20" />
@@ -470,15 +470,15 @@ export default {
 			</NcActionButton>
 		</NcActions>
 
-		<NcActions :type="current" menu-name="Choose a type">
+		<NcActions :variant="current" menu-name="Choose a variant">
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
 					<Delete :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
 
-			<NcActionButton v-for="row in types" close-after-click @click="define(row)" :key="`type-text--${row}`">
+			<NcActionButton v-for="row in variants" close-after-click @click="define(row)" :key="`type-text--${row}`">
 				<template #icon>
 					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
 					<SelectColor v-else :size="20" />
@@ -487,7 +487,7 @@ export default {
 			</NcActionButton>
 		</NcActions>
 
-		<NcActions :type="current"  menu-name="Choose a type">
+		<NcActions :variant="current"  menu-name="Choose a variant">
 			<template #icon>
 				<SelectColor :size="20" />
 			</template>
@@ -499,7 +499,7 @@ export default {
 				Remove
 			</NcActionButton>
 
-			<NcActionButton v-for="row in types" close-after-click @click="define(row)" :key="`type-icon-text--${row}`">
+			<NcActionButton v-for="row in variants" close-after-click @click="define(row)" :key="`type-icon-text--${row}`">
 				<template #icon>
 					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
 					<SelectColor v-else :size="20" />
@@ -526,7 +526,7 @@ export default {
 	data() {
 		return {
 			current: 'primary',
-			types: [
+			variants: [
 				'primary',
 				'secondary',
 				'tertiary',
@@ -554,7 +554,7 @@ export default {
 		<p>Has buttons, button groups, links and router links, separators, texts. May have checkboxes and radio buttons. Separator can be used to make groups of radio buttons as well.</p>
 		<p><kbd>Arrows</kbd> are used to navigate between items, <kbd>Tab</kbd> is used to navigate to the next UI element on the page.</p>
 		<p>
-			<NcActions aria-label="Email menu" type="tertiary">
+			<NcActions aria-label="Email menu" variant="tertiary">
 				<NcActionButtonGroup>
 					<NcActionButton>
 						<template #icon>
@@ -606,11 +606,11 @@ export default {
 			</NcActions>
 		</p>
 		<p>
-			<NcActions aria-label="Text settings" type="tertiary">
+			<NcActions aria-label="Text settings" variant="tertiary">
 				<template #icon>
 					<FormatTitle :size="20" />
 				</template>
-				<NcActionButtonGroup name="Allignment">
+				<NcActionButtonGroup name="Alignment">
 					<NcActionButton aria-label="Left">
 						<template #icon>
 							<FormatAlignLeft :size="20" />
@@ -658,7 +658,7 @@ export default {
 		<p>Has links or router links. May use text elements, captions and separators.</p>
 		<p>Uses classic <kbd>Tab</kbd> navigation.</p>
 		<p>
-			<NcActions aria-label="Applications navigation" :inline="2" type="tertiary">
+			<NcActions aria-label="Applications navigation" :inline="2" variant="tertiary">
 				<NcActionLink href="/apps/dashboard" icon="icon-category-dashboard-white">
 					Dashboard
 				</NcActionLink>
@@ -697,7 +697,7 @@ export default {
 		</p>
 
 		<h2>Tooltip</h2>
-		Has only text and not interactive elements
+		<p>Has only text and no interactive elements.</p>
 		<p>
 			<NcActions aria-label="Contact" :inline="1">
 				<NcActionLink aria-label="View profile" href="/u/alice" icon="icon-user-white">
@@ -726,7 +726,7 @@ import CheckIcon from 'vue-material-design-icons/Check.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
 
-// Formating icons
+// Formatting icons
 import FormatTitle from 'vue-material-design-icons/FormatTitle.vue'
 import FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
 import FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
@@ -751,7 +751,7 @@ export default {
 		OpenInNewIcon,
 		DownloadIcon,
 
-		// Formating icons
+		// Formatting icons
 		FormatTitle,
 		FormatAlignLeft,
 		FormatAlignCenter,
@@ -764,7 +764,7 @@ export default {
 	data() {
 		return {
 			selected: false,
-			// Formating
+			// Formatting
 			checked: {
 				bold: true,
 				italic: false,
@@ -934,7 +934,7 @@ const focusableSelector = '.focusable'
 /**
  * The Actions component can be used to display one ore more actions.
  * If only a single action is provided, it will be rendered as an inline icon.
- * For more, a menu indicator will be shown and a popovermenu containing the
+ * For more, a menu indicator will be shown and a popover menu containing the
  * actions will be opened on click.
  *
  * @since 0.10.0
@@ -1014,19 +1014,6 @@ export default {
 			default: false,
 		},
 
-		/**
-		 * Specifies the button type used for trigger and single actions buttons
-		 * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
-		 * the default button style will be applied.
-		 */
-		type: {
-			type: String,
-			validator(value) {
-				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].indexOf(value) !== -1
-			},
-			default: null,
-		},
-
 		/**
 		 * Icon to show for the toggle menu button
 		 * when more than one action is inside the actions component.
@@ -1099,6 +1086,22 @@ export default {
 			type: Number,
 			default: 0,
 		},
+
+		/**
+		 * Specifies the button variant used for trigger and single actions buttons.
+		 *
+		 * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.
+		 * If left empty, the default button style will be applied.
+		 *
+		 * @since 8.23.0
+		 */
+		variant: {
+			type: String,
+			validator(value) {
+				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)
+			},
+			default: null,
+		},
 	},
 
 	emits: [
@@ -1157,9 +1160,9 @@ export default {
 	},
 
 	computed: {
-		triggerBtnType() {
+		triggerButtonVariant() {
 			// If requested, we use a primary button
-			return this.type || (this.primary
+			return this.variant || (this.primary
 				? 'primary'
 				// If it has a name, we use a secondary button
 				: this.menuName ? 'secondary' : 'tertiary')
@@ -1558,7 +1561,7 @@ export default {
 			this.$emit('blur', event)
 
 			// When there is no focusable elements to handle Tab press from actions menu
-			// It requries manual closing
+			// It requires manual closing
 			if (this.actionsMenuSemanticType === 'tooltip') {
 				// Tooltip is supposed to have no focusable element.
 				// However, if there is a custom focusable element, it will be auto-focused and cause the menu to be closed on open.
@@ -1688,7 +1691,7 @@ export default {
 			}
 
 			const propsToForward = { ...(action?.props ?? {}) }
-			const nativeType = ['submit', 'reset'].includes(propsToForward.type) ? propsToForward.modelValue : 'button'
+			const type = ['submit', 'reset'].includes(propsToForward.type) ? propsToForward.modelValue : 'button'
 			// not available on NcButton or with different meaning
 			delete propsToForward.modelValue
 			delete propsToForward.type
@@ -1700,11 +1703,11 @@ export default {
 						class: 'action-item action-item--single',
 						'aria-label': action?.props?.['aria-label'] || text,
 						title,
-						// If it has a menuName, we use a secondary button
-						type: this.type || (buttonText ? 'secondary' : 'tertiary'),
 						disabled: this.disabled || action?.props?.disabled,
 						pressed: action?.props?.modelValue,
-						nativeType,
+						type,
+						// If it has a menuName, we use a secondary button
+						variant: this.variant || (buttonText ? 'secondary' : 'tertiary'),
 						onFocus: this.onFocus,
 						onBlur: this.onBlur,
 						// forward any pressed state from NcButton just like NcActionButton does
@@ -1754,9 +1757,8 @@ export default {
 					trigger: () => h(NcButton, {
 						id: triggerRandomId,
 						class: 'action-item__menutoggle',
-						type: this.triggerBtnType,
 						disabled: this.disabled,
-						ariaHidden: this.ariaHidden,
+						variant: this.triggerButtonVariant,
 						ref: 'triggerButton',
 						'aria-label': this.menuName ? null : this.ariaLabel,
 						// 'aria-controls' should only present together with a valid aria-haspopup
@@ -1823,7 +1825,7 @@ export default {
 				{
 					class: [
 						'action-items',
-						`action-item--${this.triggerBtnType}`,
+						`action-item--${this.triggerButtonVariant}`,
 					],
 				},
 				[
@@ -1854,7 +1856,7 @@ export default {
 			{
 				class: [
 					'action-item action-item--default-popover',
-					`action-item--${this.triggerBtnType}`,
+					`action-item--${this.triggerButtonVariant}`,
 					{
 						'action-item--open': this.opened,
 					},

src/components/NcAppContent/NcAppDetailsToggle.vue

@@ -5,10 +5,10 @@
 
 <template>
 	<NcButton v-tooltip="title"
-		type="tertiary"
-		:aria-label="title"
 		class="app-details-toggle"
-		:class="{ 'app-details-toggle--mobile': isMobile }">
+		:class="{ 'app-details-toggle--mobile': isMobile }"
+		:aria-label="title"
+		variant="tertiary">
 		<template #icon>
 			<ArrowLeft v-if="isRtl" :size="20" />
 			<ArrowRight v-else :size="20" />

src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue

@@ -7,8 +7,8 @@
 	<!-- Button to expand or collapse children -->
 	<NcButton class="icon-collapse"
 		:class="{'icon-collapse--open':open}"
-		type="tertiary"
 		:aria-label="labelButton"
+		variant="tertiary"
 		@click="onClick">
 		<template #icon>
 			<ChevronUp v-if="open"

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -349,9 +349,9 @@ Just set the `pinned` prop.
 						:boundaries-element="actionsBoundariesElement"
 						:placement="menuPlacement"
 						:open="menuOpen"
-						:type="(isActive && to) || active ? 'primary' : null"
 						:force-menu="forceMenu"
 						:default-icon="menuIcon"
+						:variant="(isActive && to) || active ? 'primary' : null"
 						@update:open="onMenuToggle">
 						<template #icon>
 							<!-- @slot Slot for the custom menu icon -->

src/components/NcAppNavigationItem/NcInputConfirmCancel.vue

@@ -21,40 +21,40 @@
 				class="app-navigation-input-confirm__input"
 				:placeholder="placeholder">
 
-			<NcButton native-type="submit"
-				type="primary"
-				:aria-label="labelConfirm"
+			<NcButton :aria-label="labelConfirm"
+				type="submit"
+				variant="primary"
 				@click.stop.prevent="confirm">
 				<template #icon>
-					<ArrowRight :size="20" />
+					<IconArrowRight :size="20" />
 				</template>
 			</NcButton>
 
-			<NcButton native-type="reset"
-				:type="primary ? 'primary' : 'tertiary'"
-				:aria-label="labelCancel"
+			<NcButton :aria-label="labelCancel"
+				type="reset"
+				:variant="primary ? 'primary' : 'tertiary'"
 				@click.stop.prevent="cancel">
 				<template #icon>
-					<Close :size="20" />
+					<IconClose :size="20" />
 				</template>
 			</NcButton>
 		</form>
 	</div>
 </template>
 <script>
-import NcButton from '../NcButton/index.ts'
 import { t } from '../../l10n.js'
 
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import Close from 'vue-material-design-icons/Close.vue'
+import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import IconClose from 'vue-material-design-icons/Close.vue'
+import NcButton from '../NcButton/index.js'
 
 export default {
 	name: 'NcInputConfirmCancel',
 
 	components: {
+		IconArrowRight,
+		IconClose,
 		NcButton,
-		ArrowRight,
-		Close,
 	},
 
 	props: {

src/components/NcAppNavigationNew/NcAppNavigationNew.vue

@@ -29,8 +29,8 @@
 <template>
 	<div class="app-navigation-new">
 		<NcButton :id="buttonId"
-			:disabled="disabled"
-			:type="type"
+			:disabled
+			:variant
 			@click="$emit('click')">
 			<template #icon>
 				<slot name="icon" />
@@ -62,7 +62,12 @@ export default {
 			type: String,
 			required: true,
 		},
-		type: {
+
+		/**
+		 * The color variant to use.
+		 * @default 'primary'
+		 */
+		variant: {
 			type: String,
 			default: 'primary',
 			validator(value) {