Skip to content

Commit 8046e55

Browse files
pksjcepksjce
committed
Fix some minor issues with FF
1 parent 3b97e60 commit 8046e55

4 files changed

Lines changed: 140 additions & 159 deletions

File tree

‎packages/react/src/Breadcrumbs/Breadcrumbs.dev.stories.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,82 @@ export default {
44
title: 'Components/Breadcrumbs/Dev',
55
}
66

7+
export const DynamicChildren = () => {
8+
const [items, setItems] = useState([
9+
{id: 1, href: '#', name: 'Home'},
10+
{id: 2, href: '#', name: 'Docs'},
11+
{id: 3, href: '#', name: 'Components'},
12+
])
13+
14+
const addItem = () => {
15+
const newId = Math.max(...items.map(item => item.id)) + 1
16+
const names = ['Advanced', 'Examples', 'Guides', 'API', 'Tutorials', 'Reference']
17+
const randomName = names[Math.floor(Math.random() * names.length)]
18+
setItems([...items, {id: newId, href: '#', name: `${randomName}-${newId}`}])
19+
}
20+
21+
const removeItem = () => {
22+
if (items.length > 1) {
23+
setItems(items.slice(0, -1))
24+
}
25+
}
26+
27+
const addMultipleItems = () => {
28+
const newItems = [
29+
{id: Date.now() + 1, href: '#', name: 'Category'},
30+
{id: Date.now() + 2, href: '#', name: 'Subcategory'},
31+
{id: Date.now() + 3, href: '#', name: 'Item'},
32+
{id: Date.now() + 4, href: '#', name: 'Details'},
33+
{id: Date.now() + 5, href: '#', name: 'Specifications'},
34+
]
35+
setItems([...items, ...newItems])
36+
}
37+
38+
const reset = () => {
39+
setItems([
40+
{id: 1, href: '#', name: 'Home'},
41+
{id: 2, href: '#', name: 'Docs'},
42+
{id: 3, href: '#', name: 'Components'},
43+
])
44+
}
45+
46+
return (
47+
<div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
48+
<div style={{display: 'flex', gap: '8px', marginBottom: '16px'}}>
49+
<button type="button" onClick={addItem} style={{padding: '4px 8px'}}>
50+
Add Item
51+
</button>
52+
<button type="button" onClick={removeItem} style={{padding: '4px 8px'}}>
53+
Remove Item
54+
</button>
55+
<button type="button" onClick={addMultipleItems} style={{padding: '4px 8px'}}>
56+
Add Many Items
57+
</button>
58+
<button type="button" onClick={reset} style={{padding: '4px 8px'}}>
59+
Reset
60+
</button>
61+
</div>
62+
63+
<div>
64+
<h4 id="dynamic-breadcrumbs-heading" style={{margin: '0 0 8px 0'}}>
65+
Dynamic breadcrumbs
66+
</h4>
67+
<Breadcrumbs overflow="menu-with-root">
68+
{items.map((item, index) => (
69+
<Breadcrumbs.Item key={item.id} href={item.href} selected={index === items.length - 1}>
70+
{item.name}
71+
</Breadcrumbs.Item>
72+
))}
73+
</Breadcrumbs>
74+
</div>
75+
76+
<div style={{marginTop: '16px', fontSize: '12px'}}>
77+
Current items: {items.length} | Try adding/removing items to see how overflow behavior changes
78+
</div>
79+
</div>
80+
)
81+
}
82+
783
export const OverflowMenuNarrowContainer = () => (
884
<div style={{width: '350px', border: '1px solid #ccc', padding: '8px'}}>
985
<Breadcrumbs overflow="menu">
@@ -58,3 +134,27 @@ export const WrappedBreadcrumbItemsWithOverflow = () => (
58134
</Breadcrumbs.Item>
59135
</Breadcrumbs>
60136
)
137+
138+
export const WithEditableNameInput = () => (
139+
<Breadcrumbs>
140+
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
141+
<Breadcrumbs.Item href="#">Documents</Breadcrumbs.Item>
142+
<Breadcrumbs.Item href="#">Project Alpha</Breadcrumbs.Item>
143+
<Breadcrumbs.Item>
144+
<TextInput
145+
defaultValue="Untitled Document"
146+
size="small"
147+
sx={{
148+
minWidth: '120px',
149+
maxWidth: '180px',
150+
fontSize: 'inherit',
151+
border: '1px dashed var(--borderColor-muted)',
152+
'&:focus': {
153+
border: '1px solid var(--borderColor-accent-emphasis)',
154+
},
155+
}}
156+
aria-label="Edit document name"
157+
/>
158+
</Breadcrumbs.Item>
159+
</Breadcrumbs>
160+
)

‎packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx‎

Lines changed: 11 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import type {Meta} from '@storybook/react-vite'
22
import type React from 'react'
3-
import {useState} from 'react'
43
import type {ComponentProps} from '../utils/types'
54
import Breadcrumbs from './Breadcrumbs'
65
import TextInput from '../TextInput'
7-
import {FeatureFlags} from '../FeatureFlags'
86

97
export default {
108
title: 'Components/Breadcrumbs/Features',
@@ -25,23 +23,7 @@ export const OverflowWrap = () => (
2523
</Breadcrumbs>
2624
)
2725

28-
export const OverflowMenuFeatureFlagEnabled = () => (
29-
<FeatureFlags flags={{primer_react_breadcrumbs_overflow_menu: true}}>
30-
<Breadcrumbs overflow="menu">
31-
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
32-
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
33-
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
34-
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
35-
<Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
36-
<Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
37-
<Breadcrumbs.Item href="#" selected>
38-
Current Page
39-
</Breadcrumbs.Item>
40-
</Breadcrumbs>
41-
</FeatureFlags>
42-
)
43-
44-
export const OverflowMenuFeatureFlagDisabled = () => (
26+
export const OverflowMenu = () => (
4527
<Breadcrumbs overflow="menu">
4628
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
4729
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
@@ -55,7 +37,7 @@ export const OverflowMenuFeatureFlagDisabled = () => (
5537
</Breadcrumbs>
5638
)
5739

58-
export const OverflowMenuShowRootFeatureFlagDisabled = () => (
40+
export const OverflowMenuShowRoot = () => (
5941
<Breadcrumbs overflow="menu-with-root">
6042
<Breadcrumbs.Item href="#">github</Breadcrumbs.Item>
6143
<Breadcrumbs.Item href="#">Teams</Breadcrumbs.Item>
@@ -68,137 +50,20 @@ export const OverflowMenuShowRootFeatureFlagDisabled = () => (
6850
</Breadcrumbs>
6951
)
7052

71-
export const OverflowMenuShowRootFeatureFlagEnabled = () => (
72-
<FeatureFlags flags={{primer_react_breadcrumbs_overflow_menu: true}}>
73-
<Breadcrumbs overflow="menu-with-root">
74-
<Breadcrumbs.Item href="#">github</Breadcrumbs.Item>
75-
<Breadcrumbs.Item href="#">Teams</Breadcrumbs.Item>
76-
<Breadcrumbs.Item href="#">Engineering</Breadcrumbs.Item>
77-
<Breadcrumbs.Item href="#">core-productivity</Breadcrumbs.Item>
78-
<Breadcrumbs.Item href="#">collaboration-workflows-flex</Breadcrumbs.Item>
79-
<Breadcrumbs.Item href="#" selected>
80-
global-navigation-reviewers
81-
</Breadcrumbs.Item>
82-
</Breadcrumbs>
83-
</FeatureFlags>
84-
)
85-
86-
export const WithEditableNameInput = () => (
87-
<Breadcrumbs>
53+
export const SpaciousVariantWithOverflowMenu = () => (
54+
<Breadcrumbs overflow="menu" variant="spacious">
8855
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
89-
<Breadcrumbs.Item href="#">Documents</Breadcrumbs.Item>
90-
<Breadcrumbs.Item href="#">Project Alpha</Breadcrumbs.Item>
91-
<Breadcrumbs.Item>
92-
<TextInput
93-
defaultValue="Untitled Document"
94-
size="small"
95-
sx={{
96-
minWidth: '120px',
97-
maxWidth: '180px',
98-
fontSize: 'inherit',
99-
border: '1px dashed var(--borderColor-muted)',
100-
'&:focus': {
101-
border: '1px solid var(--borderColor-accent-emphasis)',
102-
},
103-
}}
104-
aria-label="Edit document name"
105-
/>
56+
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
57+
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
58+
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
59+
<Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
60+
<Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
61+
<Breadcrumbs.Item href="#" selected>
62+
Current Page
10663
</Breadcrumbs.Item>
10764
</Breadcrumbs>
10865
)
10966

110-
export const DynamicChildren = () => {
111-
const [items, setItems] = useState([
112-
{id: 1, href: '#', name: 'Home'},
113-
{id: 2, href: '#', name: 'Docs'},
114-
{id: 3, href: '#', name: 'Components'},
115-
])
116-
117-
const addItem = () => {
118-
const newId = Math.max(...items.map(item => item.id)) + 1
119-
const names = ['Advanced', 'Examples', 'Guides', 'API', 'Tutorials', 'Reference']
120-
const randomName = names[Math.floor(Math.random() * names.length)]
121-
setItems([...items, {id: newId, href: '#', name: `${randomName}-${newId}`}])
122-
}
123-
124-
const removeItem = () => {
125-
if (items.length > 1) {
126-
setItems(items.slice(0, -1))
127-
}
128-
}
129-
130-
const addMultipleItems = () => {
131-
const newItems = [
132-
{id: Date.now() + 1, href: '#', name: 'Category'},
133-
{id: Date.now() + 2, href: '#', name: 'Subcategory'},
134-
{id: Date.now() + 3, href: '#', name: 'Item'},
135-
{id: Date.now() + 4, href: '#', name: 'Details'},
136-
{id: Date.now() + 5, href: '#', name: 'Specifications'},
137-
]
138-
setItems([...items, ...newItems])
139-
}
140-
141-
const reset = () => {
142-
setItems([
143-
{id: 1, href: '#', name: 'Home'},
144-
{id: 2, href: '#', name: 'Docs'},
145-
{id: 3, href: '#', name: 'Components'},
146-
])
147-
}
148-
149-
return (
150-
<div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
151-
<div style={{display: 'flex', gap: '8px', marginBottom: '16px'}}>
152-
<button type="button" onClick={addItem} style={{padding: '4px 8px'}}>
153-
Add Item
154-
</button>
155-
<button type="button" onClick={removeItem} style={{padding: '4px 8px'}}>
156-
Remove Item
157-
</button>
158-
<button type="button" onClick={addMultipleItems} style={{padding: '4px 8px'}}>
159-
Add Many Items
160-
</button>
161-
<button type="button" onClick={reset} style={{padding: '4px 8px'}}>
162-
Reset
163-
</button>
164-
</div>
165-
166-
<div>
167-
<h4 id="dynamic-breadcrumbs-heading" style={{margin: '0 0 8px 0'}}>
168-
Dynamic breadcrumbs
169-
</h4>
170-
<Breadcrumbs overflow="menu-with-root">
171-
{items.map((item, index) => (
172-
<Breadcrumbs.Item key={item.id} href={item.href} selected={index === items.length - 1}>
173-
{item.name}
174-
</Breadcrumbs.Item>
175-
))}
176-
</Breadcrumbs>
177-
</div>
178-
179-
<div style={{marginTop: '16px', fontSize: '12px'}}>
180-
Current items: {items.length} | Try adding/removing items to see how overflow behavior changes
181-
</div>
182-
</div>
183-
)
184-
}
185-
186-
export const SpaciousVariantWithOverflowMenu = () => (
187-
<FeatureFlags flags={{primer_react_breadcrumbs_overflow_menu: true}}>
188-
<Breadcrumbs overflow="menu" variant="spacious">
189-
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
190-
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
191-
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
192-
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
193-
<Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
194-
<Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
195-
<Breadcrumbs.Item href="#" selected>
196-
Current Page
197-
</Breadcrumbs.Item>
198-
</Breadcrumbs>
199-
</FeatureFlags>
200-
)
201-
20267
export const SpaciousVariantWithOverflowWrap = () => (
20368
<Breadcrumbs variant="spacious">
20469
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>

‎packages/react/src/Breadcrumbs/Breadcrumbs.module.css‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,21 @@
5959
.Item {
6060
display: inline-block;
6161
font-size: var(--text-body-size-medium);
62+
color: var(--fgColor-link);
63+
text-decoration: none;
6264

63-
&:focus-visible {
64-
@mixin focusOutline;
65+
&:hover,
66+
&:focus {
67+
text-decoration: underline;
68+
}
69+
}
70+
71+
.ItemSelected {
72+
color: var(--fgColor-default);
73+
pointer-events: none;
74+
75+
&:focus {
76+
text-decoration: none;
6577
}
6678
}
6779

@@ -77,6 +89,7 @@
7789
}
7890

7991
&:focus-visible {
92+
@mixin focusOutline 1px;
8093
text-decoration: none;
8194
}
8295

@@ -99,6 +112,10 @@
99112
text-decoration: none;
100113
}
101114

115+
&:focus-visible {
116+
@mixin focusOutline;
117+
}
118+
102119
&[aria-current] {
103120
font-weight: var(--base-text-weight-semibold);
104121
}
@@ -136,7 +153,6 @@
136153
& summary {
137154
list-style: none;
138155
cursor: pointer;
139-
outline: none;
140156

141157
&::-webkit-details-marker {
142158
display: none;

‎packages/react/src/Breadcrumbs/Breadcrumbs.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -339,13 +339,7 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', varian
339339
<BreadcrumbsList>{finalChildren}</BreadcrumbsList>
340340
</BoxWithFallback>
341341
) : (
342-
<BoxWithFallback
343-
as="nav"
344-
className={clsx(className, classes.BreadcrumbsBase)}
345-
aria-label="Breadcrumbs"
346-
sx={sxProp}
347-
data-variant={variant}
348-
>
342+
<BoxWithFallback as="nav" className={clsx(className, classes.BreadcrumbsBase)} aria-label="Breadcrumbs" sx={sxProp}>
349343
<BreadcrumbsList>{wrappedChildren}</BreadcrumbsList>
350344
</BoxWithFallback>
351345
)
@@ -370,12 +364,18 @@ type StyledBreadcrumbsItemProps = {
370364
React.ComponentPropsWithRef<'a'>
371365

372366
const BreadcrumbsItem = React.forwardRef(({selected, className, ...rest}, ref) => {
367+
const overflowMenuEnabled = useFeatureFlag('primer_react_breadcrumbs_overflow_menu')
373368
return (
374369
<BoxWithFallback
375370
as="a"
376-
className={clsx(className, classes.Item, {
377-
[SELECTED_CLASS]: selected,
378-
})}
371+
className={clsx(
372+
className,
373+
classes.Item,
374+
{
375+
[SELECTED_CLASS]: selected,
376+
},
377+
overflowMenuEnabled ? {} : {[classes.ItemSelected]: selected},
378+
)}
379379
aria-current={selected ? 'page' : undefined}
380380
ref={ref}
381381
{...rest}

0 commit comments

Comments
 (0)