Skip to content

Commit 4b321c7

Browse files
sissbrueckersissbruecker
authored
feat: mark full size components with data attribute (#20929)
* feat: mark full size components with data attribute * drop v- prefix from attribute name * update feature flag name * reuse width / height full methods * extract constants for data attributes
1 parent 355bfc2 commit 4b321c7

File tree

3 files changed

+147
-3
lines changed

3 files changed

+147
-3
lines changed

‎flow-server/src/main/java/com/vaadin/flow/component/HasSize.java

+47-3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
import com.vaadin.flow.dom.Element;
2121
import com.vaadin.flow.dom.ElementConstants;
22+
import com.vaadin.flow.server.Constants;
2223

2324
/**
2425
* Any component implementing this interface supports setting the size of the
@@ -47,6 +48,7 @@ public interface HasSize extends HasElement {
4748
*/
4849
default void setWidth(String width) {
4950
getElement().getStyle().setWidth(width);
51+
getElement().removeAttribute(Constants.ATTRIBUTE_WIDTH_FULL);
5052
}
5153

5254
/**
@@ -194,6 +196,7 @@ default Optional<Unit> getWidthUnit() {
194196
*/
195197
default void setHeight(String height) {
196198
getElement().getStyle().setHeight(height);
199+
getElement().removeAttribute(Constants.ATTRIBUTE_HEIGHT_FULL);
197200
}
198201

199202
/**
@@ -332,30 +335,71 @@ default Optional<Unit> getHeightUnit() {
332335
* This is just a convenience method which delegates its call to the
333336
* {@link #setWidth(String)} and {@link #setHeight(String)} methods with
334337
* {@literal "100%"} as the argument value
338+
* <p>
339+
* When adding full-size components as a child of a Vaadin layout component
340+
* that is based on CSS Flexbox, such as HorizontalLayout or VerticalLayout,
341+
* this can result in unexpected behavior. For example, other components
342+
* with a fixed size may shrink to allow the full-size component to take up
343+
* as much space as possible, or the full-size component may cause the
344+
* layout to overflow. To improve this, you can enable the
345+
* {@code com.vaadin.experimental.layoutComponentImprovements} feature flag
346+
* to effectively make full-size components take up the <b>remaining</b>
347+
* space in the layout, rather than explicitly using 100% size of the
348+
* layout. This applies additional CSS styles that allow the component to
349+
* shrink below 100% if there are other components with fixed or relative
350+
* sizes in the layout.
335351
*/
336352
default void setSizeFull() {
337-
setWidth("100%");
338-
setHeight("100%");
353+
setWidthFull();
354+
setHeightFull();
339355
}
340356

341357
/**
342358
* Sets the width of the component to "100%".
343359
* <p>
344360
* This is just a convenience method which delegates its call to the
345-
* {@link #setWidth(String)} with {@literal "100%"} as the argument value
361+
* {@link #setWidth(String)} with {@literal "100%"} as the argument value.
362+
* <p>
363+
* When adding full-size components as a child of a Vaadin layout component
364+
* that is based on CSS Flexbox, such as HorizontalLayout or VerticalLayout,
365+
* this can result in unexpected behavior. For example, other components
366+
* with a fixed size may shrink to allow the full-size component to take up
367+
* as much space as possible, or the full-size component may cause the
368+
* layout to overflow. To improve this, you can enable the
369+
* {@code com.vaadin.experimental.layoutComponentImprovements} feature flag
370+
* to effectively make full-size components take up the <b>remaining</b>
371+
* space in the layout, rather than explicitly using 100% size of the
372+
* layout. This applies additional CSS styles that allow the component to
373+
* shrink below 100% if there are other components with fixed or relative
374+
* sizes in the layout.
346375
*/
347376
default void setWidthFull() {
348377
setWidth("100%");
378+
getElement().setAttribute(Constants.ATTRIBUTE_WIDTH_FULL, true);
349379
}
350380

351381
/**
352382
* Sets the height of the component to "100%".
353383
* <p>
354384
* This is just a convenience method which delegates its call to the
355385
* {@link #setHeight(String)} with {@literal "100%"} as the argument value
386+
* <p>
387+
* When adding full-size components as a child of a Vaadin layout component
388+
* that is based on CSS Flexbox, such as HorizontalLayout or VerticalLayout,
389+
* this can result in unexpected behavior. For example, other components
390+
* with a fixed size may shrink to allow the full-size component to take up
391+
* as much space as possible, or the full-size component may cause the
392+
* layout to overflow. To improve this, you can enable the
393+
* {@code com.vaadin.experimental.layoutComponentImprovements} feature flag
394+
* to effectively make full-size components take up the <b>remaining</b>
395+
* space in the layout, rather than explicitly using 100% size of the
396+
* layout. This applies additional CSS styles that allow the component to
397+
* shrink below 100% if there are other components with fixed or relative
398+
* sizes in the layout.
356399
*/
357400
default void setHeightFull() {
358401
setHeight("100%");
402+
getElement().setAttribute(Constants.ATTRIBUTE_HEIGHT_FULL, true);
359403
}
360404

361405
/**

‎flow-server/src/main/java/com/vaadin/flow/server/Constants.java

+12
Original file line numberDiff line numberDiff line change
@@ -396,6 +396,18 @@ public final class Constants implements Serializable {
396396
*/
397397
public static final String DISABLE_PREPARE_FRONTEND_CACHE = "disable.prepare.frontend.cache";
398398

399+
/**
400+
* Attribute used by HasSize to mark elements that have been set to full
401+
* width.
402+
*/
403+
public static final String ATTRIBUTE_WIDTH_FULL = "data-width-full";
404+
405+
/**
406+
* Attribute used by HasSize to mark elements that have been set to full
407+
* height.
408+
*/
409+
public static final String ATTRIBUTE_HEIGHT_FULL = "data-height-full";
410+
399411
private Constants() {
400412
// prevent instantiation constants class only
401413
}

‎flow-server/src/test/java/com/vaadin/flow/component/HasSizeTest.java

+88
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
*/
1616
package com.vaadin.flow.component;
1717

18+
import com.vaadin.flow.server.Constants;
1819
import org.junit.Assert;
1920
import org.junit.Test;
2021

@@ -136,6 +137,47 @@ public void setSizeFull() {
136137
Assert.assertEquals("100%", component.getHeight());
137138
}
138139

140+
@Test
141+
public void setSizeFull_addsDataAttribute() {
142+
HasSizeComponent component = new HasSizeComponent();
143+
component.setSizeFull();
144+
145+
Assert.assertTrue(component.getElement()
146+
.hasAttribute(Constants.ATTRIBUTE_WIDTH_FULL));
147+
Assert.assertTrue(component.getElement()
148+
.hasAttribute(Constants.ATTRIBUTE_HEIGHT_FULL));
149+
}
150+
151+
@Test
152+
public void setSizeFull_setSize_removesDataAttribute() {
153+
HasSizeComponent component = new HasSizeComponent();
154+
component.setSizeFull();
155+
156+
component.setWidth("10px");
157+
Assert.assertFalse(component.getElement()
158+
.hasAttribute(Constants.ATTRIBUTE_WIDTH_FULL));
159+
Assert.assertTrue(component.getElement()
160+
.hasAttribute(Constants.ATTRIBUTE_HEIGHT_FULL));
161+
162+
component.setHeight("10px");
163+
Assert.assertFalse(component.getElement()
164+
.hasAttribute(Constants.ATTRIBUTE_WIDTH_FULL));
165+
Assert.assertFalse(component.getElement()
166+
.hasAttribute(Constants.ATTRIBUTE_HEIGHT_FULL));
167+
}
168+
169+
@Test
170+
public void setSizeFull_setSizeUndefined_removesDataAttribute() {
171+
HasSizeComponent component = new HasSizeComponent();
172+
component.setSizeFull();
173+
component.setSizeUndefined();
174+
175+
Assert.assertFalse(component.getElement()
176+
.hasAttribute(Constants.ATTRIBUTE_WIDTH_FULL));
177+
Assert.assertFalse(component.getElement()
178+
.hasAttribute(Constants.ATTRIBUTE_HEIGHT_FULL));
179+
}
180+
139181
@Test
140182
public void setWidthFull() {
141183
HasSizeComponent component = new HasSizeComponent();
@@ -144,6 +186,29 @@ public void setWidthFull() {
144186
Assert.assertEquals("100%", component.getWidth());
145187
}
146188

189+
@Test
190+
public void setWidthFull_addsDataAttribute() {
191+
HasSizeComponent component = new HasSizeComponent();
192+
component.setWidthFull();
193+
194+
Assert.assertTrue(component.getElement()
195+
.hasAttribute(Constants.ATTRIBUTE_WIDTH_FULL));
196+
Assert.assertFalse(component.getElement()
197+
.hasAttribute(Constants.ATTRIBUTE_HEIGHT_FULL));
198+
}
199+
200+
@Test
201+
public void setWidthFull_setWidth_removesDataAttribute() {
202+
HasSizeComponent component = new HasSizeComponent();
203+
component.setWidthFull();
204+
component.setWidth("10px");
205+
206+
Assert.assertFalse(component.getElement()
207+
.hasAttribute(Constants.ATTRIBUTE_WIDTH_FULL));
208+
Assert.assertFalse(component.getElement()
209+
.hasAttribute(Constants.ATTRIBUTE_HEIGHT_FULL));
210+
}
211+
147212
@Test
148213
public void setHeightFull() {
149214
HasSizeComponent component = new HasSizeComponent();
@@ -152,6 +217,29 @@ public void setHeightFull() {
152217
Assert.assertEquals("100%", component.getHeight());
153218
}
154219

220+
@Test
221+
public void setHeightFull_addsDataAttribute() {
222+
HasSizeComponent component = new HasSizeComponent();
223+
component.setHeightFull();
224+
225+
Assert.assertFalse(component.getElement()
226+
.hasAttribute(Constants.ATTRIBUTE_WIDTH_FULL));
227+
Assert.assertTrue(component.getElement()
228+
.hasAttribute(Constants.ATTRIBUTE_HEIGHT_FULL));
229+
}
230+
231+
@Test
232+
public void setHeightFull_setHeight_removesDataAttribute() {
233+
HasSizeComponent component = new HasSizeComponent();
234+
component.setHeightFull();
235+
component.setHeight("10px");
236+
237+
Assert.assertFalse(component.getElement()
238+
.hasAttribute(Constants.ATTRIBUTE_WIDTH_FULL));
239+
Assert.assertFalse(component.getElement()
240+
.hasAttribute(Constants.ATTRIBUTE_HEIGHT_FULL));
241+
}
242+
155243
@Test
156244
public void setSizeUndefined() {
157245
HasSizeComponent component = new HasSizeComponent();

0 commit comments

Comments
 (0)