Skip to content

Update Breadcrumb icons #2265

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
itsyme merged 13 commits into from
Apr 6, 2023
Merged

Update Breadcrumb icons #2265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a2ec083
Update breadcrumb icons
itsyme Apr 3, 2023
a3ed488
Update tests
itsyme Apr 3, 2023
e0b82a0
Update breadcrumb icons
itsyme Apr 3, 2023
40eb70e
Update tests
itsyme Apr 3, 2023
9a205a2
Merge branch 'master' into breadcrumb-icons
itsyme Apr 3, 2023
1fdff7f
Change icons to arrows
itsyme Apr 3, 2023
05546ef
Update tests
itsyme Apr 3, 2023
cfc2354
Update breadcrumb separator
itsyme Apr 3, 2023
f6521cb
Update tests
itsyme Apr 3, 2023
89c40de
Merge branch 'master' into breadcrumb-icons
itsyme Apr 4, 2023
7ac3eca
Merge branch 'master' into breadcrumb-icons
itsyme Apr 4, 2023
3847283
Merge branch 'master' into breadcrumb-icons
itsyme Apr 5, 2023
ad9344a
Merge branch 'master' into breadcrumb-icons
itsyme Apr 6, 2023
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
18 changes: 17 additions & 1 deletion packages/vue-components/src/Breadcrumb.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<template>
<div>
<nav aria-label="breadcrumb">
<nav aria-label="breadcrumb" class="breadcrumb-divider">
<ol class="breadcrumb">
<li class="notlink breadcrumb-marker">
››&nbsp;&nbsp;
</li>
<li
v-for="(item, index) in items"
:key="index"
Expand Down Expand Up @@ -80,4 +83,17 @@ export default {
.notlink {
color: #6d757d;
}

.breadcrumb-divider {
--bs-breadcrumb-divider: '›';
}

/* Change font size to center arrows */
.breadcrumb-marker {
font-size: 15px;
}

.breadcrumb-item::before {
font-size: 15px;
}
</style>
87 changes: 85 additions & 2 deletions packages/vue-components/src/__tests__/__snapshots__/Breadcrumb.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,19 @@ exports[`Breadcrumb dropdown link from sitenav 1`] = `
<div>
<nav
aria-label="breadcrumb"
class="breadcrumb-divider"
>
<ol
class="breadcrumb"
>
<li
class="notlink breadcrumb-marker"
>

››  

</li>

<li
aria-current="[object Object]"
class="breadcrumb-item"
Expand Down Expand Up @@ -43,10 +52,19 @@ exports[`Breadcrumb dropdown non-link from sitenav 1`] = `
<div>
<nav
aria-label="breadcrumb"
class="breadcrumb-divider"
>
<ol
class="breadcrumb"
>
<li
class="notlink breadcrumb-marker"
>

››  

</li>

<li
aria-current="[object Object]"
class="breadcrumb-item notlink"
Expand Down Expand Up @@ -80,10 +98,20 @@ exports[`Breadcrumb empty breadcrumb 1`] = `
<div>
<nav
aria-label="breadcrumb"
class="breadcrumb-divider"
>
<ol
class="breadcrumb"
/>
>
<li
class="notlink breadcrumb-marker"
>

››  

</li>

</ol>
</nav>
</div>
`;
Expand All @@ -92,10 +120,20 @@ exports[`Breadcrumb no sitenav 1`] = `
<div>
<nav
aria-label="breadcrumb"
class="breadcrumb-divider"
>
<ol
class="breadcrumb"
/>
>
<li
class="notlink breadcrumb-marker"
>

››  

</li>

</ol>
</nav>
</div>
`;
Expand All @@ -104,10 +142,19 @@ exports[`Breadcrumb one link 1`] = `
<div>
<nav
aria-label="breadcrumb"
class="breadcrumb-divider"
>
<ol
class="breadcrumb"
>
<li
class="notlink breadcrumb-marker"
>

››  

</li>

<li
aria-current="[object Object]"
class="breadcrumb-item"
Expand All @@ -129,10 +176,19 @@ exports[`Breadcrumb one link from sitenav 1`] = `
<div>
<nav
aria-label="breadcrumb"
class="breadcrumb-divider"
>
<ol
class="breadcrumb"
>
<li
class="notlink breadcrumb-marker"
>

››  

</li>

<li
aria-current="[object Object]"
class="breadcrumb-item notlink"
Expand All @@ -154,10 +210,19 @@ exports[`Breadcrumb one non-link 1`] = `
<div>
<nav
aria-label="breadcrumb"
class="breadcrumb-divider"
>
<ol
class="breadcrumb"
>
<li
class="notlink breadcrumb-marker"
>

››  

</li>

<li
aria-current="[object Object]"
class="breadcrumb-item notlink"
Expand All @@ -177,10 +242,19 @@ exports[`Breadcrumb two link 1`] = `
<div>
<nav
aria-label="breadcrumb"
class="breadcrumb-divider"
>
<ol
class="breadcrumb"
>
<li
class="notlink breadcrumb-marker"
>

››  

</li>

<li
aria-current="[object Object]"
class="breadcrumb-item"
Expand Down Expand Up @@ -214,10 +288,19 @@ exports[`Breadcrumb two non-link 1`] = `
<div>
<nav
aria-label="breadcrumb"
class="breadcrumb-divider"
>
<ol
class="breadcrumb"
>
<li
class="notlink breadcrumb-marker"
>

››  

</li>

<li
aria-current="[object Object]"
class="breadcrumb-item notlink"
Expand Down