Skip to content

Commit 3b97e60

Browse files
langermanklangermank
committed
clean up styling
1 parent e37d05e commit 3b97e60

4 files changed

Lines changed: 230 additions & 143 deletions

File tree

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import Breadcrumbs from '.'
2+
3+
export default {
4+
title: 'Components/Breadcrumbs/Dev',
5+
}
6+
7+
export const OverflowMenuNarrowContainer = () => (
8+
<div style={{width: '350px', border: '1px solid #ccc', padding: '8px'}}>
9+
<Breadcrumbs overflow="menu">
10+
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
11+
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
12+
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
13+
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
14+
<Breadcrumbs.Item href="#" selected>
15+
Current Page
16+
</Breadcrumbs.Item>
17+
</Breadcrumbs>
18+
</div>
19+
)
20+
21+
// Wrapper components to test that BreadcrumbsItem works when wrapped
22+
const StyledWrapper = ({children}: {children: React.ReactNode}) => (
23+
<span style={{padding: '2px', border: '1px dotted #999'}}>{children}</span>
24+
)
25+
26+
const ConditionalWrapper = ({children, condition}: {children: React.ReactNode; condition: boolean}) => {
27+
return condition ? <strong>{children}</strong> : <>{children}</>
28+
}
29+
30+
const DataAttributeWrapper = ({children}: {children: React.ReactNode}) => (
31+
<span data-testid="wrapper" className="custom-wrapper">
32+
{children}
33+
</span>
34+
)
35+
36+
export const WrappedBreadcrumbItemsWithOverflow = () => (
37+
<Breadcrumbs overflow="menu">
38+
<StyledWrapper>
39+
<Breadcrumbs.Item href="#">Wrapped Home</Breadcrumbs.Item>
40+
</StyledWrapper>
41+
<ConditionalWrapper condition={false}>
42+
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
43+
</ConditionalWrapper>
44+
<DataAttributeWrapper>
45+
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
46+
</DataAttributeWrapper>
47+
<StyledWrapper>
48+
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
49+
</StyledWrapper>
50+
<ConditionalWrapper condition={true}>
51+
<Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
52+
</ConditionalWrapper>
53+
<DataAttributeWrapper>
54+
<Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
55+
</DataAttributeWrapper>
56+
<Breadcrumbs.Item href="#" selected>
57+
Current Page
58+
</Breadcrumbs.Item>
59+
</Breadcrumbs>
60+
)

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

Lines changed: 59 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {useState} from 'react'
44
import type {ComponentProps} from '../utils/types'
55
import Breadcrumbs from './Breadcrumbs'
66
import TextInput from '../TextInput'
7+
import {FeatureFlags} from '../FeatureFlags'
78

89
export default {
910
title: 'Components/Breadcrumbs/Features',
@@ -24,7 +25,23 @@ export const OverflowWrap = () => (
2425
</Breadcrumbs>
2526
)
2627

27-
export const OverflowMenu = () => (
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 = () => (
2845
<Breadcrumbs overflow="menu">
2946
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
3047
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
@@ -38,7 +55,7 @@ export const OverflowMenu = () => (
3855
</Breadcrumbs>
3956
)
4057

41-
export const OverflowMenuShowRoot = () => (
58+
export const OverflowMenuShowRootFeatureFlagDisabled = () => (
4259
<Breadcrumbs overflow="menu-with-root">
4360
<Breadcrumbs.Item href="#">github</Breadcrumbs.Item>
4461
<Breadcrumbs.Item href="#">Teams</Breadcrumbs.Item>
@@ -51,59 +68,19 @@ export const OverflowMenuShowRoot = () => (
5168
</Breadcrumbs>
5269
)
5370

54-
export const OverflowMenuNarrowContainer = () => (
55-
<div style={{width: '350px', border: '1px solid #ccc', padding: '8px'}}>
56-
<Breadcrumbs overflow="menu">
57-
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
58-
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
59-
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
60-
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
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>
6179
<Breadcrumbs.Item href="#" selected>
62-
Current Page
80+
global-navigation-reviewers
6381
</Breadcrumbs.Item>
6482
</Breadcrumbs>
65-
</div>
66-
)
67-
68-
// Wrapper components to test that BreadcrumbsItem works when wrapped
69-
const StyledWrapper = ({children}: {children: React.ReactNode}) => (
70-
<span style={{padding: '2px', border: '1px dotted #999'}}>{children}</span>
71-
)
72-
73-
const ConditionalWrapper = ({children, condition}: {children: React.ReactNode; condition: boolean}) => {
74-
return condition ? <strong>{children}</strong> : <>{children}</>
75-
}
76-
77-
const DataAttributeWrapper = ({children}: {children: React.ReactNode}) => (
78-
<span data-testid="wrapper" className="custom-wrapper">
79-
{children}
80-
</span>
81-
)
82-
83-
export const WrappedBreadcrumbItemsWithOverflow = () => (
84-
<Breadcrumbs overflow="menu">
85-
<StyledWrapper>
86-
<Breadcrumbs.Item href="#">Wrapped Home</Breadcrumbs.Item>
87-
</StyledWrapper>
88-
<ConditionalWrapper condition={false}>
89-
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
90-
</ConditionalWrapper>
91-
<DataAttributeWrapper>
92-
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
93-
</DataAttributeWrapper>
94-
<StyledWrapper>
95-
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
96-
</StyledWrapper>
97-
<ConditionalWrapper condition={true}>
98-
<Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
99-
</ConditionalWrapper>
100-
<DataAttributeWrapper>
101-
<Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
102-
</DataAttributeWrapper>
103-
<Breadcrumbs.Item href="#" selected>
104-
Current Page
105-
</Breadcrumbs.Item>
106-
</Breadcrumbs>
83+
</FeatureFlags>
10784
)
10885

10986
export const WithEditableNameInput = () => (
@@ -205,3 +182,33 @@ export const DynamicChildren = () => {
205182
</div>
206183
)
207184
}
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+
202+
export const SpaciousVariantWithOverflowWrap = () => (
203+
<Breadcrumbs variant="spacious">
204+
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
205+
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
206+
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
207+
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
208+
<Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
209+
<Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
210+
<Breadcrumbs.Item href="#" selected>
211+
Current Page
212+
</Breadcrumbs.Item>
213+
</Breadcrumbs>
214+
)

0 commit comments

Comments
 (0)