Skip to content

Commit

Permalink
Merge pull request #4106 from nextcloud/fix/4053/title-to-name
Browse files Browse the repository at this point in the history
Rename `title` props and slots to `name`
  • Loading branch information
raimund-schluessler authored May 16, 2023
2 parents 0975c66 + bb2cf54 commit 9c63560
Show file tree
Hide file tree
Showing 142 changed files with 399 additions and 401 deletions.
18 changes: 9 additions & 9 deletions cypress/visual/NcAppSidebar/NcAppSidebarMixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ export default function(compact) {
describe(`NcAppSidebar.vue ${compact ? '' : 'not '}in compact mode`, () => {
'use strict'
// Possible props and actions
const title = 'Very long title that will certainly overflow the sidebar width'
const subtitles = ['', 'Very long subtitle what will certainly overflow the sidebar width']
const titleEditable = [false, true]
const name = 'Very long title that will certainly overflow the sidebar width'
const subnames = ['', 'Very long subtitle what will certainly overflow the sidebar width']
const nameEditable = [false, true]
const starred = [null, false, true]
const header = ['', '<div style="background: no-repeat center/contain var(--icon-folder-000); height: 100%;" />']
const secondary = ['', '<NcActionButton icon="icon-delete">Action1</NcActionButton><NcActionButton icon="icon-delete">Action2</NcActionButton>']
Expand All @@ -63,14 +63,14 @@ export default function(compact) {
components,
}

subtitles.forEach(subtitle => {
titleEditable.forEach(editable => {
subnames.forEach(subname => {
nameEditable.forEach(editable => {
starred.forEach(star => {
header.forEach(head => {
secondary.forEach(second => {
// TODO remove when https://github.com/mjhea0/cypress-visual-regression/pull/56
const fileName = sanitize(`NcAppSidebar.vue
-subtitle_${subtitle ? 'true' : 'null'}
-subname_${subname ? 'true' : 'null'}
-starred_${star === null ? 'null' : star ? 'true' : 'false'}
-compact_${compact ? 'true' : 'false'}
-header_${head ? 'image' : 'none'}
Expand All @@ -80,11 +80,11 @@ export default function(compact) {

const defaultOptions = {
propsData: {
title,
subtitle,
name,
subname,
starred: star,
compact,
titleEditable: editable,
nameEditable: editable,
},
slots: {
default: ['<div />'],
Expand Down
8 changes: 4 additions & 4 deletions l10n/messages.pot
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ msgstr ""
msgid "Actions"
msgstr ""

msgid "Actions for item with title \"{title}\""
msgid "Actions for item with name \"{name}\""
msgstr ""

msgid "Activities"
Expand Down Expand Up @@ -41,7 +41,7 @@ msgstr ""
msgid "Cancel changes"
msgstr ""

msgid "Change title"
msgid "Change name"
msgstr ""

msgid "Choose"
Expand Down Expand Up @@ -83,7 +83,7 @@ msgstr ""
msgid "Error getting related resources. Please contact your system administrator if you have any questions."
msgstr ""

msgid "External documentation for {title}"
msgid "External documentation for {name}"
msgstr ""

msgid "Favorite"
Expand Down Expand Up @@ -134,7 +134,7 @@ msgstr ""
msgid "Objects"
msgstr ""

msgid "Open link to \"{resourceTitle}\""
msgid "Open link to \"{resourceName}\""
msgstr ""

msgid "Open menu"
Expand Down
2 changes: 1 addition & 1 deletion src/assets/action.scss
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
white-space: pre-wrap;
}

&__title {
&__name {
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcActionButton/NcActionButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
</script>
```

If you're using a long text you can specify a title
If you're using a long text you can specify a name

```vue
<template>
Expand Down Expand Up @@ -197,7 +197,7 @@ export default {

<!-- long text with name -->
<p v-if="name">
<strong class="action-button__title">
<strong class="action-button__name">
{{ name }}
</strong>
<br>
Expand Down
10 changes: 5 additions & 5 deletions src/components/NcActionButtonGroup/NcActionButtonGroup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ This should be used sparingly for accessibility.
<template>
<div style="display: flex; align-items: center;">
<NcActions>
<NcActionButtonGroup title="Text alignment">
<NcActionButtonGroup name="Text alignment">
<NcActionButton aria-label="Align left"
@click="showMessage('Align left')">
<template #icon>
Expand Down Expand Up @@ -82,8 +82,8 @@ export default {

<template>
<li class="nc-button-group-base">
<div v-if="title">
{{ title }}
<div v-if="name">
{{ name }}
</div>
<ul class="nc-button-group-content">
<slot />
Expand All @@ -101,9 +101,9 @@ export default defineComponent({
name: 'NcActionButtonGroup',
props: {
/**
* Optional title shown below the button group
* Optional text shown below the button group
*/
title: {
name: {
required: false,
default: undefined,
type: String,
Expand Down
8 changes: 4 additions & 4 deletions src/components/NcActionCaption/NcActionCaption.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ This component is made to be used inside of the [NcActions](#NcActions) componen

```vue
<NcActions>
<NcActionCaption title="Test caption" />
<NcActionCaption title="Test caption 2" />
<NcActionCaption name="Test caption" />
<NcActionCaption name="Test caption 2" />
</NcActions>
```
</docs>

<template>
<li class="app-navigation-caption">
{{ title }}
{{ name }}
</li>
</template>

Expand All @@ -42,7 +42,7 @@ export default {
/**
* The caption's text
*/
title: {
name: {
type: String,
required: true,
},
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcActionLink/NcActionLink.vue
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default {

<!-- long text with name -->
<p v-if="name">
<strong class="action-link__title">
<strong class="action-link__name">
{{ name }}
</strong>
<br>
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcActionRouter/NcActionRouter.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

<!-- long text with name -->
<p v-if="name">
<strong class="action-router__title">
<strong class="action-router__name">
{{ name }}
</strong>
<br>
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcActionText/NcActionText.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@

<!-- long text with name -->
<p v-if="name">
<strong class="action-text__title">
<strong class="action-text__name">
{{ name }}
</strong>
<br>
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcActionTextEditable/NcActionTextEditable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
<Pencil :size="20" />
</template>
</NcActionTextEditable>
<NcActionTextEditable name="Please edit the text" value="This is a textarea with title">
<NcActionTextEditable name="Please edit the text" value="This is a textarea with name">
<template #icon>
<Pencil :size="20" />
</template>
Expand Down Expand Up @@ -76,7 +76,7 @@ export default {
<input :id="id" type="submit" class="action-text-editable__submit">

<!-- name -->
<strong v-if="name" class="action-text__title">
<strong v-if="name" class="action-text__name">
{{ name }}
</strong>

Expand Down
34 changes: 17 additions & 17 deletions src/components/NcActions/NcActions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -153,11 +153,11 @@ export default {
</script>
```

### Multiple actions with 2 items inline AND forced titles
### Multiple actions with 2 items inline AND forced names

```vue
<template>
<NcActions :force-title="true" :inline="2">
<NcActions :force-name="true" :inline="2">
<NcActionButton @click="showMessage('Add')">
<template #icon>
<Plus :size="20" />
Expand Down Expand Up @@ -253,11 +253,11 @@ export default {
</script>
```

### With menu title
### With menu name

```vue
<template>
<NcActions menu-title="Object management">
<NcActions menu-name="Object management">
<template #icon>
<Pencil :size="20" />
</template>
Expand Down Expand Up @@ -337,7 +337,7 @@ export default {

```vue
<template>
<NcActions :primary="true" menu-title="Object management">
<NcActions :primary="true" menu-name="Object management">
<template #icon>
<Plus :size="20" />
</template>
Expand Down Expand Up @@ -489,7 +489,7 @@ export default {
</NcActionButton>
</NcActions>

<NcActions :type="current" menu-title="Choose a type">
<NcActions :type="current" menu-name="Choose a type">
<NcActionButton v-if="current" close-after-click @click="define()">
<template #icon>
<Delete :size="20" />
Expand All @@ -506,7 +506,7 @@ export default {
</NcActionButton>
</NcActions>

<NcActions :type="current" menu-title="Choose a type">
<NcActions :type="current" menu-name="Choose a type">
<template #icon>
<SelectColor :size="20" />
</template>
Expand Down Expand Up @@ -623,17 +623,17 @@ export default {
},
/**
* Force the title to show for single actions
* Force the name to show for single actions
*/
forceTitle: {
forceName: {
type: Boolean,
default: false,
},
/**
* Specify the menu title
* Specify the menu name
*/
menuTitle: {
menuName: {
type: String,
default: null,
},
Expand Down Expand Up @@ -748,8 +748,8 @@ export default {
// If requested, we use a primary button
return this.type || (this.primary
? 'primary'
// If it has a title, we use a secondary button
: this.menuTitle ? 'secondary' : 'tertiary')
// If it has a name, we use a secondary button
: this.menuName ? 'secondary' : 'tertiary')
},
},
Expand Down Expand Up @@ -996,11 +996,11 @@ export default {
const text = action?.componentOptions?.children?.[0]?.text?.trim?.()
const ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text
const buttonText = this.forceTitle ? text : ''
const buttonText = this.forceName ? text : ''
let title = action?.componentOptions?.propsData?.title
// Show a default title for single actions if none is present
if (!(this.forceTitle || title)) {
if (!(this.forceName || title)) {
title = text
}
Expand All @@ -1017,7 +1017,7 @@ export default {
},
ref: action?.data?.ref,
props: {
// If it has a menuTitle, we use a secondary button
// If it has a menuName, we use a secondary button
type: this.type || (buttonText ? 'secondary' : 'tertiary'),
disabled: this.disabled || action?.componentOptions?.propsData?.disabled,
ariaHidden: this.ariaHidden,
Expand Down Expand Up @@ -1114,7 +1114,7 @@ export default {
},
}, [
h('template', { slot: 'icon' }, [triggerIcon]),
this.menuTitle,
this.menuName,
]),
h('div', {
class: {
Expand Down
14 changes: 7 additions & 7 deletions src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
```vue
<template>
<NcAppNavigationCaption
title="Your caption goes here">
name="Your caption goes here">
<template #actions>
<NcActionButton>
<template #icon>
Expand All @@ -28,7 +28,7 @@
```vue
<template>
<NcAppNavigationCaption
title="Your caption goes here">
name="Your caption goes here">
<template #actionsTriggerIcon>
<Plus slot="icon" :size="20" />
</template>
Expand Down Expand Up @@ -83,9 +83,9 @@

<template>
<li class="app-navigation-caption">
<!-- Title of the caption -->
<h2 class="app-navigation-caption__title">
{{ title }}
<!-- Name of the caption -->
<h2 class="app-navigation-caption__name">
{{ name }}
</h2>

<!-- Actions -->
Expand All @@ -112,7 +112,7 @@ export default {
NcActions,
},
props: {
title: {
name: {
type: String,
required: true,
},
Expand All @@ -134,7 +134,7 @@ export default {
justify-content: space-between;
padding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);
&__title {
&__name {
font-weight: bold;
color: var(--color-primary-element);
font-size: var(--default-font-size);
Expand Down
Loading

0 comments on commit 9c63560

Please sign in to comment.