Skip to content

Commit 837e089

Browse files
ShaneKShaneK
committed
refactor(toolbar): improve slot layout and visibility handling
1 parent 1e7a84f commit 837e089

File tree

6 files changed

+386
-58
lines changed

6 files changed

+386
-58
lines changed

‎core/src/components/segment/test/toolbar/index.html‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Segment - Basic</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body onload="listenForEvent()">
18+
<ion-app>
19+
<ion-toolbar>
20+
<ion-segment value="a">
21+
<ion-segment-button value="a">
22+
<ion-label>First</ion-label>
23+
</ion-segment-button>
24+
<ion-segment-button value="b">
25+
<ion-label>Second</ion-label>
26+
</ion-segment-button>
27+
<ion-segment-button value="c">
28+
<ion-label>Third</ion-label>
29+
</ion-segment-button>
30+
</ion-segment>
31+
<ion-buttons slot="start">
32+
<ion-button id="button" color="primary" fill="solid">
33+
Start
34+
</ion-button>
35+
</ion-buttons>
36+
</ion-toolbar>
37+
38+
<ion-toolbar>
39+
<ion-segment value="a">
40+
<ion-segment-button value="a">
41+
<ion-label>First</ion-label>
42+
</ion-segment-button>
43+
<ion-segment-button value="b">
44+
<ion-label>Second</ion-label>
45+
</ion-segment-button>
46+
<ion-segment-button value="c">
47+
<ion-label>Third</ion-label>
48+
</ion-segment-button>
49+
</ion-segment>
50+
<ion-buttons slot="end">
51+
<ion-button id="button" color="primary" fill="solid">
52+
End
53+
</ion-button>
54+
</ion-buttons>
55+
</ion-toolbar>
56+
57+
<ion-toolbar>
58+
<ion-segment value="a">
59+
<ion-segment-button value="a">
60+
<ion-label>First</ion-label>
61+
</ion-segment-button>
62+
<ion-segment-button value="b">
63+
<ion-label>Second</ion-label>
64+
</ion-segment-button>
65+
<ion-segment-button value="c">
66+
<ion-label>Third</ion-label>
67+
</ion-segment-button>
68+
</ion-segment>
69+
<ion-buttons slot="start">
70+
<ion-button id="button" color="primary" fill="solid">
71+
Start
72+
</ion-button>
73+
</ion-buttons>
74+
<ion-buttons slot="end">
75+
<ion-button id="button" color="primary" fill="solid">
76+
End
77+
</ion-button>
78+
</ion-buttons>
79+
</ion-toolbar>
80+
81+
<ion-toolbar color="primary">
82+
<ion-segment value="a">
83+
<ion-segment-button value="a">
84+
<ion-label>First</ion-label>
85+
</ion-segment-button>
86+
<ion-segment-button value="b">
87+
<ion-label>Second</ion-label>
88+
</ion-segment-button>
89+
<ion-segment-button value="c" disabled="true">
90+
<ion-label>Third</ion-label>
91+
</ion-segment-button>
92+
</ion-segment>
93+
<ion-buttons slot="secondary">
94+
<ion-button id="button" color="primary" fill="solid">
95+
Secondary
96+
</ion-button>
97+
</ion-buttons>
98+
<ion-buttons slot="primary">
99+
<ion-button id="button" color="primary" fill="solid">
100+
Primary
101+
</ion-button>
102+
</ion-buttons>
103+
</ion-toolbar>
104+
105+
<ion-toolbar color="light">
106+
<ion-segment value="a">
107+
<ion-segment-button value="a">
108+
<ion-label>First</ion-label>
109+
</ion-segment-button>
110+
<ion-segment-button value="b">
111+
<ion-label>Second</ion-label>
112+
</ion-segment-button>
113+
<ion-segment-button value="c" disabled="true">
114+
<ion-label>Third</ion-label>
115+
</ion-segment-button>
116+
</ion-segment>
117+
<ion-buttons slot="start">
118+
<ion-button id="button" color="primary" fill="solid">
119+
Start
120+
</ion-button>
121+
</ion-buttons>
122+
<ion-buttons slot="secondary">
123+
<ion-button id="button" color="primary" fill="solid">
124+
Secondary
125+
</ion-button>
126+
</ion-buttons>
127+
</ion-toolbar>
128+
129+
<ion-toolbar color="medium">
130+
<ion-segment value="a">
131+
<ion-segment-button value="a">
132+
<ion-label>First</ion-label>
133+
</ion-segment-button>
134+
<ion-segment-button value="b">
135+
<ion-label>Second</ion-label>
136+
</ion-segment-button>
137+
<ion-segment-button value="c" disabled="true">
138+
<ion-label>Third</ion-label>
139+
</ion-segment-button>
140+
</ion-segment>
141+
<ion-buttons slot="primary">
142+
<ion-button id="button" color="primary" fill="solid">
143+
Primary
144+
</ion-button>
145+
</ion-buttons>
146+
<ion-buttons slot="end">
147+
<ion-button id="button" color="primary" fill="solid">
148+
End
149+
</ion-button>
150+
</ion-buttons>
151+
</ion-toolbar>
152+
153+
<ion-toolbar color="dark">
154+
<ion-segment value="a">
155+
<ion-segment-button value="a">
156+
<ion-label>First</ion-label>
157+
</ion-segment-button>
158+
<ion-segment-button value="b">
159+
<ion-label>Second</ion-label>
160+
</ion-segment-button>
161+
<ion-segment-button value="c" disabled="true">
162+
<ion-label>Third</ion-label>
163+
</ion-segment-button>
164+
</ion-segment>
165+
<ion-buttons slot="start">
166+
<ion-button id="button" color="primary" fill="solid">
167+
Start
168+
</ion-button>
169+
</ion-buttons>
170+
<ion-buttons slot="secondary">
171+
<ion-button id="button" color="primary" fill="solid">
172+
Secondary
173+
</ion-button>
174+
</ion-buttons>
175+
<ion-buttons slot="primary">
176+
<ion-button id="button" color="primary" fill="solid">
177+
Primary
178+
</ion-button>
179+
</ion-buttons>
180+
<ion-buttons slot="end">
181+
<ion-button id="button" color="primary" fill="solid">
182+
End
183+
</ion-button>
184+
</ion-buttons>
185+
</ion-toolbar>
186+
187+
<script>
188+
</script>
189+
</ion-content>
190+
191+
<style>
192+
</style>
193+
</ion-app>
194+
</body>
195+
</html>

‎core/src/components/title/title.ionic.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,6 @@
1212
pointer-events: none;
1313
}
1414

15-
:host-context(ion-toolbar) {
16-
@include globals.position(0, null, null, 0);
17-
position: absolute;
18-
19-
width: 100%;
20-
height: 100%;
21-
22-
transform: translateZ(0);
23-
24-
z-index: -1; // TODO(ROU-10853): replace this value with a layer token. This is here to prevent the title from blokcing interaction with buttons.
25-
}
26-
2715
// Title: Large
2816
// --------------------------------------------------
2917

‎core/src/components/toolbar/test/basic/index.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,27 @@
4242
<ion-title> Toolbar </ion-title>
4343
</ion-toolbar>
4444

45+
<ion-toolbar>
46+
<ion-buttons slot="start">
47+
<ion-button>
48+
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
49+
</ion-button>
50+
<ion-button>
51+
<ion-icon slot="icon-only" name="search"></ion-icon>
52+
</ion-button>
53+
</ion-buttons>
54+
<ion-title> Toolbar with just start button </ion-title>
55+
</ion-toolbar>
56+
57+
<ion-toolbar>
58+
<ion-buttons slot="end">
59+
<ion-button color="secondary">
60+
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
61+
</ion-button>
62+
</ion-buttons>
63+
<ion-title> Toolbar with just end button </ion-title>
64+
</ion-toolbar>
65+
4566
<ion-toolbar>
4667
<ion-buttons slot="secondary">
4768
<ion-button>
@@ -59,6 +80,59 @@
5980
<ion-title> This is a long title with buttons. It just goes on and on my friend. </ion-title>
6081
</ion-toolbar>
6182

83+
<ion-toolbar>
84+
<ion-buttons slot="start">
85+
<ion-button>
86+
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
87+
</ion-button>
88+
<ion-button>
89+
<ion-icon slot="icon-only" name="search"></ion-icon>
90+
</ion-button>
91+
</ion-buttons>
92+
<ion-buttons slot="end">
93+
<ion-button color="secondary">
94+
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
95+
</ion-button>
96+
</ion-buttons>
97+
<ion-title> This is a long title with start
98+
and end buttons.
99+
It just goes on and on my friend. </ion-title>
100+
</ion-toolbar>
101+
102+
<ion-toolbar>
103+
<ion-buttons slot="start">
104+
<ion-button>
105+
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
106+
</ion-button>
107+
<ion-button>
108+
<ion-icon slot="icon-only" name="search"></ion-icon>
109+
</ion-button>
110+
</ion-buttons>
111+
<ion-buttons slot="primary">
112+
<ion-button color="secondary">
113+
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
114+
</ion-button>
115+
</ion-buttons>
116+
<ion-title> This is a long title with start and primary buttons. It just goes on and on my friend. </ion-title>
117+
</ion-toolbar>
118+
119+
<ion-toolbar>
120+
<ion-buttons slot="secondary">
121+
<ion-button>
122+
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
123+
</ion-button>
124+
<ion-button>
125+
<ion-icon slot="icon-only" name="search"></ion-icon>
126+
</ion-button>
127+
</ion-buttons>
128+
<ion-buttons slot="end">
129+
<ion-button color="secondary">
130+
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
131+
</ion-button>
132+
</ion-buttons>
133+
<ion-title> This is a long title with secondary and end buttons. It just goes on and on my friend. </ion-title>
134+
</ion-toolbar>
135+
62136
<ion-toolbar>
63137
<ion-buttons slot="secondary">
64138
<ion-button>

‎core/src/components/toolbar/toolbar.ionic.scss‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
11
@use "./toolbar.common";
22
@use "../../themes/ionic/ionic.globals.scss" as globals;
33

4-
$toolbar-order-ionic: (
5-
slot-start: 1,
6-
slot-secondary: 2,
7-
content: 3,
8-
slot-primary: 4,
9-
slot-end: 5,
10-
);
11-
124
// Ionic Toolbar
135
// --------------------------------------------------
146

@@ -31,9 +23,7 @@ $toolbar-order-ionic: (
3123
// --------------------------------------------------
3224

3325
.toolbar-content {
34-
flex: 2;
35-
order: map-get($toolbar-order-ionic, content);
36-
26+
flex: 1 1 auto;
3727
min-width: 0;
3828
}
3929

@@ -62,31 +52,35 @@ $toolbar-order-ionic: (
6252
// Ionic Toolbar Slot Placement
6353
// --------------------------------------------------
6454

65-
::slotted([slot="secondary"]) {
66-
order: map-get($toolbar-order-ionic, slot-secondary);
67-
}
68-
69-
::slotted([slot="primary"]) {
70-
order: map-get($toolbar-order-ionic, slot-primary);
71-
55+
:host(.has-end-content) slot[name="end"],
56+
:host(.show-end) slot[name="end"] {
57+
display: flex;
58+
flex: 1 1 0;
59+
gap: globals.$ion-space-200;
60+
justify-content: flex-end;
7261
text-align: end;
7362
}
7463

75-
::slotted([slot="start"]) {
76-
order: map-get($toolbar-order-ionic, slot-start);
64+
:host(.has-start-content) slot[name="start"],
65+
:host(.show-start) slot[name="start"] {
66+
display: flex;
67+
flex: 1 1 0;
68+
gap: globals.$ion-space-200;
7769
}
7870

79-
::slotted([slot="start"]),
80-
::slotted([slot="end"]) {
71+
:host(.has-primary-content) slot[name="primary"],
72+
:host(.show-primary) slot[name="primary"] {
8173
display: flex;
82-
83-
flex: 1;
74+
flex: 1 1 0;
8475
gap: globals.$ion-space-200;
76+
justify-content: flex-end;
77+
text-align: end;
8578
}
8679

87-
::slotted([slot="end"]) {
88-
justify-content: end;
89-
order: map-get($toolbar-order-ionic, slot-end);
90-
91-
font-size: globals.$ion-font-size-600;
80+
:host(.has-secondary-content) slot[name="secondary"],
81+
:host(.show-secondary) slot[name="secondary"] {
82+
display: flex;
83+
flex: 1 1 0;
84+
gap: globals.$ion-space-200;
9285
}
86+

0 commit comments

Comments
 (0)