Skip to content

Commit 7b1a827

Browse files
srmukhersrmukher
committed
Merge branch 'users/srmukher/backgroundSVG' of https://github.com/microsoft/fluentui into users/srmukher/backgroundSVG
2 parents bacb80b + afe44cf commit 7b1a827

File tree

452 files changed

+10030
-1620
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

452 files changed

+10030
-1620
lines changed

‎.github/workflows/pr-vrt.yml

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
name: VRT CI
22
on:
3-
# TODO: once testing is done enable pull_request trigger again
4-
# pull_request:
5-
workflow_dispatch:
3+
pull_request:
4+
# TODO: once testing is done enable pull_request on all branches again
5+
branches:
6+
- vrt-gha-testing
67

78
concurrency:
89
# see https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#example-only-cancel-in-progress-jobs-or-runs-for-the-current-workflow

‎apps/public-docsite-v9/src/Concepts/Positioning/MatchTargetSize.stories.tsx ‎apps/public-docsite-v9/src/Concepts/Positioning/PositioningMatchTargetSize.stories.tsx

File renamed without changes.

‎apps/public-docsite-v9/src/Concepts/Positioning/OverflowBoundaryPadding.stories.tsx ‎apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryPadding.stories.tsx

File renamed without changes.

‎apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.stories.tsx

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import * as React from 'react';
2+
import {
3+
Popover,
4+
PopoverTrigger,
5+
PopoverSurface,
6+
Button,
7+
makeStyles,
8+
tokens,
9+
type PositioningRect,
10+
useIsomorphicLayoutEffect,
11+
} from '@fluentui/react-components';
12+
13+
const useClasses = makeStyles({
14+
area: {
15+
border: `2px solid ${tokens.colorStatusDangerBackground3}`,
16+
padding: '60px 20px 20px 20px',
17+
width: '300px',
18+
height: '300px',
19+
20+
display: 'flex',
21+
flexDirection: 'column',
22+
alignItems: 'end',
23+
justifyContent: 'space-between',
24+
position: 'relative',
25+
26+
'::before': {
27+
content: '"Container"',
28+
position: 'absolute',
29+
padding: `${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,
30+
31+
top: 0,
32+
left: 0,
33+
34+
color: tokens.colorStatusDangerBackground1,
35+
backgroundColor: tokens.colorStatusDangerBackground3,
36+
},
37+
},
38+
boundary: {
39+
width: '320px',
40+
height: '320px',
41+
outline: `2px solid ${tokens.colorBrandBackground}`,
42+
43+
position: 'absolute',
44+
top: '50px',
45+
left: '10px',
46+
pointerEvents: 'none',
47+
48+
'::before': {
49+
content: '"Boundary"',
50+
position: 'absolute',
51+
padding: `${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,
52+
53+
top: 0,
54+
left: 0,
55+
56+
color: tokens.colorNeutralForegroundOnBrand,
57+
backgroundColor: tokens.colorBrandBackground,
58+
},
59+
},
60+
});
61+
62+
export const OverflowBoundaryRect = () => {
63+
const classes = useClasses();
64+
65+
const boundaryRef = React.useRef<HTMLDivElement | null>(null);
66+
const [boundaryRect, setBoundaryRect] = React.useState<PositioningRect | null>(null);
67+
68+
useIsomorphicLayoutEffect(() => {
69+
setBoundaryRect(boundaryRef.current?.getBoundingClientRect() ?? null);
70+
}, []);
71+
72+
return (
73+
<div className={classes.area}>
74+
<div className={classes.boundary} ref={boundaryRef} />
75+
76+
<Popover
77+
positioning={{
78+
overflowBoundary: boundaryRect,
79+
position: 'below',
80+
align: 'start',
81+
}}
82+
>
83+
<PopoverTrigger disableButtonEnhancement>
84+
<Button>
85+
<code>align: start</code>
86+
</Button>
87+
</PopoverTrigger>
88+
<PopoverSurface>Stays within the defined rect</PopoverSurface>
89+
</Popover>
90+
91+
<Popover
92+
positioning={{
93+
overflowBoundary: boundaryRect,
94+
position: 'above',
95+
align: 'start',
96+
}}
97+
>
98+
<PopoverTrigger disableButtonEnhancement>
99+
<Button>
100+
<code>align: start</code>
101+
</Button>
102+
</PopoverTrigger>
103+
<PopoverSurface>Stays within the defined rect</PopoverSurface>
104+
</Popover>
105+
</div>
106+
);
107+
};
108+
109+
OverflowBoundaryRect.parameters = {
110+
docs: {
111+
description: {
112+
story: [
113+
'Boundaries can be also defined as `Rect` objects. ',
114+
'This is useful when a boundary is not an actual element, but some kind of computed values.',
115+
].join('\n'),
116+
},
117+
},
118+
};

‎apps/public-docsite-v9/src/Concepts/Positioning/index.stories.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ export { AnchorToTarget } from './PositioningAnchorToTarget.stories';
1111
export { ImperativeAnchorTarget } from './PositioningImperativeAnchorTarget.stories';
1212
export { ImperativePositionUpdate } from './PositioningImperativePositionUpdate.stories';
1313
export { OverflowBoundary } from './PositioningOverflowBoundary.stories';
14-
export { OverflowBoundaryPadding } from './OverflowBoundaryPadding.stories';
14+
export { OverflowBoundaryRect } from './PositioningOverflowBoundaryRect.stories';
15+
export { OverflowBoundaryPadding } from './PositioningOverflowBoundaryPadding.stories';
1516
export { FlipBoundary } from './PositioningFlipBoundary.stories';
16-
export { MatchTargetSize } from './MatchTargetSize.stories';
17+
export { MatchTargetSize } from './PositioningMatchTargetSize.stories';
1718
export { DisableTransform } from './PositioningDisableTransform.stories';
1819
export { ListenToUpdates } from './PositioningListenToUpdates.stories';
1920
export { AutoSizeForSmallViewport } from './PositioningAutoSize.stories';

‎apps/vr-tests-react-components/src/stories/Button/SplitButton.stories.tsx

+195
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import * as React from 'react';
2+
import { SplitButton } from '@fluentui/react-button';
3+
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
4+
import type { Meta } from '@storybook/react';
5+
import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
6+
import { buttonId, steps, useStyles } from './utils';
7+
8+
const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
9+
10+
export default {
11+
title: 'SplitButton Converged',
12+
component: SplitButton,
13+
decorators: [story => withStoryWrightSteps({ story, steps })],
14+
} satisfies Meta<typeof SplitButton>;
15+
16+
export const Default = () => <SplitButton id={buttonId}>Hello, world</SplitButton>;
17+
18+
export const DefaultRTL = getStoryVariant(Default, RTL);
19+
export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
20+
export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
21+
22+
export const Circular = () => (
23+
<SplitButton id={buttonId} shape="circular">
24+
Hello, world
25+
</SplitButton>
26+
);
27+
28+
export const Square = () => (
29+
<SplitButton id={buttonId} shape="square">
30+
Hello, world
31+
</SplitButton>
32+
);
33+
34+
export const Rounded = () => (
35+
<SplitButton id={buttonId} shape="rounded">
36+
Hello, world
37+
</SplitButton>
38+
);
39+
40+
export const Outline = () => (
41+
<SplitButton id={buttonId} appearance="outline">
42+
Hello, world
43+
</SplitButton>
44+
);
45+
46+
export const Primary = () => (
47+
<SplitButton id={buttonId} appearance="primary">
48+
Hello, world
49+
</SplitButton>
50+
);
51+
52+
export const PrimaryHighContrast = getStoryVariant(Primary, HIGH_CONTRAST);
53+
export const PrimaryDarkMode = getStoryVariant(Primary, DARK_MODE);
54+
55+
export const Subtle = () => (
56+
<SplitButton id={buttonId} appearance="subtle">
57+
Hello, world
58+
</SplitButton>
59+
);
60+
61+
export const SubtleHighContrast = getStoryVariant(Subtle, HIGH_CONTRAST);
62+
export const SubtleDarkMode = getStoryVariant(Subtle, DARK_MODE);
63+
64+
export const Transparent = () => (
65+
<SplitButton id={buttonId} appearance="transparent">
66+
Hello, world
67+
</SplitButton>
68+
);
69+
70+
export const TransparentHighContrast = getStoryVariant(Transparent, HIGH_CONTRAST);
71+
export const TransparentDarkMode = getStoryVariant(Transparent, DARK_MODE);
72+
73+
export const Disabled = () => (
74+
<SplitButton id={buttonId} disabled>
75+
Hello, world
76+
</SplitButton>
77+
);
78+
79+
export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
80+
export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
81+
82+
export const OutlineDisabled = () => (
83+
<SplitButton id={buttonId} appearance="outline" disabled>
84+
Hello, world
85+
</SplitButton>
86+
);
87+
88+
export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH_CONTRAST);
89+
export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
90+
91+
export const PrimaryDisabled = () => (
92+
<SplitButton id={buttonId} appearance="primary" disabled>
93+
Hello, world
94+
</SplitButton>
95+
);
96+
97+
export const PrimaryDisabledHighContrast = getStoryVariant(PrimaryDisabled, HIGH_CONTRAST);
98+
export const PrimaryDisabledDarkMode = getStoryVariant(PrimaryDisabled, DARK_MODE);
99+
100+
export const SubtleDisabled = () => (
101+
<SplitButton id={buttonId} appearance="subtle" disabled>
102+
Hello, world
103+
</SplitButton>
104+
);
105+
106+
export const SubtleDisabledHighContrast = getStoryVariant(SubtleDisabled, HIGH_CONTRAST);
107+
export const SubtleDisabledDarkMode = getStoryVariant(SubtleDisabled, DARK_MODE);
108+
109+
export const TransparentDisabled = () => (
110+
<SplitButton id={buttonId} appearance="transparent" disabled>
111+
Hello, world
112+
</SplitButton>
113+
);
114+
115+
export const TransparentDisabledHighContrast = getStoryVariant(TransparentDisabled, HIGH_CONTRAST);
116+
export const TransparentDisabledDarkMode = getStoryVariant(TransparentDisabled, DARK_MODE);
117+
118+
export const SizeSmall = () => (
119+
<SplitButton id={buttonId} icon={<CalendarMonth />} size="small">
120+
Hello, world
121+
</SplitButton>
122+
);
123+
124+
SizeSmall.storyName = 'Size small';
125+
126+
export const SizeLarge = () => (
127+
<SplitButton id={buttonId} icon={<CalendarMonth />} size="large">
128+
Hello, world
129+
</SplitButton>
130+
);
131+
132+
SizeLarge.storyName = 'Size large';
133+
134+
export const SizeSmallWithLongTextWrapping = () => {
135+
const styles = useStyles();
136+
return (
137+
<SplitButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
138+
Long text wraps after it hits the max width of the component
139+
</SplitButton>
140+
);
141+
};
142+
143+
SizeSmallWithLongTextWrapping.storyName = 'Size small - with long text wrapping';
144+
145+
export const SizeMediumWithLongTextWrapping = () => {
146+
const styles = useStyles();
147+
return (
148+
<SplitButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
149+
Long text wraps after it hits the max width of the component
150+
</SplitButton>
151+
);
152+
};
153+
154+
SizeMediumWithLongTextWrapping.storyName = 'Size medium - with long text wrapping';
155+
156+
export const SizeLargeWithLongTextWrapping = () => {
157+
const styles = useStyles();
158+
return (
159+
<SplitButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
160+
Long text wraps after it hits the max width of the component
161+
</SplitButton>
162+
);
163+
};
164+
165+
SizeLargeWithLongTextWrapping.storyName = 'Size large - with long text wrapping';
166+
167+
export const WithIconBeforeContent = () => (
168+
<SplitButton id={buttonId} icon={<CalendarMonth />}>
169+
Hello, world
170+
</SplitButton>
171+
);
172+
173+
WithIconBeforeContent.storyName = 'With icon before content';
174+
175+
export const WithIconBeforeContentRTL = getStoryVariant(WithIconBeforeContent, RTL);
176+
177+
export const WithIconAfterContent = () => (
178+
<SplitButton id={buttonId} icon={<CalendarMonth />} iconPosition="after">
179+
Hello, world
180+
</SplitButton>
181+
);
182+
183+
WithIconAfterContent.storyName = 'With icon after content';
184+
185+
export const WithIconAfterContentRTL = getStoryVariant(WithIconAfterContent, RTL);
186+
187+
export const IconOnly = () => <SplitButton id={buttonId} icon={<CalendarMonth />} />;
188+
189+
IconOnly.storyName = 'Icon only';
190+
191+
export const CircularAndIconOnly = () => <SplitButton id={buttonId} shape="circular" icon={<CalendarMonth />} />;
192+
193+
CircularAndIconOnly.storyName = 'Circular and icon only';
194+
195+
export const CircularAndIconOnlyRTL = getStoryVariant(CircularAndIconOnly, RTL);

‎apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const Basic = () => {
2929
return (
3030
<div style={{ padding: 10 }}>
3131
<DonutChart
32-
culture={window.navigator.language}
32+
culture="en-US"
3333
data={data}
3434
innerRadius={55}
3535
href="https://developer.microsoft.com/en-us/"

‎apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const Basic = () => {
129129

130130
return (
131131
<div style={{ padding: '10px' }}>
132-
<HorizontalBarChart culture={window.navigator.language} data={data} hideRatio={hideRatio} width={600} />
132+
<HorizontalBarChart culture="en-US" data={data} hideRatio={hideRatio} width={600} />
133133
</div>
134134
);
135135
};

‎apps/vr-tests-react-components/src/stories/Charts/LineChart.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export const Basic = () => {
149149
return (
150150
<div style={rootStyle}>
151151
<LineChart
152-
culture={window.navigator.language}
152+
culture="en-US"
153153
data={data}
154154
legendsOverflowText={'Overflow Items'}
155155
yMinValue={200}

‎apps/vr-tests-react-components/src/stories/Charts/VerticalBarChart.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export const BasicSecondaryYAxis = () => {
115115
return (
116116
<div style={rootStyle}>
117117
<VerticalBarChart
118-
culture={window.navigator.language}
118+
culture="en-US"
119119
chartTitle="Vertical bar chart basic example "
120120
data={points}
121121
width={650}

0 commit comments

Comments
 (0)