Skip to content

Commit 75f6c05

Browse files
brandyscarneybrandyscarney
committed
feat(css): add new css utility classes for display and flex utils (#30567)
Issue number: resolves #22469 --------- - Adds new responsive display classes with the following values: `none`, `inline`, `inline-block`, `block`, `flex`, `inline-flex`, `grid`, `inline-grid`, `table`, `table-cell`, `table-row` - Adds new responsive flex util classes for the following properties: `align-content`, `align-items`, `align-self`, `justify-content`, `flex-direction`, `flex-wrap`, `flex`, `flex-grow` , `flex-shrink`, `order` - Adds e2e tests to verify the correct classes are in the CSS files --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
1 parent d5627c7 commit 75f6c05

File tree

6 files changed

+383
-91
lines changed

6 files changed

+383
-91
lines changed

‎core/src/components/back-button/test/basic/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ <h3>Custom</h3>
125125

126126
<ion-toolbar color="dark">
127127
<ion-buttons slot="start">
128-
<ion-back-button class="ion-hide"></ion-back-button>
128+
<ion-back-button class="ion-display-none"></ion-back-button>
129129
</ion-buttons>
130130
<ion-title>Hidden</ion-title>
131131
</ion-toolbar>

‎core/src/components/progress-bar/progress-bar.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ const renderProgress = (value: number, buffer: number) => {
107107
* When finalBuffer === 1, we use display: none
108108
* instead of removing the element to avoid flickering.
109109
*/
110+
// TODO(FW-6697): change `ion-hide` class to `ion-display-none` or another class
110111
<div
111112
class={{ 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }}
112113
style={{ transform: `translateX(${finalBuffer * 100}%)` }}

‎core/src/css/display.scss

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,14 @@
22
@import "../themes/ionic.mixins";
33

44
// Display
5-
// --------------------------------------------------
6-
// Modifies display of a particular element based on the given classes
5+
// ------------------------------------------------------------------
6+
// Provides utility classes to control the CSS display property
7+
// of elements. Includes responsive variants for toggling between
8+
// block, inline, flex, grid, and other display values at different
9+
// breakpoints.
710

11+
// TODO(FW-6697): remove ion-hide-* classes in favor of the new
12+
// ion-display-* classes
813
.ion-hide {
914
display: none !important;
1015
}
@@ -29,3 +34,29 @@
2934
}
3035
}
3136
}
37+
38+
$display-values: (
39+
none,
40+
inline,
41+
inline-block,
42+
block,
43+
flex,
44+
inline-flex,
45+
grid,
46+
inline-grid,
47+
table,
48+
table-cell,
49+
table-row
50+
);
51+
52+
@each $display in $display-values {
53+
@each $breakpoint in map-keys($screen-breakpoints) {
54+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
55+
56+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
57+
.ion-display#{$infix}-#{$display} {
58+
display: #{$display} !important;
59+
}
60+
}
61+
}
62+
}

‎core/src/css/flex-utils.scss

Lines changed: 200 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,211 @@
1-
// Flex Utilities
2-
// --------------------------------------------------
3-
// Creates flex classes to align flex containers
4-
// and items
5-
6-
// Align Self
7-
// --------------------------------------------------
8-
9-
.ion-align-self-start {
10-
align-self: flex-start !important;
11-
}
12-
13-
.ion-align-self-end {
14-
align-self: flex-end !important;
15-
}
16-
17-
.ion-align-self-center {
18-
align-self: center !important;
19-
}
1+
@import "../themes/ionic.globals";
2+
@import "../themes/ionic.mixins";
203

21-
.ion-align-self-stretch {
22-
align-self: stretch !important;
23-
}
24-
25-
.ion-align-self-baseline {
26-
align-self: baseline !important;
27-
}
28-
29-
.ion-align-self-auto {
30-
align-self: auto !important;
31-
}
32-
33-
34-
// Flex Wrap
35-
// --------------------------------------------------
36-
37-
.ion-wrap {
38-
flex-wrap: wrap !important;
39-
}
40-
41-
.ion-nowrap {
42-
flex-wrap: nowrap !important;
43-
}
44-
45-
.ion-wrap-reverse {
46-
flex-wrap: wrap-reverse !important;
47-
}
48-
49-
50-
// Justify Content
51-
// --------------------------------------------------
52-
53-
.ion-justify-content-start {
54-
justify-content: flex-start !important;
55-
}
56-
57-
.ion-justify-content-center {
58-
justify-content: center !important;
59-
}
60-
61-
.ion-justify-content-end {
62-
justify-content: flex-end !important;
63-
}
64-
65-
.ion-justify-content-around {
66-
justify-content: space-around !important;
67-
}
68-
69-
.ion-justify-content-between {
70-
justify-content: space-between !important;
71-
}
72-
73-
.ion-justify-content-evenly {
74-
justify-content: space-evenly !important;
4+
// Flex Utilities
5+
// ------------------------------------------------------------------
6+
// Provides utility classes to control flexbox layout, alignment,
7+
// and sizing of elements. Includes responsive variants for managing
8+
// flex direction, alignment, justification, wrapping, growth,
9+
// shrinking, and ordering at different breakpoints.
10+
11+
// Align Content
12+
// ------------------------------------------------------------------
13+
14+
$align-content-values: (
15+
start: flex-start,
16+
end: flex-end,
17+
center: center,
18+
between: space-between,
19+
around: space-around,
20+
stretch: stretch
21+
);
22+
23+
@each $breakpoint in map-keys($screen-breakpoints) {
24+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
25+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
26+
@each $key, $value in $align-content-values {
27+
.ion-align-content#{$infix}-#{$key} {
28+
align-content: #{$value} !important;
29+
}
30+
}
31+
}
7532
}
7633

77-
7834
// Align Items
79-
// --------------------------------------------------
80-
81-
.ion-align-items-start {
82-
align-items: flex-start !important;
35+
// ------------------------------------------------------------------
36+
37+
$align-items-values: (
38+
start,
39+
end,
40+
center,
41+
stretch,
42+
baseline
43+
);
44+
45+
@each $breakpoint in map-keys($screen-breakpoints) {
46+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
47+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
48+
@each $value in $align-items-values {
49+
.ion-align-items#{$infix}-#{$value} {
50+
align-items: #{$value} !important;
51+
}
52+
}
53+
}
8354
}
8455

85-
.ion-align-items-center {
86-
align-items: center !important;
87-
}
88-
89-
.ion-align-items-end {
90-
align-items: flex-end !important;
56+
// Align Self
57+
// ------------------------------------------------------------------
58+
59+
$align-self-values: (
60+
start,
61+
end,
62+
center,
63+
stretch,
64+
baseline,
65+
auto
66+
);
67+
68+
@each $breakpoint in map-keys($screen-breakpoints) {
69+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
70+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
71+
@each $value in $align-self-values {
72+
.ion-align-self#{$infix}-#{$value} {
73+
align-self: #{$value} !important;
74+
}
75+
}
76+
}
9177
}
9278

93-
.ion-align-items-stretch {
94-
align-items: stretch !important;
79+
// Justify Content
80+
// ------------------------------------------------------------------
81+
82+
$justify-content-values: (
83+
start: flex-start,
84+
end: flex-end,
85+
center: center,
86+
between: space-between,
87+
around: space-around,
88+
evenly: space-evenly
89+
);
90+
91+
@each $breakpoint in map-keys($screen-breakpoints) {
92+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
93+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
94+
@each $key, $value in $justify-content-values {
95+
.ion-justify-content#{$infix}-#{$key} {
96+
justify-content: #{$value} !important;
97+
}
98+
}
99+
}
100+
}
101+
102+
// Flex Direction
103+
// ------------------------------------------------------------------
104+
105+
$flex-direction-values: (
106+
row,
107+
row-reverse,
108+
column,
109+
column-reverse
110+
);
111+
112+
@each $breakpoint in map-keys($screen-breakpoints) {
113+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
114+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
115+
@each $value in $flex-direction-values {
116+
.ion-flex#{$infix}-#{$value} {
117+
flex-direction: #{$value} !important;
118+
}
119+
}
120+
}
95121
}
96122

97-
.ion-align-items-baseline {
98-
align-items: baseline !important;
123+
// Flex Wrap
124+
// ------------------------------------------------------------------
125+
126+
$flex-wrap-values: (
127+
wrap,
128+
nowrap,
129+
wrap-reverse
130+
);
131+
132+
@each $value in $flex-wrap-values {
133+
// TODO(FW-6697): remove ion-wrap, ion-nowrap, ion-wrap-reverse
134+
// in favor of the new ion-flex-wrap, ion-flex-nowrap, and
135+
// ion-flex-wrap-reverse classes
136+
.ion-#{$value} {
137+
flex-wrap: #{$value} !important;
138+
}
139+
}
140+
141+
@each $breakpoint in map-keys($screen-breakpoints) {
142+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
143+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
144+
@each $value in $flex-wrap-values {
145+
.ion-flex#{$infix}-#{$value} {
146+
flex-wrap: #{$value} !important;
147+
}
148+
}
149+
}
150+
}
151+
152+
// Flex Fill
153+
// ------------------------------------------------------------------
154+
155+
$flex-fill-values: (
156+
1,
157+
auto,
158+
initial,
159+
none
160+
);
161+
162+
@each $breakpoint in map-keys($screen-breakpoints) {
163+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
164+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
165+
@each $value in $flex-fill-values {
166+
.ion-flex#{$infix}-#{$value} {
167+
flex: #{$value} !important;
168+
}
169+
}
170+
}
171+
}
172+
173+
// Flex Grow and Shrink
174+
// ------------------------------------------------------------------
175+
176+
@each $breakpoint in map-keys($screen-breakpoints) {
177+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
178+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
179+
.ion-flex#{$infix}-grow-0 {
180+
flex-grow: 0 !important;
181+
}
182+
183+
.ion-flex#{$infix}-grow-1 {
184+
flex-grow: 1 !important;
185+
}
186+
187+
.ion-flex#{$infix}-shrink-0 {
188+
flex-shrink: 0 !important;
189+
}
190+
191+
.ion-flex#{$infix}-shrink-1 {
192+
flex-shrink: 1 !important;
193+
}
194+
}
195+
}
196+
197+
// Flex Order
198+
// ------------------------------------------------------------------
199+
200+
@each $breakpoint in map-keys($screen-breakpoints) {
201+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
202+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
203+
.ion-order#{$infix}-first { order: -1 !important; }
204+
205+
@for $i from 0 through 12 {
206+
.ion-order#{$infix}-#{$i} { order: #{$i} !important; }
207+
}
208+
209+
.ion-order#{$infix}-last { order: 13 !important; }
210+
}
99211
}

0 commit comments

Comments
 (0)