Skip to content

Commit 4e29326

Browse files
anamikaanu96annawen1
anamikaanu96
and
annawen1
authored
fix(Breadcrumb): parity issues (#18414)
* fix(checkbox): react/wc parity * Revert "chore(deps-dev): bump vite (#18299)" This reverts commit 9217609. * Revert "fix(checkbox): react/wc parity" This reverts commit 7759f3f. * fix(breadcrumb): parity issue * fix: add styling for slotted overflowmenu icon * chore: add todo notes * fix(breadcrumb): removed playground * fix(breadcrumb): remove commented code * fix(breadcrumb): review change * fix(breadcrumb): review changes * fix(breadcrumb): review changes * fix(breadcrumb): remove unwanted change * fix(breadcrumb): resolve conflict --------- Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com>
1 parent 2b4aeb7 commit 4e29326

File tree

7 files changed

+152
-41
lines changed

7 files changed

+152
-41
lines changed

‎packages/web-components/src/components/breadcrumb/breadcrumb-link.ts‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,44 @@ import { prefix } from '../../globals/settings';
1212
import CDSLink from '../link/link';
1313
import styles from './breadcrumb.scss?lit';
1414
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
15-
15+
import { property } from 'lit/decorators.js';
16+
import { classMap } from 'lit/directives/class-map.js';
1617
/**
1718
* Link in breadcrumb.
1819
*
1920
* @element cds-breadcrumb-link
2021
*/
2122
@customElement(`${prefix}-breadcrumb-link`)
2223
class CDSBreadcrumbLink extends CDSLink {
24+
/**
25+
* indicates that this breadcrumb item represents the current item
26+
*/
27+
@property({ type: String, attribute: 'aria-current' })
28+
ariaCurrent;
29+
30+
/**
31+
* Provide if this breadcrumb item represents the current page
32+
*/
33+
@property({ type: Boolean, attribute: 'is-currentpage' })
34+
isCurrentPage = false;
35+
2336
render() {
37+
const { ariaCurrent, isCurrentPage } = this;
38+
39+
const linkClass = classMap({
40+
[`${prefix}--link`]: true,
41+
[`${prefix}--breadcrumb-item--current`]:
42+
isCurrentPage && ariaCurrent !== 'page',
43+
});
44+
2445
return html`
2546
${this.href
2647
? super.render()
27-
: html`<span class="${prefix}--link"><slot></slot></span>`}
48+
: html`<span
49+
class="${linkClass}"
50+
aria-current="${ariaCurrent || isCurrentPage}"
51+
><slot></slot
52+
></span>`}
2853
`;
2954
}
3055
static styles = styles;

‎packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
1717
/**
1818
* Overflow menu in breadcrumb.
1919
*
20+
* @deprecated use `cds-overflow-menu` instead with the `breadcrumb` property
21+
*
2022
* @element cds-breadcrumb-overflow-menu
2123
*/
2224
@customElement(`${prefix}-breadcrumb-overflow-menu`)

‎packages/web-components/src/components/breadcrumb/breadcrumb.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ $css--plex: true !default;
3636
}
3737
}
3838

39+
// TODO: remove cds-breadcrumb-overflow-menu styles once it has been
40+
// removed from monorepo in v12
3941
:host(#{$prefix}-breadcrumb[size='sm']) ::slotted(#{$prefix}-breadcrumb-item) {
4042
margin-inline-end: $spacing-02;
4143

@@ -128,3 +130,12 @@ $css--plex: true !default;
128130
text-decoration: none;
129131
}
130132
}
133+
134+
:host(#{$prefix}-breadcrumb-link) .cds--breadcrumb-item--current {
135+
color: $text-primary;
136+
cursor: auto;
137+
138+
&:hover {
139+
text-decoration: none;
140+
}
141+
}

‎packages/web-components/src/components/breadcrumb/breadcrumb.stories.ts‎

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,29 @@ import './breadcrumb';
1212
import './breadcrumb-item';
1313
import './breadcrumb-link';
1414
import './breadcrumb-overflow-menu';
15+
import '../overflow-menu/overflow-menu-body';
16+
import '../overflow-menu/overflow-menu-item';
1517
import '../overflow-menu/index';
1618
import './breadcrumb-skeleton';
1719
import { BREADCRUMB_SIZE } from './defs';
1820

21+
import { prefix } from '../../globals/settings';
22+
23+
import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16.js';
24+
1925
const sizes = {
2026
[`Small size (${BREADCRUMB_SIZE.SMALL})`]: BREADCRUMB_SIZE.SMALL,
2127
[`Medium size (${BREADCRUMB_SIZE.MEDIUM})`]: BREADCRUMB_SIZE.MEDIUM,
2228
};
2329
const args = {
2430
ariaLabel: '',
25-
classes: '',
31+
className: '',
2632
noTrailingSlash: false,
33+
size: {
34+
control: 'select',
35+
description: 'Specify the size of the Accordion.',
36+
options: sizes,
37+
},
2738
};
2839

2940
const argTypes = {
@@ -32,7 +43,7 @@ const argTypes = {
3243
description: 'Specify the label for the breadcrumb container.',
3344
name: 'aria-label',
3445
},
35-
classes: {
46+
className: {
3647
control: 'text',
3748
description:
3849
'Specify an optional className to be applied to the container node.',
@@ -50,9 +61,16 @@ const argTypes = {
5061
};
5162

5263
export const Default = {
53-
render: () => {
64+
args,
65+
argTypes,
66+
render: (args) => {
67+
const { ariaLabel, className, noTrailingSlash, size } = args ?? {};
5468
return html`
55-
<cds-breadcrumb>
69+
<cds-breadcrumb
70+
?no-trailing-slash="${noTrailingSlash}"
71+
class="${className}"
72+
aria-label="${ariaLabel}"
73+
size="${size}">
5674
<cds-breadcrumb-item>
5775
<cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
5876
</cds-breadcrumb-item>
@@ -63,7 +81,7 @@ export const Default = {
6381
<cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
6482
</cds-breadcrumb-item>
6583
<cds-breadcrumb-item>
66-
<cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
84+
<cds-breadcrumb-link>Breadcrumb 6</cds-breadcrumb-link>
6785
</cds-breadcrumb-item>
6886
</cds-breadcrumb>
6987
`;
@@ -74,11 +92,11 @@ export const BreadcrumbWithOverflowMenu = {
7492
args,
7593
argTypes,
7694
render: (args) => {
77-
const { ariaLabel, classes, noTrailingSlash, size } = args ?? {};
95+
const { ariaLabel, className, noTrailingSlash, size } = args ?? {};
7896
return html`
7997
<cds-breadcrumb
8098
?no-trailing-slash="${noTrailingSlash}"
81-
class="${classes}"
99+
class="${className}"
82100
aria-label="${ariaLabel}"
83101
size="${size}">
84102
<cds-breadcrumb-item>
@@ -88,54 +106,44 @@ export const BreadcrumbWithOverflowMenu = {
88106
<cds-breadcrumb-link href="/#">Breadcrumb 2</cds-breadcrumb-link>
89107
</cds-breadcrumb-item>
90108
<cds-breadcrumb-item>
91-
<cds-breadcrumb-overflow-menu>
109+
<cds-overflow-menu breadcrumb>
110+
${OverflowMenuHorizontal16({
111+
class: `${prefix}--overflow-menu__icon`,
112+
slot: 'icon',
113+
})}
114+
<span slot="tooltip-content"> Options </span>
92115
<cds-overflow-menu-body>
93116
<cds-overflow-menu-item>Breadcrumb 3</cds-overflow-menu-item>
94117
<cds-overflow-menu-item>Breadcrumb 4</cds-overflow-menu-item>
95118
</cds-overflow-menu-body>
96-
</cds-breadcrumb-overflow-menu>
119+
</cds-overflow-menu>
97120
</cds-breadcrumb-item>
98121
<cds-breadcrumb-item>
99122
<cds-breadcrumb-link href="/#">Breadcrumb 5</cds-breadcrumb-link>
100123
</cds-breadcrumb-item>
101124
<cds-breadcrumb-item>
102-
<cds-breadcrumb-link>Breadcrumb 6</cds-breadcrumb-link>
125+
<cds-breadcrumb-link is-currentpage>Breadcrumb 6</cds-breadcrumb-link>
103126
</cds-breadcrumb-item>
104127
</cds-breadcrumb>
105128
`;
106129
},
107130
};
108-
109-
export const Skeleton = {
110-
render: () => {
111-
return html` <cds-breadcrumb-skeleton> </cds-breadcrumb-skeleton> `;
131+
const skeletonArgs = { className: '' };
132+
const skeletonArgTypes = {
133+
className: {
134+
control: 'text',
135+
description:
136+
'Specify an optional className to be applied to the container node.',
112137
},
113138
};
114139

115-
export const Playground = {
116-
args,
117-
argTypes,
140+
export const Skeleton = {
141+
args: skeletonArgs,
142+
argTypes: skeletonArgTypes,
118143
render: (args) => {
119-
const { ariaLabel, classes, noTrailingSlash, size } = args ?? {};
144+
const { className } = args ?? {};
120145
return html`
121-
<cds-breadcrumb
122-
?no-trailing-slash="${noTrailingSlash}"
123-
class="${classes}"
124-
aria-label="${ariaLabel}"
125-
size="${size}">
126-
<cds-breadcrumb-item>
127-
<cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
128-
</cds-breadcrumb-item>
129-
<cds-breadcrumb-item>
130-
<cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
131-
</cds-breadcrumb-item>
132-
<cds-breadcrumb-item>
133-
<cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
134-
</cds-breadcrumb-item>
135-
<cds-breadcrumb-item>
136-
<cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
137-
</cds-breadcrumb-item>
138-
</cds-breadcrumb>
146+
<cds-breadcrumb-skeleton class="${className}"> </cds-breadcrumb-skeleton>
139147
`;
140148
},
141149
};

‎packages/web-components/src/components/breadcrumb/breadcrumb.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { prefix } from '../../globals/settings';
1414
import { BREADCRUMB_SIZE } from './defs';
1515
import styles from './breadcrumb.scss?lit';
1616
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
17-
1817
/**
1918
* Breadcrumb.
2019
*

‎packages/web-components/src/components/overflow-menu/overflow-menu.scss‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ $css--plex: true !default;
1010
@use '@carbon/styles/scss/config' as *;
1111
@use '@carbon/styles/scss/theme' as *;
1212
@use '@carbon/styles/scss/spacing' as *;
13-
@use '@carbon/styles/scss/utilities/convert' as *;
13+
@use '@carbon/styles/scss/motion' as *;
14+
@use '@carbon/styles/scss/utilities/convert';
1415
@use '@carbon/styles/scss/components/overflow-menu/overflow-menu' as *;
1516

1617
// https://github.com/carbon-design-system/carbon/issues/11408
@@ -63,6 +64,18 @@ $css--plex: true !default;
6364

6465
:host(#{$prefix}-overflow-menu-body) {
6566
@extend .#{$prefix}--overflow-menu-options;
67+
68+
&::after {
69+
position: absolute;
70+
display: block;
71+
background-color: $layer;
72+
content: '';
73+
transition: background-color $duration-fast-02 motion(entrance, productive);
74+
75+
@media screen and (prefers-reduced-motion: reduce) {
76+
transition: none;
77+
}
78+
}
6679
}
6780

6881
:host(#{$prefix}-overflow-menu-body[direction='top']) {
@@ -110,3 +123,49 @@ $css--plex: true !default;
110123
:host(#{$prefix}-overflow-menu-item[divider]) {
111124
@extend .#{$prefix}--overflow-menu--divider;
112125
}
126+
127+
:host(#{$prefix}-overflow-menu[breadcrumb]) {
128+
background: none;
129+
block-size: 1.125rem;
130+
box-shadow: none;
131+
inline-size: 1.25rem;
132+
min-block-size: 1.125rem;
133+
134+
#{$prefix}-tooltip button {
135+
position: relative;
136+
block-size: 1.125rem;
137+
inline-size: 1.25rem;
138+
min-block-size: 1.125rem;
139+
padding-inline: 0;
140+
}
141+
142+
:hover,
143+
:active,
144+
:focus {
145+
box-sizing: border-box;
146+
background: none;
147+
box-shadow: none;
148+
}
149+
}
150+
151+
:host(#{$prefix}-overflow-menu[breadcrumb]) {
152+
::slotted([slot='icon']) {
153+
transform: translateY(4px);
154+
}
155+
}
156+
157+
$caret-size: convert.to-rem(7px);
158+
159+
:host(#{$prefix}-overflow-menu-body[breadcrumb='true']) {
160+
&::after {
161+
margin: 0 auto;
162+
background: transparent;
163+
block-size: 0;
164+
border-block-end: $caret-size solid $field;
165+
border-inline-end: $caret-size solid transparent;
166+
border-inline-start: $caret-size solid transparent;
167+
inline-size: 0;
168+
inset-block-start: -$caret-size;
169+
inset-inline-start: $caret-size * 2;
170+
}
171+
}

‎packages/web-components/src/components/overflow-menu/overflow-menu.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,12 @@ class CDSOverflowMenu
118118
@property({ type: Boolean, attribute: 'toolbar-action', reflect: true })
119119
toolbarAction = false;
120120

121+
/**
122+
* `true` if this overflow menu use inside breadcrumb.
123+
*/
124+
@property({ type: Boolean, reflect: true })
125+
breadcrumb = false;
126+
121127
/**
122128
* @returns The position of the trigger button in the viewport.
123129
*/
@@ -155,6 +161,7 @@ class CDSOverflowMenu
155161
}
156162
const { _menuBody: menuBody } = this;
157163
if (menuBody) {
164+
menuBody.setAttribute('breadcrumb', String(Boolean(this.breadcrumb)));
158165
menuBody.open = open;
159166

160167
const tooltipContent = this.querySelector(
@@ -198,7 +205,7 @@ class CDSOverflowMenu
198205
}
199206

200207
render() {
201-
return html` ${super.render()} `;
208+
return html`${super.render()} `;
202209
}
203210

204211
static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader

0 commit comments

Comments
 (0)