Styling improvements

Author: AB-xdev

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 4.2.0
+* Improved styling
+  * Overlay now has the same minimum width as the underlying DateRangePicker
+    * The default is ``20em``, this can be changed using ``--date-range-picker-min-width``
+  * Layouts inside the overlay now use the full available width
+  * Removed excess top padding from input components
+  * Refactored CSS class names (should cause less conflicts now)
+* Updated to Vaadin 24.5
+
 ## 4.1.1
 * Only use client-side locale for formatting when no ``formatLocale`` has been set #353
 
@@ -13,7 +22,6 @@
 * Various dependency updates including Vaadin 24.1
 
 ## 4.0.0
-
 ⚠️<i>This release contains breaking changes</i>
 
 * Adds support for Vaadin 24+, drops support for Vaadin 23<br/>
@@ -32,12 +40,10 @@
   * Vaadin 23.3
 
 ## 3.0.1
-
 * Updated dependencies
   * Vaadin 23.2
 
 ## 3.0.0
-
 ⚠️<i>This release contains breaking changes</i>
 
 * Adds support for Vaadin 23+, drops support for Vaadin 14 #155<br/>

pom.xml

@@ -6,7 +6,7 @@
 
 	<groupId>software.xdev</groupId>
 	<artifactId>vaadin-date-range-picker-root</artifactId>
-	<version>4.1.2-SNAPSHOT</version>
+	<version>4.2.0-SNAPSHOT</version>
 	<packaging>pom</packaging>
 
 	<organization>

vaadin-date-range-picker-demo/pom.xml

@@ -7,11 +7,11 @@
 	<parent>
 		<groupId>software.xdev</groupId>
 		<artifactId>vaadin-date-range-picker-root</artifactId>
-		<version>4.1.2-SNAPSHOT</version>
+		<version>4.2.0-SNAPSHOT</version>
 	</parent>
 
 	<artifactId>vaadin-date-range-picker-demo</artifactId>
-	<version>4.1.2-SNAPSHOT</version>
+	<version>4.2.0-SNAPSHOT</version>
 	<packaging>jar</packaging>
 
 	<organization>

vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerStyledDemo.java

@@ -3,8 +3,10 @@
 import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.splitlayout.SplitLayout;
 import com.vaadin.flow.dom.ThemeList;
 import com.vaadin.flow.router.Route;
 import com.vaadin.flow.theme.lumo.Lumo;
@@ -15,15 +17,20 @@ public class DateRangePickerStyledDemo extends AbstractSimpleChangeDemo
 {
 	public static final String NAV = "styled";
 
-	private final Button btnDarkMode = new Button("Toogle theme");
+	private final Button btnDarkMode = new Button("Toggle theme");
 
 	public DateRangePickerStyledDemo()
 	{
 		this.initUI();
 	}
 
+	@SuppressWarnings("checkstyle:MagicNumber")
 	protected void initUI()
 	{
+		this.dateRangePicker.setWidthFull();
+		
+		this.taResult.setSizeFull();
+		
 		this.btnDarkMode.addClickListener(ev ->
 		{
 			final ThemeList themeList = UI.getCurrent().getElement().getThemeList();
@@ -40,11 +47,13 @@ protected void initUI()
 			this.updateBtnDarkMode();
 		});
 
-		this.taResult.setSizeFull();
+		final SplitLayout splitLayout = new SplitLayout(this.dateRangePicker, new Div());
+		splitLayout.setSplitterPosition(25);
+		splitLayout.setWidthFull();
 
 		this.getContent().setPadding(false);
 		this.getContent().add(
-			new VerticalLayout(this.dateRangePicker),
+			splitLayout,
 			new VerticalLayout(this.taResult, this.btnDarkMode));
 		this.getContent().getChildren().forEach(comp -> ((HasSize)comp).setHeight("50%"));
 		this.getContent().setHeightFull();

vaadin-date-range-picker/pom.xml

@@ -6,7 +6,7 @@
 
 	<groupId>software.xdev</groupId>
 	<artifactId>vaadin-date-range-picker</artifactId>
-	<version>4.1.2-SNAPSHOT</version>
+	<version>4.2.0-SNAPSHOT</version>
 	<packaging>jar</packaging>
 
 	<name>vaadin-date-range-picker</name>

vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePicker.java

@@ -219,7 +219,6 @@ protected void initUI()
 		this.setId("DateRangePickerID" + nextID.incrementAndGet());
 
 		this.btnOverview.addClassNames(DateRangePickerStyles.BUTTON, DateRangePickerStyles.CLICKABLE);
-		this.btnOverview.setMinWidth("20em");
 		this.btnOverview.setWidthFull();
 
 		this.btnOverview.setDisableOnClick(true);

vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerOverlay.java

@@ -55,7 +55,7 @@ public class DateRangePickerOverlay<D extends DateRange> extends Composite<Verti
 	/*
 	 * Fields
 	 */
-	protected boolean readOnly = false;
+	protected boolean readOnly;
 
 	protected DateRangePicker<D> dateRangePicker;
 	protected DateRangeModel<D> currentModel;
@@ -84,14 +84,16 @@ protected void initUI()
 		this.btnBackwardRange
 			.addClassNames(DateRangePickerStyles.FLEX_CHILD_CONTENTSIZE, DateRangePickerStyles.CLICKABLE);
 
-		this.cbDateRange.addClassName(DateRangePickerStyles.FLEX_CHILD_AUTOGROW);
+		this.cbDateRange.addClassNames(
+			DateRangePickerStyles.FLEX_CHILD_AUTOGROW,
+			DateRangePickerStyles.PADDING_TOP_XS);
 		this.setTextFieldDefaultWidthFlexConform(this.cbDateRange);
 
 		this.btnForwardRange
 			.addClassNames(DateRangePickerStyles.FLEX_CHILD_CONTENTSIZE, DateRangePickerStyles.CLICKABLE);
 
 		final HorizontalLayout hlRange = new HorizontalLayout();
-		hlRange.addClassNames(DateRangePickerStyles.FLEX_CHILD_AUTOGROW, DateRangePickerStyles.FLEX_CONTAINER);
+		hlRange.addClassNames(DateRangePickerStyles.OVERLAY_LAYOUT_ROW);
 		hlRange.setAlignItems(Alignment.BASELINE);
 		hlRange.setJustifyContentMode(JustifyContentMode.BETWEEN);
 		hlRange.setMargin(false);
@@ -103,21 +105,20 @@ protected void initUI()
 		this.initDatePicker(this.dpEnd);
 
 		final HorizontalLayout hlDatepickers = new HorizontalLayout();
-		hlDatepickers.addClassNames(DateRangePickerStyles.FLEX_CHILD_AUTOGROW, DateRangePickerStyles.FLEX_CONTAINER);
+		hlDatepickers.addClassNames(DateRangePickerStyles.OVERLAY_LAYOUT_ROW);
 		hlDatepickers.setMargin(false);
 		hlDatepickers.setSpacing(true);
 		hlDatepickers.setPadding(false);
 		hlDatepickers.add(this.dpStart, this.dpEnd);
 
-		this.addClassName(DateRangePickerStyles.FLEX_CONTAINER);
 		this.add(hlRange, hlDatepickers);
 		this.getContent().setPadding(true);
 	}
 
 	protected void initDatePicker(final DatePicker dp)
 	{
 		this.setTextFieldDefaultWidthFlexConform(dp);
-		dp.addClassName(DateRangePickerStyles.FLEX_CHILD_AUTOGROW);
+		dp.addClassNames(DateRangePickerStyles.FLEX_CHILD_AUTOGROW, DateRangePickerStyles.PADDING_TOP_XS);
 		dp.setWeekNumbersVisible(true);
 	}
 

vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerStyles.java

@@ -31,12 +31,14 @@ private DateRangePickerStyles()
 	public static final String BUTTON = "date-range-picker-button";
 	public static final String OVERLAY_BASE = "date-range-picker-overlay-base";
 	public static final String OVERLAY_LAYOUT = "date-range-picker-overlay-layout";
+	public static final String OVERLAY_LAYOUT_ROW = "date-range-picker-overlay-layout-row";
 
 	/*
 	 * FLEX
 	 */
-	public static final String FLEX_CONTAINER = "flex-container";
+	public static final String FLEX_CHILD_AUTOGROW = "date-range-picker-flex-child-autogrow";
+	public static final String FLEX_CHILD_CONTENTSIZE = "date-range-picker-flex-child-contentsize";
 
-	public static final String FLEX_CHILD_AUTOGROW = "flex-child-autogrow";
-	public static final String FLEX_CHILD_CONTENTSIZE = "flex-child-contentsize";
+	// Used to remove Vaadin's default padding which adds a lot of blank space to the overlay
+	public static final String PADDING_TOP_XS = "date-range-picker-padding-top-xs";
 }

vaadin-date-range-picker/src/main/resources/META-INF/resources/frontend/styles/dateRangePicker.css

@@ -6,30 +6,39 @@
 	margin-bottom: 0;
 	border-radius: 0;
 	color: var(--lumo-body-text-color);
+	min-width: var(--date-range-picker-min-width, 20em);
 }
 
 .date-range-picker-overlay-base {
 	position: relative;
 }
 
 .date-range-picker-overlay-layout {
+	display: flex;
 	position: absolute;
 	left: 0;
 	right: 0;
 	z-index: 1;
 	background-color: var(--lumo-base-color);
 	border: 1px solid var(--lumo-contrast-5pct);
 	border-top: none;
+	min-width: var(--date-range-picker-min-width, 20em);
 }
 
-.flex-container {
+.date-range-picker-overlay-layout-row {
+	width: 100%;
+	flex: 1 1 auto;
 	display: flex;
 }
 
-.flex-child-autogrow {
+.date-range-picker-flex-child-autogrow {
 	flex: 1 1 auto;
 }
 
-.flex-child-contentsize {
+.date-range-picker-flex-child-contentsize {
 	flex: 0 1 auto;
 }
+
+.date-range-picker-padding-top-xs {
+	padding-top: var(--lumo-space-xs);
+}