Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename title props and slots to name #4106

Merged
merged 1 commit into from May 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 9 additions & 9 deletions cypress/visual/NcAppSidebar/NcAppSidebarMixin.js
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
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
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
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
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
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
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
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
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
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
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
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