Skip to content

Add option to show a back button to Navigation and View components #51

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Feb 20, 2024
Merged

Add option to show a back button to Navigation and View components #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion components/src/stories/Navigation.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@ export const Component = {
setup() {
return { args };
},
template: '<ui-nav v-bind="args" @click-tab="setTab"><div slot="actions"><button>Action Button (slot example)</button></div></ui-nav>',
template: '<ui-nav v-bind="args" @click-tab="setTab" @go-back="goBack"><div slot="actions"><button>Action Button (slot example)</button></div></ui-nav>',
methods: {
setTab({ detail }) {
this.args.currentTab = detail;
},
goBack() {
alert('The back button was clicked!');
},
},
}),

Expand All @@ -24,6 +27,7 @@ export const Component = {
{ value: 'first', label: 'First tab' },
{ value: 'second', label: 'Second tab' },
],
showBackButton: false,
},
};

Expand All @@ -43,5 +47,6 @@ export default {
control: 'select',
options: Component.args.tabs.map(v => v.value),
},
showBackButton: 'boolean',
},
};
12 changes: 10 additions & 2 deletions components/src/stories/View.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,18 @@ export const Component = {
return { args };
},
template: `
<ui-view v-bind="args">
<ui-view v-bind="args" @go-back="goBack">
<div slot="loader">Loader slot: Loading...</div>
<div slot="actions"><button>Action Button (slot example)</button></div>
<div slot="first"><p>First tab content</p></div>
<div slot="second"><p>Second tab content</p></div>
</ui-view>`,
</ui-view>
`,
methods: {
goBack() {
alert('The back button was clicked!');
},
},
}),

args: {
Expand All @@ -27,6 +33,7 @@ export const Component = {
{ value: 'first', label: 'First tab' },
{ value: 'second', label: 'Second tab' },
],
showBackButton: false,
},
};

Expand All @@ -45,5 +52,6 @@ export default {
control: 'object',
},
currentTab: 'text',
showBackButton: 'boolean',
},
};
39 changes: 39 additions & 0 deletions components/src/widgets/navigation/widget.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
<template>
<div class="navigation-bar">
<button
Copy link
Collaborator

@paulinaczybir paulinaczybir Feb 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't it make sense to use our toolkit button here? or it's better to use just the default one?

Copy link
Member Author

@arnaugiralt arnaugiralt Feb 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went for the HTML button for ease of use, since it is easier to style. Would be trickier to do so with the toolkit button.

Copy link
Collaborator

@paulinaczybir paulinaczybir Feb 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May be good to consider some way for the future to make the toolkit button usable in those cases, or just drop it for the HTML one 😜

v-if="showBackButton"
class="navigation-bar__back-button"
@click="$emit('go-back')"
>
<ui-icon
color="#666666"
icon-name="googleArrowBackBaseline"
size="24"
/>
</button>
<div
v-if="assistiveTitle"
class="navigation-bar__page-title-holder"
Expand Down Expand Up @@ -42,9 +53,11 @@

<script>
import tabs from '~widgets/tabs/widget.vue';
import icon from '~widgets/icon/widget.vue';
import registerWidget from '~core/registerWidget';

registerWidget('ui-tabs', tabs);
registerWidget('ui-icon', icon);

export default {
props: {
Expand All @@ -67,7 +80,14 @@ export default {
type: String,
default: '',
},

showBackButton: {
type: Boolean,
default: false,
},
},

emits: ['go-back'],
};
</script>

Expand Down Expand Up @@ -129,6 +149,25 @@ export default {
align-items: center;
flex: 0 0 auto;
}

&__back-button {
height: 36px;
width: 36px;
margin: 0 24px 0 -8px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border: 0;
outline: none;
border-radius: 2px;
background-color: transparent;
cursor: pointer;

&:hover {
background-color: #e0e0e0;
}
}
}

.page-title {
Expand Down
9 changes: 9 additions & 0 deletions components/src/widgets/view/widget.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@
class="c-view__navigation"
:assistive-title="assistiveTitle"
:current-tab="activeTab"
:show-back-button="showBackButton ? '' : null"
Copy link
Member Author

@arnaugiralt arnaugiralt Feb 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Figuring this out took me like 2 hours. Turns out that boolean properties that are passed down need to be properly casted as boolean arguments (like the disabled HTML argument), otherwise they are casted to a string and everything breaks 🥲.

See vuejs/docs#1972 (comment) and the related playground for more info.

:title="title"
.tabs="tabs"
@click-tab="setCurrentTab"
@go-back="$emit('go-back')"
>
<slot name="tabs" />
<!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
Expand Down Expand Up @@ -80,8 +82,15 @@ export default {
type: Array,
default: () => [],
},

showBackButton: {
type: Boolean,
default: false,
},
},

emits: ['go-back'],

data: () => ({
activeTab: '',
}),
Expand Down