fix: replace title prop by name in NcActions and NcBreadcrumb

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

src/assets/action.scss

@@ -123,7 +123,7 @@
  white-space: pre-wrap;
  }
 
- &__title {
+ &__text {
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;

src/components/NcActionButton/NcActionButton.vue

@@ -88,7 +88,7 @@ If you're using a long text you can specify a title
  </template>
  Add new
  </NcActionButton>
- <NcActionButton title="Long button" @click="showMessage('Delete')">
+ <NcActionButton name="Long button" @click="showMessage('Delete')">
  <template #icon>
  <Delete :size="20" />
  </template>
@@ -183,6 +183,7 @@ export default {
  <button class="action-button"
  :class="{ focusable: isFocusable }"
  :aria-label="ariaLabel"
+ :title="title || nameTitleFallback"
  role="menuitem"
  type="button"
  @click="onClick">
@@ -193,10 +194,10 @@ export default {
  class="action-button__icon" />
  </slot>
 
- <!-- long text with title -->
- <p v-if="title">
- <strong class="action-button__title">
- {{ title }}
+ <!-- long text with name -->
+ <p v-if="nameTitleFallback">
+ <strong class="action-button__text">
+ {{ nameTitleFallback }}
  </strong>
  <br>
  <!-- white space is shown on longtext, so we can't

src/components/NcActionLink/NcActionLink.vue

@@ -53,7 +53,7 @@ export default {
  :href="href"
  :aria-label="ariaLabel"
  :target="target"
- :title="title"
+ :title="title || nameTitleFallback"
  class="action-link focusable"
  rel="nofollow noreferrer noopener"
  @click="onClick">
@@ -65,10 +65,10 @@ export default {
  class="action-link__icon" />
  </slot>
 
- <!-- long text with title -->
- <p v-if="title">
- <strong class="action-link__title">
- {{ title }}
+ <!-- long text with name -->
+ <p v-if="nameTitleFallback">
+ <strong class="action-link__text">
+ {{ nameTitleFallback }}
  </strong>
  <br>
  <!-- white space is shown on longtext, so we can't
@@ -134,13 +134,6 @@ export default {
  return value && (!value.startsWith('_') || ['_blank', '_self', '_parent', '_top'].indexOf(value) > -1)
  },
  },
- /**
- * Declares a native tooltip when not null
- */
- title: {
- type: String,
- default: null,
- },
  },
 }
 </script>

src/components/NcActionRouter/NcActionRouter.vue

@@ -24,9 +24,10 @@
 <template>
  <li class="action">
  <router-link :to="to"
+ :aria-label="ariaLabel"
  :exact="exact"
+ :title="title || nameTitleFallback"
  class="action-router focusable"
- :aria-label="ariaLabel"
  rel="nofollow noreferrer noopener"
  @click.native="onClick">
  <!-- @slot Manually provide icon -->
@@ -36,10 +37,10 @@
  class="action-router__icon" />
  </slot>
 
- <!-- long text with title -->
- <p v-if="title">
- <strong class="action-router__title">
- {{ title }}
+ <!-- long text with name -->
+ <p v-if="nameTitleFallback">
+ <strong class="action-router__text">
+ {{ nameTitleFallback }}
  </strong>
  <br>
  <!-- white space is shown on longtext, so we can't

src/components/NcActionText/NcActionText.vue

@@ -33,10 +33,10 @@
  class="action-text__icon" />
  </slot>
 
- <!-- long text with title -->
- <p v-if="title">
- <strong class="action-text__title">
- {{ title }}
+ <!-- long text with name -->
+ <p v-if="nameTitleFallback">
+ <strong class="action-text__text">
+ {{ nameTitleFallback }}
  </strong>
  <br>
  <!-- white space is shown on longtext, so we can't

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -38,7 +38,7 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
  <Pencil :size="20" />
  </template>
  </NcActionTextEditable>
- <NcActionTextEditable title="Please edit the text" value="This is a textarea with title">
+ <NcActionTextEditable name="Please edit the text" value="This is a textarea with title">
  <template #icon>
  <Pencil :size="20" />
  </template>
@@ -75,9 +75,9 @@ export default {
  @submit.prevent="onSubmit">
  <input :id="id" type="submit" class="action-text-editable__submit">
 
- <!-- title -->
- <strong v-if="title" class="action-text__title">
- {{ title }}
+ <!-- name -->
+ <strong v-if="nameTitleFallback" class="action-text__text">
+ {{ nameTitleFallback }}
  </strong>
 
  <textarea :disabled="disabled"

src/components/NcActions/NcActions.vue

@@ -927,9 +927,15 @@ export default {
  */
  const renderInlineAction = (action) => {
  const icon = action?.data?.scopedSlots?.icon()?.[0] || h('span', { class: ['icon', action?.componentOptions?.propsData?.icon] })
- const title = this.forceTitle ? this.menuTitle : ''
+ const buttonText = this.forceTitle ? this.menuTitle : ''
  const clickListener = action?.componentOptions?.listeners?.click
 
+ const text = action?.componentOptions?.children?.[0]?.text
+ const ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text
+ // TODO: drop on the 8.0.0 major, see NcActionMixin title/name prop
+ const name = action?.componentOptions?.propsData?.nameTitleFallback
+ const title = action?.componentOptions?.propsData?.title || name
+
  return h('NcButton',
  {
  class: [
@@ -938,13 +944,13 @@ export default {
  action?.data?.class,
  ],
  attrs: {
- 'aria-label': action?.componentOptions?.propsData?.ariaLabel || action?.componentOptions?.children?.[0]?.text,
- title: action?.componentOptions?.propsData?.title,
+ 'aria-label': ariaLabel,
+ title,
  },
  ref: action?.data?.ref,
  props: {
- // If it has a title, we use a secondary button
- type: this.type || (title ? 'secondary' : 'tertiary'),
+ // If it has a meuTitle, we use a secondary button
+ type: this.type || (buttonText ? 'secondary' : 'tertiary'),
  disabled: this.disabled || action?.componentOptions?.propsData?.disabled,
  ...action?.componentOptions?.propsData,
  },
@@ -972,7 +978,7 @@ export default {
  },
  [
  h('template', { slot: 'icon' }, [icon]),
- title,
+ buttonText,
  ],
  )
  }

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -40,24 +40,25 @@ This component is meant to be used inside a Breadcrumbs component.
  @dragenter="dragEnter"
  @dragleave="dragLeave">
  <component :is="tag"
- v-if="(title || icon) && !$slots.default"
+ v-if="(nameTitleFallback || icon) && !$slots.default"
  :exact="exact"
  :to="to"
  :href="href"
+ :title="title || nameTitleFallback"
  v-bind="$attrs"
  v-on="$listeners">
  <!-- @slot Slot for passing a material design icon. Precedes the icon and title prop. -->
  <slot name="icon">
  <span v-if="icon" :class="icon" class="icon" />
- <span v-else>{{ title }}</span>
+ <span v-else>{{ nameTitleFallback }}</span>
  </slot>
  </component>
  <NcActions v-if="$slots.default"
  ref="actions"
  type="tertiary"
  :force-menu="forceMenu"
  :open="open"
- :menu-title="title"
+ :menu-title="nameTitleFallback"
  :force-title="true"
  :container="`.vue-crumb[${crumbId}]`"
  @update:open="onOpenChange">
@@ -86,11 +87,24 @@ export default {
  },
  props: {
  /**
- * The displayed title of the breadcrumb.
+ * The main text content of the entry.
+ * Previously called `title`, now deprecated
+ */
+ name: {
+ type: String,
+ // TODO: Make it required in the next major release (see title prop)
+ default: '',
+ },
+ /**
+ * The title attribute of the element.
+ *
+ * ⚠ Using this prop as the main content text is DEPRECATED
+ * Please use `name` instead. If you were planning to define the
+ * html element title attribute, this is the proper way.
  */
  title: {
  type: String,
- required: true,
+ default: null,
  },
 
  /**
@@ -171,6 +185,16 @@ export default {
  }
  },
  computed: {
+ /**
+ * TODO: drop on the 8.0.0 major, see title/name prop
+ */
+ nameTitleFallback() {
+ if (!this.name) {
+ console.warn('The `name` prop is required. Please migrate away from the deprecated `title` prop.')
+ return this.title
+ }
+ return this.name
+ },
  /**
  * Determines which element tag to use
  *
@@ -271,24 +295,17 @@ export default {
  max-width: 210px;
  font-weight: bold;
 
- > a,
- > a:deep(*) {
- cursor: default;
- }
-
  // Don't show breadcrumb separator for last crumb
  .vue-crumb__separator {
  display: none;
  }
  }
 
- // Hover and focus effect for crumbs, but not the last one
- &:not(:last-child) > a {
- &:hover,
- &:focus {
- background-color: var(--color-background-dark);
- color: var(--color-main-text);
- }
+ // Hover and focus effect for crumbs
+ & > a:hover,
+ & > a:focus {
+ background-color: var(--color-background-dark);
+ color: var(--color-main-text);
  }
 
  &--hidden {

src/components/NcBreadcrumbs/NcBreadcrumbs.vue

@@ -175,7 +175,7 @@ export default {
  */
  menuBreadcrumbProps: {
  // Don't show a title for this breadcrumb, only the Actions menu
- title: '',
+ name: '',
  forceMenu: true,
  // Don't allow dropping directly on the actions breadcrumb
  disableDrop: true,
@@ -531,6 +531,10 @@ export default {
  const to = crumb.componentOptions.propsData.to
  const href = crumb.componentOptions.propsData.href
  const disabled = crumb.componentOptions.propsData.disableDrop
+ const title = crumb.componentOptions.propsData.title
+ // TODO: Remove this fallback once nameTitleFallback is removed from NcBreadcrumb
+ const name = crumb.componentOptions.propsData.name || title
+
  // Decide whether to show the breadcrumbs as ActionRouter or ActionLink
  let element = 'NcActionLink'
  let path = href
@@ -547,8 +551,9 @@ export default {
  return h(element, {
  class: crumbClass,
  props: {
- to,
  href,
+ title,
+ to,
  },
  // Prevent the breadcrumbs from being draggable
  attrs: {
@@ -563,7 +568,7 @@ export default {
  dragleave: ($event) => this.dragLeave($event, disabled),
  },
  },
- [crumb.componentOptions.propsData.title, folderIcon]
+ [folderIcon, name]
  )
  }))
  )

src/mixins/actionText.js

@@ -34,12 +34,25 @@ export default {
  default: '',
  },
  /**
- * Title to show next to the icon
+ * The main text content of the entry.
+ * Previously called `title`, now deprecated
  */
- title: {
+ name: {
  type: String,
+ // TODO: Make it required in the next major release (see title prop)
  default: '',
  },
+ /**
+ * The title attribute of the element.
+ *
+ * ⚠ Using this prop as the main content text is DEPRECATED
+ * Please use `name` instead. If you were planning to define the
+ * html element title attribute, this is the proper way.
+ */
+ title: {
+ type: String,
+ default: null,
+ },
  /**
  * Whether we close the Actions menu after the click
  */
@@ -61,6 +74,17 @@ export default {
  ],
 
  computed: {
+ /**
+ * TODO: drop on the 8.0.0 major, see title/name prop
+ */
+ nameTitleFallback() {
+ if (!this.name) {
+ console.warn('The `name` prop is required. Please migrate away from the deprecated `title` prop.')
+ return this.title
+ }
+ return this.name
+ },
+
  isIconUrl() {
  try {
  return new URL(this.icon)