Skip to content

Commit f561da2

Browse files
vnbaaijvnbaaij
authored
[dev-v5] Add direction switch button in the header (#4486)
* - Add direction switch button in the header - Update some styles to work with rtl mode -Fix Badge/CounterBadge rtl issues * Process review comments * Use better icons
1 parent 8bd7fe0 commit f561da2

File tree

8 files changed

+480
-278
lines changed

8 files changed

+480
-278
lines changed

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/Badges/Badge/Examples/BadgeAttached.razor‎

Lines changed: 137 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
.grid {
44
display: grid;
55
margin: auto;
6-
gap: 12px;
6+
gap: 4px;
77
width: min-content;
88
grid-template-areas: ". above-start above above-end ."
99
"before-top . . . after-top"
@@ -12,6 +12,35 @@
1212
". below-start below below-end .";
1313
}
1414
15+
/* Start (Start/Before) */
16+
.above-start.start svg { transform: rotate(-90deg) scaleX(-1); }
17+
.before-top.start svg { transform: rotate(0deg); }
18+
.before.start svg { transform: rotate(-90deg); }
19+
.before-bottom.start svg { transform: rotate(180deg) scaleX(-1); }
20+
.below-start.start svg { transform: rotate(-90deg); }
21+
22+
/* End (End/After) */
23+
.above-end.end svg { transform: rotate(90deg); }
24+
.after-top.end svg { transform: rotate(0deg) scaleX(-1); }
25+
.after.end svg { transform: rotate(90deg); }
26+
.after-bottom.end svg { transform: rotate(180deg); }
27+
.below-end.end svg { transform: rotate(90deg) scaleX(-1); }
28+
29+
/* Center */
30+
.above svg { transform: rotate(0deg); }
31+
.below svg { transform: rotate(180deg); }
32+
33+
/* RTL Swaps */
34+
[dir="rtl"] .above-start.start svg { transform: rotate(90deg); }
35+
[dir="rtl"] .before-top.start svg { transform: rotate(0deg) scaleX(-1); }
36+
[dir="rtl"] .above-end.end svg { transform: rotate(-90deg) scaleX(-1); }
37+
[dir="rtl"] .after-top.end svg { transform: rotate(0deg); }
38+
[dir="rtl"] .before.start svg { transform: rotate(90deg); }
39+
[dir="rtl"] .after.end svg { transform: rotate(-90deg); }
40+
[dir="rtl"] .before-bottom.start svg { transform: rotate(180deg); }
41+
[dir="rtl"] .after-bottom.end svg { transform: rotate(180deg) scaleX(-1); }
42+
[dir="rtl"] .below-start.start svg { transform: rotate(90deg) scaleX(-1); }
43+
[dir="rtl"] .below-end.end svg { transform: rotate(-90deg); }
1544
</style>
1645
<FluentStack VerticalAlignment="VerticalAlignment.Top">
1746
<span>
@@ -33,89 +62,113 @@
3362
</FluentBadge>
3463
</span>
3564

36-
<FluentButton IconOnly="true"
37-
Id="above-start"
38-
Style="grid-area: above-start"
39-
OnClick="@(() => HandlePositioning(Positioning.AboveStart))">
40-
<svg style="transform: rotate(-90deg) scaleX(-1)"><use href="#arrow-step-back-20-regular"></use></svg>
41-
</FluentButton>
42-
43-
<FluentButton IconOnly="true"
44-
Id="above"
45-
Style="grid-area: above"
46-
OnClick="@(() => HandlePositioning(Positioning.Above))">
47-
<svg style="transform: rotate(0deg)"><use href="#arrow-step-out-20-regular"></use></svg>
48-
</FluentButton>
49-
50-
<FluentButton IconOnly="true"
51-
Id="above-end"
52-
Style="grid-area: above-end"
53-
OnClick="@(() => HandlePositioning(Positioning.AboveEnd))">
54-
<svg style="transform: rotate(90deg)"><use href="#arrow-step-back-20-regular"></use></svg>
55-
</FluentButton>
56-
57-
<FluentButton IconOnly="true"
58-
Id="before-top"
59-
Style="grid-area: before-top"
60-
OnClick="@(() => HandlePositioning(Positioning.BeforeTop))">
61-
<svg style="transform: rotate(0deg)"><use href="#arrow-step-back-20-regular"></use></svg>
62-
</FluentButton>
63-
64-
<FluentButton IconOnly="true"
65-
Id="before"
66-
Style="grid-area: before"
67-
OnClick="@(() => HandlePositioning(Positioning.Before))">
68-
<svg style="transform: rotate(-90deg)"><use href="#arrow-step-out-20-regular"></use></svg>
69-
</FluentButton>
70-
71-
<FluentButton IconOnly="true"
72-
Id="before-bottom"
73-
Style="grid-area: before-bottom"
74-
OnClick="@(() => HandlePositioning(Positioning.BeforeBottom))">
75-
<svg style="transform: rotate(180deg) scaleX(-1)"><use href="#arrow-step-back-20-regular"></use></svg>
76-
</FluentButton>
77-
78-
<FluentButton IconOnly="true"
79-
Id="after-top"
80-
Style="grid-area: after-top"
81-
OnClick="@(() => HandlePositioning(Positioning.AfterTop))">
82-
<svg style="transform: rotate(0deg) scaleX(-1)"><use href="#arrow-step-back-20-regular"></use></svg>
83-
</FluentButton>
84-
85-
<FluentButton IconOnly="true"
86-
Id="after"
87-
Style="grid-area: after"
88-
OnClick="@(() => HandlePositioning(Positioning.After))">
89-
<svg style="transform: rotate(90deg)"><use href="#arrow-step-out-20-regular"></use></svg>
90-
</FluentButton>
91-
92-
<FluentButton IconOnly="true"
93-
Id="after-bottom"
94-
Style="grid-area: after-bottom"
95-
OnClick="@(() => HandlePositioning(Positioning.AfterBottom))">
96-
<svg style="transform: rotate(180deg)"><use href="#arrow-step-back-20-regular"></use></svg>
97-
</FluentButton>
98-
99-
<FluentButton IconOnly="true"
100-
Id="below-start"
101-
Style="grid-area: below-start"
102-
OnClick="@(() => HandlePositioning(Positioning.BelowStart))">
103-
<svg style="transform: rotate(-90deg)"><use href="#arrow-step-back-20-regular"></use></svg>
104-
</FluentButton>
105-
106-
<FluentButton IconOnly="true"
107-
Id="below"
108-
Style="grid-area: below"
109-
OnClick="@(() => HandlePositioning(Positioning.Below))">
110-
<svg style="transform: rotate(180deg)"><use href="#arrow-step-out-20-regular"></use></svg>
111-
</FluentButton>
112-
113-
<FluentButton IconOnly="true"
114-
Id="below-end"
115-
Style="grid-area: below-end"
116-
OnClick="@(() => HandlePositioning(Positioning.BelowEnd))">
117-
<svg style="transform: rotate(90deg) scaleX(-1)"><use href="#arrow-step-back-20-regular"></use></svg>
118-
</FluentButton>
65+
<FluentButton IconOnly="true"
66+
Id="above-start"
67+
Class="above-start start"
68+
Style="grid-area: above-start"
69+
Title="Above Start"
70+
OnClick="@(() => HandlePositioning(Positioning.AboveStart))">
71+
<svg><use href="#arrow-step-back-20-regular"></use></svg>
72+
</FluentButton>
73+
74+
<FluentButton IconOnly="true"
75+
Id="above"
76+
Class="above"
77+
Style="grid-area: above"
78+
Title="Above"
79+
OnClick="@(() => HandlePositioning(Positioning.Above))">
80+
<svg><use href="#arrow-step-out-20-regular"></use></svg>
81+
</FluentButton>
82+
83+
<FluentButton IconOnly="true"
84+
Id="above-end"
85+
Class="above-end end"
86+
Style="grid-area: above-end"
87+
Title="Above End"
88+
OnClick="@(() => HandlePositioning(Positioning.AboveEnd))">
89+
<svg><use href="#arrow-step-back-20-regular"></use></svg>
90+
</FluentButton>
91+
92+
<FluentButton IconOnly="true"
93+
Id="before-top"
94+
Class="before-top start"
95+
Style="grid-area: before-top"
96+
Title="Before Top"
97+
OnClick="@(() => HandlePositioning(Positioning.BeforeTop))">
98+
<svg><use href="#arrow-step-back-20-regular"></use></svg>
99+
</FluentButton>
100+
101+
<FluentButton IconOnly="true"
102+
Id="before"
103+
Class="before start"
104+
Style="grid-area: before"
105+
Title="Before"
106+
OnClick="@(() => HandlePositioning(Positioning.Before))">
107+
<svg><use href="#arrow-step-out-20-regular"></use></svg>
108+
</FluentButton>
109+
110+
<FluentButton IconOnly="true"
111+
Id="before-bottom"
112+
Class="before-bottom start"
113+
Style="grid-area: before-bottom"
114+
Title="Before Bottom"
115+
OnClick="@(() => HandlePositioning(Positioning.BeforeBottom))">
116+
<svg><use href="#arrow-step-back-20-regular"></use></svg>
117+
</FluentButton>
118+
119+
<FluentButton IconOnly="true"
120+
Id="after-top"
121+
Class="after-top end"
122+
Style="grid-area: after-top"
123+
Title="After Top"
124+
OnClick="@(() => HandlePositioning(Positioning.AfterTop))">
125+
<svg><use href="#arrow-step-back-20-regular"></use></svg>
126+
</FluentButton>
127+
128+
<FluentButton IconOnly="true"
129+
Id="after"
130+
Class="after end"
131+
Style="grid-area: after"
132+
Title="After"
133+
OnClick="@(() => HandlePositioning(Positioning.After))">
134+
<svg><use href="#arrow-step-out-20-regular"></use></svg>
135+
</FluentButton>
136+
137+
<FluentButton IconOnly="true"
138+
Id="after-bottom"
139+
Class="after-bottom end"
140+
Style="grid-area: after-bottom"
141+
Title="After Bottom"
142+
OnClick="@(() => HandlePositioning(Positioning.AfterBottom))">
143+
<svg><use href="#arrow-step-back-20-regular"></use></svg>
144+
</FluentButton>
145+
146+
<FluentButton IconOnly="true"
147+
Id="below-start"
148+
Class="below-start start"
149+
Style="grid-area: below-start"
150+
Title="Below Start"
151+
OnClick="@(() => HandlePositioning(Positioning.BelowStart))">
152+
<svg><use href="#arrow-step-back-20-regular"></use></svg>
153+
</FluentButton>
154+
155+
<FluentButton IconOnly="true"
156+
Id="below"
157+
Class="below"
158+
Style="grid-area: below"
159+
Title="Below"
160+
OnClick="@(() => HandlePositioning(Positioning.Below))">
161+
<svg><use href="#arrow-step-out-20-regular"></use></svg>
162+
</FluentButton>
163+
164+
<FluentButton IconOnly="true"
165+
Id="below-end"
166+
Class="below-end end"
167+
Style="grid-area: below-end"
168+
Title="Below End"
169+
OnClick="@(() => HandlePositioning(Positioning.BelowEnd))">
170+
<svg><use href="#arrow-step-back-20-regular"></use></svg>
171+
</FluentButton>
119172

120173
<svg style="display: none">
121174
<symbol id="arrow-step-out-20-regular" viewBox="0 0 20 20">

0 commit comments

Comments
 (0)