Skip to content
This repository was archived by the owner on Jan 3, 2024. It is now read-only.

Commit 5c13e7f

Browse files
lookacatlookacat
committed
Make OcBreadcrumb overflow to the left and hide overflown items
1 parent b31f1a2 commit 5c13e7f

File tree

3 files changed

+187
-169
lines changed

3 files changed

+187
-169
lines changed

‎src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ describe("OcBreadcrumb", () => {
1818
})
1919

2020
expect(wrapper.props().variation).toMatch("lead")
21-
expect(wrapper.classes()).toContain("oc-breadcrumb-lead")
21+
expect(wrapper.html()).toContain("oc-breadcrumb oc-breadcrumb-lead")
2222
expect(wrapper).toMatchSnapshot()
2323
})
2424
it("displays all items", () => {

‎src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue

+90-76
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,90 @@
11
<template>
2-
<nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
3-
<ol class="oc-breadcrumb-list oc-mb-s">
4-
<li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
5-
<router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
6-
<span>{{ item.text }}</span>
7-
</router-link>
8-
<oc-icon
9-
v-if="item.to"
10-
color="var(--oc-color-text-default)"
11-
name="arrow-right-s"
12-
fill-type="line"
13-
/>
14-
<oc-button
15-
v-else-if="item.onClick"
16-
:aria-current="getAriaCurrent(index)"
17-
appearance="raw"
18-
@click="item.onClick"
19-
>
20-
<span>{{ item.text }}</span>
21-
</oc-button>
22-
<span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
23-
<template v-if="showContextMenu && index === items.length - 1">
2+
<div class="oc-breadcrumb-wrapper">
3+
<nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
4+
<ol id="test" class="oc-breadcrumb-list oc-mb-s">
5+
<li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
6+
<router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
7+
<span>{{ item.text }}</span>
8+
</router-link>
9+
<oc-icon
10+
v-if="item.to"
11+
color="var(--oc-color-text-default)"
12+
name="arrow-right-s"
13+
fill-type="line"
14+
/>
2415
<oc-button
25-
id="oc-breadcrumb-contextmenu-trigger"
26-
v-oc-tooltip="contextMenuLabel"
27-
:aria-label="contextMenuLabel"
16+
v-else-if="item.onClick"
17+
:aria-current="getAriaCurrent(index)"
2818
appearance="raw"
19+
@click="item.onClick"
2920
>
30-
<oc-icon name="more-2" color="var(--oc-color-text-default)" />
21+
<span>{{ item.text }}</span>
3122
</oc-button>
32-
<oc-drop
33-
drop-id="oc-breadcrumb-contextmenu"
34-
toggle="#oc-breadcrumb-contextmenu-trigger"
35-
mode="click"
36-
close-on-click
37-
:padding-size="contextMenuPadding"
38-
@click.native.stop.prevent
39-
>
40-
<!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
41-
<slot name="contextMenu" />
42-
</oc-drop>
43-
</template>
44-
</li>
45-
</ol>
46-
<div class="oc-breadcrumb-drop">
47-
<label
48-
ref="mobileDropdown"
49-
tabindex="0"
50-
class="oc-breadcrumb-drop-label"
51-
@keydown.enter="$refs.mobileDropdown.click()"
52-
>
53-
<span
54-
v-if="currentFolder"
55-
class="oc-breadcrumb-drop-label-text"
56-
aria-current="page"
57-
v-text="currentFolder.text"
58-
/>
59-
<oc-icon
60-
class="oc-breadcrumb-drop-label-icon"
61-
name="arrow-down-s"
62-
:accessible-label="$gettext('Expand more')"
63-
/>
64-
</label>
65-
<oc-drop v-if="dropdownItems">
66-
<ol>
67-
<li v-for="(item, index) in dropdownItems" :key="index">
68-
<router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
69-
{{ item.text }}
70-
</router-link>
23+
<span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
24+
<template v-if="showContextMenu && index === items.length - 1">
7125
<oc-button
72-
v-else-if="item.onClick"
73-
justify-content="left"
26+
id="oc-breadcrumb-contextmenu-trigger"
27+
v-oc-tooltip="contextMenuLabel"
28+
:aria-label="contextMenuLabel"
7429
appearance="raw"
75-
:aria-current="getAriaCurrent(index)"
76-
@click="item.onClick"
7730
>
78-
{{ item.text }}
31+
<oc-icon name="more-2" color="var(--oc-color-text-default)" />
7932
</oc-button>
80-
<span v-else :aria-current="getAriaCurrent(index)" v-text="item.text" />
81-
</li>
82-
</ol>
83-
</oc-drop>
84-
</div>
85-
</nav>
33+
<oc-drop
34+
drop-id="oc-breadcrumb-contextmenu"
35+
toggle="#oc-breadcrumb-contextmenu-trigger"
36+
mode="click"
37+
close-on-click
38+
:padding-size="contextMenuPadding"
39+
@click.native.stop.prevent
40+
>
41+
<!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
42+
<slot name="contextMenu" />
43+
</oc-drop>
44+
</template>
45+
</li>
46+
</ol>
47+
<div class="oc-breadcrumb-drop">
48+
<label
49+
ref="mobileDropdown"
50+
tabindex="0"
51+
class="oc-breadcrumb-drop-label"
52+
@keydown.enter="$refs.mobileDropdown.click()"
53+
>
54+
<span
55+
v-if="currentFolder"
56+
class="oc-breadcrumb-drop-label-text"
57+
aria-current="page"
58+
v-text="currentFolder.text"
59+
/>
60+
<oc-icon
61+
class="oc-breadcrumb-drop-label-icon"
62+
name="arrow-down-s"
63+
:accessible-label="$gettext('Expand more')"
64+
/>
65+
</label>
66+
<oc-drop v-if="dropdownItems">
67+
<ol>
68+
<li v-for="(item, index) in dropdownItems" :key="index">
69+
<router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
70+
{{ item.text }}
71+
</router-link>
72+
<oc-button
73+
v-else-if="item.onClick"
74+
justify-content="left"
75+
appearance="raw"
76+
:aria-current="getAriaCurrent(index)"
77+
@click="item.onClick"
78+
>
79+
{{ item.text }}
80+
</oc-button>
81+
<span v-else :aria-current="getAriaCurrent(index)" v-text="item.text" />
82+
</li>
83+
</ol>
84+
</oc-drop>
85+
</div>
86+
</nav>
87+
</div>
8688
</template>
8789

8890
<script>
@@ -168,6 +170,18 @@ export default {
168170
<style lang="scss">
169171
.oc-breadcrumb {
170172
overflow: hidden;
173+
flex-shrink: 0;
174+
width: auto;
175+
right: 0;
176+
position: absolute;
177+
white-space: nowrap;
178+
179+
&-wrapper {
180+
position: relative;
181+
width: 100%;
182+
overflow: hidden;
183+
display: flex;
184+
}
171185
172186
&-list {
173187
@extend .oc-visible\@s;

‎src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap

+96-92
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,103 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`OcBreadcrumb displays all items 1`] = `
4-
<nav class="oc-breadcrumb oc-breadcrumb-default">
5-
<ol class="oc-breadcrumb-list oc-mb-s">
6-
<li class="oc-breadcrumb-list-item">
7-
<router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
8-
<oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
9-
<!---->
10-
</li>
11-
<li class="oc-breadcrumb-list-item">
12-
<!---->
13-
<oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
14-
<!---->
15-
</li>
16-
<li class="oc-breadcrumb-list-item">
17-
<router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
18-
<oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
19-
<!---->
20-
</li>
21-
<li class="oc-breadcrumb-list-item">
22-
<!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
23-
<!---->
24-
</li>
25-
</ol>
26-
<div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
27-
<oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
28-
</label>
29-
<oc-drop-stub dropid="oc-drop-2" toggle="" position="bottom-start" mode="click" paddingsize="medium">
30-
<ol>
31-
<li>
32-
<router-link-stub tag="a" to="[object Object]">
33-
Deep
34-
</router-link-stub>
35-
</li>
36-
<li>
37-
<oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
38-
Subfolder
39-
</oc-button-stub>
40-
</li>
41-
<li>
42-
<router-link-stub tag="a" to="[object Object]">
43-
First folder
44-
</router-link-stub>
45-
</li>
46-
</ol>
47-
</oc-drop-stub>
48-
</div>
49-
</nav>
4+
<div class="oc-breadcrumb-wrapper">
5+
<nav class="oc-breadcrumb oc-breadcrumb-default">
6+
<ol id="test" class="oc-breadcrumb-list oc-mb-s">
7+
<li class="oc-breadcrumb-list-item">
8+
<router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
9+
<oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
10+
<!---->
11+
</li>
12+
<li class="oc-breadcrumb-list-item">
13+
<!---->
14+
<oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
15+
<!---->
16+
</li>
17+
<li class="oc-breadcrumb-list-item">
18+
<router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
19+
<oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
20+
<!---->
21+
</li>
22+
<li class="oc-breadcrumb-list-item">
23+
<!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
24+
<!---->
25+
</li>
26+
</ol>
27+
<div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
28+
<oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
29+
</label>
30+
<oc-drop-stub dropid="oc-drop-2" toggle="" position="bottom-start" mode="click" paddingsize="medium">
31+
<ol>
32+
<li>
33+
<router-link-stub tag="a" to="[object Object]">
34+
Deep
35+
</router-link-stub>
36+
</li>
37+
<li>
38+
<oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
39+
Subfolder
40+
</oc-button-stub>
41+
</li>
42+
<li>
43+
<router-link-stub tag="a" to="[object Object]">
44+
First folder
45+
</router-link-stub>
46+
</li>
47+
</ol>
48+
</oc-drop-stub>
49+
</div>
50+
</nav>
51+
</div>
5052
`;
5153

5254
exports[`OcBreadcrumb sets correct variation 1`] = `
53-
<nav class="oc-breadcrumb oc-breadcrumb-lead">
54-
<ol class="oc-breadcrumb-list oc-mb-s">
55-
<li class="oc-breadcrumb-list-item">
56-
<router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
57-
<oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
58-
<!---->
59-
</li>
60-
<li class="oc-breadcrumb-list-item">
61-
<!---->
62-
<oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
63-
<!---->
64-
</li>
65-
<li class="oc-breadcrumb-list-item">
66-
<router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
67-
<oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
68-
<!---->
69-
</li>
70-
<li class="oc-breadcrumb-list-item">
71-
<!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
72-
<!---->
73-
</li>
74-
</ol>
75-
<div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
76-
<oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
77-
</label>
78-
<oc-drop-stub dropid="oc-drop-1" toggle="" position="bottom-start" mode="click" paddingsize="medium">
79-
<ol>
80-
<li>
81-
<router-link-stub tag="a" to="[object Object]">
82-
Deep
83-
</router-link-stub>
84-
</li>
85-
<li>
86-
<oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
87-
Subfolder
88-
</oc-button-stub>
89-
</li>
90-
<li>
91-
<router-link-stub tag="a" to="[object Object]">
92-
First folder
93-
</router-link-stub>
94-
</li>
95-
</ol>
96-
</oc-drop-stub>
97-
</div>
98-
</nav>
55+
<div class="oc-breadcrumb-wrapper">
56+
<nav class="oc-breadcrumb oc-breadcrumb-lead">
57+
<ol id="test" class="oc-breadcrumb-list oc-mb-s">
58+
<li class="oc-breadcrumb-list-item">
59+
<router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
60+
<oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
61+
<!---->
62+
</li>
63+
<li class="oc-breadcrumb-list-item">
64+
<!---->
65+
<oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
66+
<!---->
67+
</li>
68+
<li class="oc-breadcrumb-list-item">
69+
<router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
70+
<oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
71+
<!---->
72+
</li>
73+
<li class="oc-breadcrumb-list-item">
74+
<!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
75+
<!---->
76+
</li>
77+
</ol>
78+
<div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
79+
<oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
80+
</label>
81+
<oc-drop-stub dropid="oc-drop-1" toggle="" position="bottom-start" mode="click" paddingsize="medium">
82+
<ol>
83+
<li>
84+
<router-link-stub tag="a" to="[object Object]">
85+
Deep
86+
</router-link-stub>
87+
</li>
88+
<li>
89+
<oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
90+
Subfolder
91+
</oc-button-stub>
92+
</li>
93+
<li>
94+
<router-link-stub tag="a" to="[object Object]">
95+
First folder
96+
</router-link-stub>
97+
</li>
98+
</ol>
99+
</oc-drop-stub>
100+
</div>
101+
</nav>
102+
</div>
99103
`;

0 commit comments

Comments
 (0)