diff --git a/dev/baseline.html b/dev/baseline.html new file mode 100644 index 00000000000..8f237721dc1 --- /dev/null +++ b/dev/baseline.html @@ -0,0 +1,282 @@ + + + + + + + + Field Baseline Alignment + + + + + + + + +

Plain

+
+ Inline text + + + Button + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Labels

+
+ Inline text + + + Button + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Helper Texts

+
+ Inline text + + + Button + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Helper Above Field

+
+ Inline text + + + Button + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Error Messages

+
+ Inline text + + + Button + + + + + + + + + + + + + + + + + + + + + + +
+ +

Mixed

+
+ Inline text + + + Button + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/packages/aura/src/size.css b/packages/aura/src/size.css index 5c99442812c..06df7438c4d 100644 --- a/packages/aura/src/size.css +++ b/packages/aura/src/size.css @@ -39,6 +39,10 @@ --vaadin-gap-m: var(--vaadin-padding-m); --vaadin-gap-l: var(--vaadin-padding-l); --vaadin-gap-xl: var(--vaadin-padding-xl); + + --vaadin-field-baseline-input-height: calc( + 1lh + round(var(--vaadin-padding-s) / 1.4, 1px) * 2 + var(--vaadin-input-field-border-width, 1px) * 2 + ); } @media (pointer: coarse) { diff --git a/packages/button/src/styles/vaadin-button-base-styles.js b/packages/button/src/styles/vaadin-button-base-styles.js index b8b75d7dad5..5e2b9d8754d 100644 --- a/packages/button/src/styles/vaadin-button-base-styles.js +++ b/packages/button/src/styles/vaadin-button-base-styles.js @@ -19,7 +19,6 @@ export const buttonStyles = css` user-select: none; cursor: var(--vaadin-clickable-cursor); box-sizing: border-box; - vertical-align: middle; flex-shrink: 0; height: var(--vaadin-button-height, auto); margin: var(--vaadin-button-margin, 0); diff --git a/packages/checkbox-group/src/styles/vaadin-checkbox-group-base-styles.js b/packages/checkbox-group/src/styles/vaadin-checkbox-group-base-styles.js index 2403330518b..413655cc0ee 100644 --- a/packages/checkbox-group/src/styles/vaadin-checkbox-group-base-styles.js +++ b/packages/checkbox-group/src/styles/vaadin-checkbox-group-base-styles.js @@ -6,4 +6,4 @@ import { field } from '@vaadin/field-base/src/styles/field-base-styles.js'; import { group } from '@vaadin/field-base/src/styles/group-base-styles.js'; -export const checkboxGroupStyles = [field, group('checkbox')]; +export const checkboxGroupStyles = [field, group]; diff --git a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-error-message.png b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-error-message.png index af76a2dd036..a05643c8c01 100644 Binary files a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-error-message.png and b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-error-message.png differ diff --git a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-helper-above-field.png b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-helper-above-field.png index d0d4226f2ae..4042d7cbe67 100644 Binary files a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-helper-above-field.png and b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-helper-above-field.png differ diff --git a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-horizontal.png b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-horizontal.png index 93605d9b205..5ef903bcbfe 100644 Binary files a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-horizontal.png and b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-horizontal.png differ diff --git a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-error-message.png b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-error-message.png index 7183e0d8321..bc50de65302 100644 Binary files a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-error-message.png and b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-error-message.png differ diff --git a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-helper-above-field.png b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-helper-above-field.png index e96b05124e0..800873d3fbd 100644 Binary files a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-helper-above-field.png and b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-helper-above-field.png differ diff --git a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-horizontal.png b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-horizontal.png index 1a51993dfee..41c8342d7f3 100644 Binary files a/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-horizontal.png and b/packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-horizontal.png differ diff --git a/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-error-message.png b/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-error-message.png index 1d78638bfad..405b0179145 100644 Binary files a/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-error-message.png and b/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-error-message.png differ diff --git a/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-helper-text.png b/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-helper-text.png index 509f76c8bc0..08318cbecb4 100644 Binary files a/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-helper-text.png and b/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-helper-text.png differ diff --git a/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/rtl-error-message.png b/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/rtl-error-message.png index a197ab9caf5..c72482f0c7c 100644 Binary files a/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/rtl-error-message.png and b/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/rtl-error-message.png differ diff --git a/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/rtl-helper-text.png b/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/rtl-helper-text.png index bca8fd69180..65fc519b076 100644 Binary files a/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/rtl-helper-text.png and b/packages/checkbox/test/visual/base/screenshots/checkbox/baseline/rtl-helper-text.png differ diff --git a/packages/combo-box/test/visual/base/screenshots/combo-box/baseline/feature-error-message.png b/packages/combo-box/test/visual/base/screenshots/combo-box/baseline/feature-error-message.png index 94b6474f5de..e33fc6d323e 100644 Binary files a/packages/combo-box/test/visual/base/screenshots/combo-box/baseline/feature-error-message.png and b/packages/combo-box/test/visual/base/screenshots/combo-box/baseline/feature-error-message.png differ diff --git a/packages/combo-box/test/visual/base/screenshots/combo-box/baseline/feature-helper-above-field.png b/packages/combo-box/test/visual/base/screenshots/combo-box/baseline/feature-helper-above-field.png index 9ec290e410d..a993fc7983e 100644 Binary files a/packages/combo-box/test/visual/base/screenshots/combo-box/baseline/feature-helper-above-field.png and b/packages/combo-box/test/visual/base/screenshots/combo-box/baseline/feature-helper-above-field.png differ diff --git a/packages/custom-field/src/styles/vaadin-custom-field-base-styles.js b/packages/custom-field/src/styles/vaadin-custom-field-base-styles.js index 4dcf3f9df34..18207fdd8e4 100644 --- a/packages/custom-field/src/styles/vaadin-custom-field-base-styles.js +++ b/packages/custom-field/src/styles/vaadin-custom-field-base-styles.js @@ -3,18 +3,6 @@ * Copyright (c) 2019 - 2025 Vaadin Ltd. * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ -import { css } from 'lit'; -import { container } from '@vaadin/field-base/src/styles/container-base-styles.js'; import { field } from '@vaadin/field-base/src/styles/field-base-styles.js'; -const customField = css` - .vaadin-custom-field-container { - width: 100%; - } - - .inputs-wrapper { - flex: none; - } -`; - -export const customFieldStyles = [field, container, customField]; +export const customFieldStyles = [field]; diff --git a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/default.png b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/default.png index a53f6315cff..1e55135f755 100644 Binary files a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/default.png and b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/default.png differ diff --git a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/error-message.png b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/error-message.png index f399a6775a4..03d03f4e1f3 100644 Binary files a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/error-message.png and b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/error-message.png differ diff --git a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/helper-above-field.png b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/helper-above-field.png index 4e9349b2596..bcfd8621c9a 100644 Binary files a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/helper-above-field.png and b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/helper-above-field.png differ diff --git a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/helper-text.png b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/helper-text.png index 7492bc2ca0e..b7ea2c3efcf 100644 Binary files a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/helper-text.png and b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/helper-text.png differ diff --git a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/label.png b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/label.png index f49022586d5..ad51227b313 100644 Binary files a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/label.png and b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/label.png differ diff --git a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/required.png b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/required.png index 70bb28461ea..48da7f645fd 100644 Binary files a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/required.png and b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/required.png differ diff --git a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/value.png b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/value.png index 18d8769255c..491399494c2 100644 Binary files a/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/value.png and b/packages/custom-field/test/visual/base/screenshots/custom-field/baseline/value.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-error-message.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-error-message.png index e2382defe2b..f15750d9807 100644 Binary files a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-error-message.png and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-error-message.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-above-field.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-above-field.png index 6fbf1902e20..6d3db0cc3b8 100644 Binary files a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-above-field.png and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-above-field.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-error-message.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-error-message.png index ae76c7cf643..0b37e7247bd 100644 Binary files a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-error-message.png and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-error-message.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-above-field.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-above-field.png index 977ef0372f3..1f67a387489 100644 Binary files a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-above-field.png and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-above-field.png differ diff --git a/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/error-message.png b/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/error-message.png index 220c4a560b3..f01b0250a58 100644 Binary files a/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/error-message.png and b/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/error-message.png differ diff --git a/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/helper-above-field.png b/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/helper-above-field.png index c103a9bf1f4..b66b438b358 100644 Binary files a/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/helper-above-field.png and b/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/helper-above-field.png differ diff --git a/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/rtl-error-message.png b/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/rtl-error-message.png index 51bef2b0dbf..cb71d42d133 100644 Binary files a/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/rtl-error-message.png and b/packages/date-time-picker/test/visual/base/screenshots/date-time-picker/baseline/rtl-error-message.png differ diff --git a/packages/field-base/src/styles/checkable-base-styles.js b/packages/field-base/src/styles/checkable-base-styles.js index 83f2f124e79..6a1d9575b4e 100644 --- a/packages/field-base/src/styles/checkable-base-styles.js +++ b/packages/field-base/src/styles/checkable-base-styles.js @@ -10,8 +10,7 @@ import { css, unsafeCSS } from 'lit'; export const checkable = (part, propName = part) => css` :host { align-items: center; - display: inline-grid; - gap: var(--vaadin-${unsafeCSS(propName)}-gap, var(--vaadin-gap-xs) var(--vaadin-gap-s)); + column-gap: var(--vaadin-${unsafeCSS(propName)}-gap, var(--vaadin-gap-s)); grid-template-columns: auto 1fr; /* Using minmax(auto, max-content) works around a Safari 17 issue where placing a checkbox @@ -31,10 +30,6 @@ export const checkable = (part, propName = part) => css` column-gap: 0; } - .vaadin-${unsafeCSS(propName)}-container { - display: contents; - } - [part='${unsafeCSS(part)}'], ::slotted(input), [part='label'], @@ -58,17 +53,26 @@ export const checkable = (part, propName = part) => css` grid-column: 1; } + [part='label'], [part='helper-text'], [part='error-message'] { + margin-bottom: 0; grid-column: 2; + width: auto; + min-width: auto; + } + + [part='helper-text'], + [part='error-message'] { + margin-top: var(--_gap-s); } /* Baseline vertical alignment */ :host::before { - content: '\\2003'; - grid-column: 1; grid-row: 1; - width: 0; + margin: 0; + padding: 0; + border: 0; } /* visually hidden */ diff --git a/packages/field-base/src/styles/container-base-styles.d.ts b/packages/field-base/src/styles/container-base-styles.d.ts deleted file mode 100644 index 1641e274ace..00000000000 --- a/packages/field-base/src/styles/container-base-styles.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @license - * Copyright (c) 2021 - 2025 Vaadin Ltd. - * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ - */ -import type { CSSResult } from 'lit'; - -export const container: CSSResult; diff --git a/packages/field-base/src/styles/container-base-styles.js b/packages/field-base/src/styles/container-base-styles.js deleted file mode 100644 index fe2ca053fbf..00000000000 --- a/packages/field-base/src/styles/container-base-styles.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright (c) 2021 - 2025 Vaadin Ltd. - * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ - */ -import '@vaadin/component-base/src/styles/style-props.js'; -import { css } from 'lit'; - -export const container = css` - [class$='container'] { - display: flex; - flex-direction: column; - gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-xs)); - min-width: 100%; - max-width: 100%; - width: var(--vaadin-field-default-width, 12em); - } -`; diff --git a/packages/field-base/src/styles/field-base-styles.js b/packages/field-base/src/styles/field-base-styles.js index 5857b4cfbb3..1333ce160ca 100644 --- a/packages/field-base/src/styles/field-base-styles.js +++ b/packages/field-base/src/styles/field-base-styles.js @@ -8,21 +8,45 @@ import { css } from 'lit'; export const field = css` :host { - display: inline-flex; + --_helper-below-field: initial; + --_helper-above-field: ; + --_no-label: initial; + --_has-label: ; + --_no-helper: initial; + --_has-helper: ; + --_no-error: initial; + --_has-error: ; + --_gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-xs)); + --_gap-s: round(var(--_gap) / 3, 2px); + display: inline-grid; + grid-template: + 'label' auto var(--_helper-above-field, 'helper' auto) 'baseline' 0 'input' 1fr var( + --_helper-below-field, + 'helper' auto + ) + 'error' auto / 100%; outline: none; cursor: default; -webkit-tap-highlight-color: transparent; } - :host([hidden]) { - display: none !important; + :host([has-label]) { + --_has-label: initial; + --_no-label: ; } - /* The label, helper text and the error message should neither grow nor shrink. */ - [part='label'], - [part='helper-text'], - [part='error-message'] { - flex: none; + :host([has-helper]) { + --_has-helper: initial; + --_no-helper: ; + } + + :host([has-error-message]) { + --_has-error: initial; + --_no-error: ; + } + + :host([hidden]) { + display: none !important; } :host(:not([has-label])) [part='label'], @@ -31,14 +55,47 @@ export const field = css` display: none; } + /* Baseline alignment guide */ + :host::before { + content: '\\2003' / ''; + grid-column: 1; + grid-row: var(--_has-label, label / baseline) var(--_no-label, label / input); + align-self: var(--_has-label, end) var(--_no-label, start); + font-size: var(--vaadin-input-field-value-font-size, inherit); + line-height: var(--vaadin-input-field-value-line-height, inherit); + padding: var(--vaadin-input-field-padding, var(--vaadin-padding-container)); + border: var(--vaadin-input-field-border-width, 1px) solid transparent; + pointer-events: none; + margin-bottom: var(--_no-label, 0) + var( + --_has-label, + calc( + var( + --vaadin-field-baseline-input-height, + (1lh + var(--vaadin-padding-xs) * 2 + var(--vaadin-input-field-border-width, 1px) * 2) + ) * + -1 + ) + ); + } + + [class$='container'] { + display: contents; + } + + [part] { + grid-column: 1; + } + [part='label'] { font-size: var(--vaadin-input-field-label-font-size, inherit); line-height: var(--vaadin-input-field-label-line-height, inherit); font-weight: var(--vaadin-input-field-label-font-weight, 500); color: var(--vaadin-input-field-label-color, var(--vaadin-text-color)); - order: var(--vaadin-input-field-helper-order); word-break: break-word; position: relative; + grid-area: label; + margin-bottom: var(--_helper-below-field, var(--_gap)) var(--_helper-above-field, var(--_no-helper, var(--_gap))); } ::slotted(label) { @@ -74,8 +131,23 @@ export const field = css` display: none; } + [part='label'], + [part='helper-text'], + [part='error-message'] { + width: min-content; + min-width: 100%; + } + + [part='input-field'], + [part='group-field'], + [part='input-fields'] { + grid-area: input; + } + [part='input-field'] { - flex: auto; + width: var(--vaadin-field-default-width, 12em); + max-width: 100%; + min-width: 100%; } :host([readonly]) [part='input-field'] { @@ -91,7 +163,9 @@ export const field = css` line-height: var(--vaadin-input-field-helper-line-height, inherit); font-weight: var(--vaadin-input-field-helper-font-weight, 400); color: var(--vaadin-input-field-helper-color, var(--vaadin-text-color-secondary)); - order: var(--vaadin-input-field-helper-order); + grid-area: helper; + margin-top: var(--_helper-above-field, var(--_gap-s)) var(--_helper-below-field, var(--_gap)); + margin-bottom: var(--_helper-above-field, var(--_gap)); } [part='error-message'] { @@ -100,7 +174,10 @@ export const field = css` font-weight: var(--vaadin-input-field-error-font-weight, 400); color: var(--vaadin-input-field-error-color, var(--vaadin-text-color)); display: flex; - gap: var(--vaadin-gap-s); + gap: var(--vaadin-gap-xs); + grid-area: error; + margin-top: var(--_has-helper, var(--_helper-below-field, var(--_gap-s)) var(--_helper-above-field, var(--_gap))) + var(--_no-helper, var(--_gap)); } [part='error-message']::before { @@ -114,7 +191,8 @@ export const field = css` } :host([theme~='helper-above-field']) { - --vaadin-input-field-helper-order: -1; + --_helper-above-field: initial; + --_helper-below-field: ; } @media (forced-colors: active) { diff --git a/packages/field-base/src/styles/group-base-styles.d.ts b/packages/field-base/src/styles/group-base-styles.d.ts index 0219221efd8..3f0d91d4780 100644 --- a/packages/field-base/src/styles/group-base-styles.d.ts +++ b/packages/field-base/src/styles/group-base-styles.d.ts @@ -5,4 +5,4 @@ */ import type { CSSResult } from 'lit'; -export const group: (name?: string) => CSSResult; +export const group: CSSResult; diff --git a/packages/field-base/src/styles/group-base-styles.js b/packages/field-base/src/styles/group-base-styles.js index 058eeb6522c..4cea6c782b5 100644 --- a/packages/field-base/src/styles/group-base-styles.js +++ b/packages/field-base/src/styles/group-base-styles.js @@ -4,29 +4,30 @@ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ import '@vaadin/component-base/src/styles/style-props.js'; -import { css, unsafeCSS } from 'lit'; +import { css } from 'lit'; -export const group = (name = 'checkbox') => css` - :host { - width: fit-content; - gap: var(--vaadin-${unsafeCSS(name)}-group-gap, var(--vaadin-gap-xs)); +export const group = css` + [part='label'], + [part='helper-text'], + [part='error-message'] { + width: auto; + min-width: auto; } - .vaadin-group-field-container { - display: contents; - } - - :host, [part='group-field'] { display: flex; flex-direction: column; - } - - [part='group-field'] { gap: var(--vaadin-gap-xs) var(--vaadin-gap-xl); } :host([theme~='horizontal']) [part='group-field'] { flex-flow: row wrap; + align-items: center; + } + + :host([has-label][theme~='horizontal']) [part='group-field'] { + padding: var(--vaadin-padding-container); + padding-inline: 0; + border-block: var(--vaadin-input-field-border-width, 1px) solid transparent; } `; diff --git a/packages/field-base/src/styles/input-field-shared-styles.js b/packages/field-base/src/styles/input-field-shared-styles.js index d33b093edb2..88f5c850413 100644 --- a/packages/field-base/src/styles/input-field-shared-styles.js +++ b/packages/field-base/src/styles/input-field-shared-styles.js @@ -4,7 +4,6 @@ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ import { button } from './button-base-styles.js'; -import { container } from './container-base-styles.js'; import { field } from './field-base-styles.js'; -export const inputFieldShared = [field, container, button]; +export const inputFieldShared = [field, button]; diff --git a/packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-base-styles.js b/packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-base-styles.js index 35609f67ced..a333ad3eeb9 100644 --- a/packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-base-styles.js +++ b/packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-base-styles.js @@ -56,8 +56,8 @@ export const multiSelectComboBoxStyles = [ display: contents; } - :host([auto-expand-horizontally]) [class$='container'] { - width: auto; + :host([auto-expand-horizontally]) { + --vaadin-field-default-width: auto; } `, ]; diff --git a/packages/multi-select-combo-box/test/visual/base/screenshots/multi-select-combo-box/baseline/error-message.png b/packages/multi-select-combo-box/test/visual/base/screenshots/multi-select-combo-box/baseline/error-message.png index a6eab597893..b01ec06e02a 100644 Binary files a/packages/multi-select-combo-box/test/visual/base/screenshots/multi-select-combo-box/baseline/error-message.png and b/packages/multi-select-combo-box/test/visual/base/screenshots/multi-select-combo-box/baseline/error-message.png differ diff --git a/packages/number-field/test/visual/base/screenshots/number-field/baseline/ltr-error-message.png b/packages/number-field/test/visual/base/screenshots/number-field/baseline/ltr-error-message.png index 54877aced3d..3375aba45d2 100644 Binary files a/packages/number-field/test/visual/base/screenshots/number-field/baseline/ltr-error-message.png and b/packages/number-field/test/visual/base/screenshots/number-field/baseline/ltr-error-message.png differ diff --git a/packages/number-field/test/visual/base/screenshots/number-field/baseline/ltr-helper-above-field.png b/packages/number-field/test/visual/base/screenshots/number-field/baseline/ltr-helper-above-field.png index 4c876cf84b6..83b58132be4 100644 Binary files a/packages/number-field/test/visual/base/screenshots/number-field/baseline/ltr-helper-above-field.png and b/packages/number-field/test/visual/base/screenshots/number-field/baseline/ltr-helper-above-field.png differ diff --git a/packages/number-field/test/visual/base/screenshots/number-field/baseline/rtl-error-message.png b/packages/number-field/test/visual/base/screenshots/number-field/baseline/rtl-error-message.png index 54e58d46921..37244450566 100644 Binary files a/packages/number-field/test/visual/base/screenshots/number-field/baseline/rtl-error-message.png and b/packages/number-field/test/visual/base/screenshots/number-field/baseline/rtl-error-message.png differ diff --git a/packages/number-field/test/visual/base/screenshots/number-field/baseline/rtl-helper-above-field.png b/packages/number-field/test/visual/base/screenshots/number-field/baseline/rtl-helper-above-field.png index 56aef55fc88..4c640af65b4 100644 Binary files a/packages/number-field/test/visual/base/screenshots/number-field/baseline/rtl-helper-above-field.png and b/packages/number-field/test/visual/base/screenshots/number-field/baseline/rtl-helper-above-field.png differ diff --git a/packages/radio-group/src/styles/vaadin-radio-group-base-styles.js b/packages/radio-group/src/styles/vaadin-radio-group-base-styles.js index e444ed37d64..271ba75bea5 100644 --- a/packages/radio-group/src/styles/vaadin-radio-group-base-styles.js +++ b/packages/radio-group/src/styles/vaadin-radio-group-base-styles.js @@ -9,7 +9,7 @@ import { group } from '@vaadin/field-base/src/styles/group-base-styles.js'; export const radioGroupStyles = [ field, - group('radio'), + group, css` :host([readonly]) ::slotted(vaadin-radio-button) { --vaadin-radio-button-background: transparent; diff --git a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-error-message.png b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-error-message.png index 5117c56fca1..62388bf0c47 100644 Binary files a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-error-message.png and b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-error-message.png differ diff --git a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-helper-above-field.png b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-helper-above-field.png index 12b40f3749b..718748f66a4 100644 Binary files a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-helper-above-field.png and b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-helper-above-field.png differ diff --git a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-horizontal.png b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-horizontal.png index 103e1b5fc23..9334b681299 100644 Binary files a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-horizontal.png and b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/ltr-horizontal.png differ diff --git a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-error-message.png b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-error-message.png index 739ee5e9507..b49119aa575 100644 Binary files a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-error-message.png and b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-error-message.png differ diff --git a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-helper-above-field.png b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-helper-above-field.png index b4bfc244dc1..263b6c0d3a5 100644 Binary files a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-helper-above-field.png and b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-helper-above-field.png differ diff --git a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-horizontal.png b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-horizontal.png index b4b767fac5b..5c5ed5f9435 100644 Binary files a/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-horizontal.png and b/packages/radio-group/test/visual/base/screenshots/radio-group/baseline/rtl-horizontal.png differ diff --git a/packages/select/test/visual/base/screenshots/select/baseline/feature-error-message.png b/packages/select/test/visual/base/screenshots/select/baseline/feature-error-message.png index a6eab597893..b01ec06e02a 100644 Binary files a/packages/select/test/visual/base/screenshots/select/baseline/feature-error-message.png and b/packages/select/test/visual/base/screenshots/select/baseline/feature-error-message.png differ diff --git a/packages/select/test/visual/base/screenshots/select/baseline/feature-helper-above-field.png b/packages/select/test/visual/base/screenshots/select/baseline/feature-helper-above-field.png index 9ec290e410d..a993fc7983e 100644 Binary files a/packages/select/test/visual/base/screenshots/select/baseline/feature-helper-above-field.png and b/packages/select/test/visual/base/screenshots/select/baseline/feature-helper-above-field.png differ diff --git a/packages/text-area/test/text-area.test.js b/packages/text-area/test/text-area.test.js index e494f3f3092..b90b65d8a36 100644 --- a/packages/text-area/test/text-area.test.js +++ b/packages/text-area/test/text-area.test.js @@ -59,12 +59,11 @@ describe('text-area', () => { }); describe('multi-line', () => { - let native, container, inputField; + let native, inputField; beforeEach(() => { native = textArea.inputElement; inputField = textArea.shadowRoot.querySelector('[part=input-field]'); - container = textArea.shadowRoot.querySelector('.vaadin-text-area-container'); }); it('should grow height with unwrapped text', async () => { @@ -94,7 +93,6 @@ describe('text-area', () => { await nextUpdate(textArea); expect(parseFloat(window.getComputedStyle(textArea).height)).to.be.lte(100); - expect(parseFloat(window.getComputedStyle(container).height)).to.be.lte(100); expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.lte(100); }); @@ -102,7 +100,6 @@ describe('text-area', () => { textArea.style.minHeight = '125px'; expect(window.getComputedStyle(textArea).height).to.be.equal('125px'); - expect(window.getComputedStyle(container).height).to.be.equal('125px'); expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.above(100); // Check that value modification doesn't break min-height rule @@ -110,7 +107,6 @@ describe('text-area', () => { await nextUpdate(textArea); expect(window.getComputedStyle(textArea).height).to.be.equal('125px'); - expect(window.getComputedStyle(container).height).to.be.equal('125px'); expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.above(100); }); @@ -119,7 +115,6 @@ describe('text-area', () => { textArea.style.maxHeight = '175px'; expect(window.getComputedStyle(textArea).height).to.be.equal('100px'); - expect(window.getComputedStyle(container).height).to.be.equal('100px'); // Check that value modification doesn't break min-height rule textArea.value = ` @@ -138,7 +133,6 @@ describe('text-area', () => { await nextUpdate(textArea); expect(window.getComputedStyle(textArea).height).to.be.equal('175px'); - expect(window.getComputedStyle(container).height).to.be.equal('175px'); expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.above(150); }); diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/ltr-error-message.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/ltr-error-message.png index ff0a59aae5a..1110a7a7a03 100644 Binary files a/packages/text-area/test/visual/base/screenshots/text-area/baseline/ltr-error-message.png and b/packages/text-area/test/visual/base/screenshots/text-area/baseline/ltr-error-message.png differ diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/ltr-helper-above-field.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/ltr-helper-above-field.png index 45240620234..ffd735e806e 100644 Binary files a/packages/text-area/test/visual/base/screenshots/text-area/baseline/ltr-helper-above-field.png and b/packages/text-area/test/visual/base/screenshots/text-area/baseline/ltr-helper-above-field.png differ diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/rtl-error-message.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/rtl-error-message.png index a83c55117e6..503409d1941 100644 Binary files a/packages/text-area/test/visual/base/screenshots/text-area/baseline/rtl-error-message.png and b/packages/text-area/test/visual/base/screenshots/text-area/baseline/rtl-error-message.png differ diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/rtl-helper-above-field.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/rtl-helper-above-field.png index 8254461a7a9..d6d233982bd 100644 Binary files a/packages/text-area/test/visual/base/screenshots/text-area/baseline/rtl-helper-above-field.png and b/packages/text-area/test/visual/base/screenshots/text-area/baseline/rtl-helper-above-field.png differ diff --git a/packages/text-field/test/visual/base/screenshots/text-field/baseline/ltr-error-message.png b/packages/text-field/test/visual/base/screenshots/text-field/baseline/ltr-error-message.png index 0fd09325428..fe0ebcdfa45 100644 Binary files a/packages/text-field/test/visual/base/screenshots/text-field/baseline/ltr-error-message.png and b/packages/text-field/test/visual/base/screenshots/text-field/baseline/ltr-error-message.png differ diff --git a/packages/text-field/test/visual/base/screenshots/text-field/baseline/ltr-helper-above-field.png b/packages/text-field/test/visual/base/screenshots/text-field/baseline/ltr-helper-above-field.png index 4c876cf84b6..83b58132be4 100644 Binary files a/packages/text-field/test/visual/base/screenshots/text-field/baseline/ltr-helper-above-field.png and b/packages/text-field/test/visual/base/screenshots/text-field/baseline/ltr-helper-above-field.png differ diff --git a/packages/text-field/test/visual/base/screenshots/text-field/baseline/rtl-error-message.png b/packages/text-field/test/visual/base/screenshots/text-field/baseline/rtl-error-message.png index 54e58d46921..37244450566 100644 Binary files a/packages/text-field/test/visual/base/screenshots/text-field/baseline/rtl-error-message.png and b/packages/text-field/test/visual/base/screenshots/text-field/baseline/rtl-error-message.png differ diff --git a/packages/text-field/test/visual/base/screenshots/text-field/baseline/rtl-helper-above-field.png b/packages/text-field/test/visual/base/screenshots/text-field/baseline/rtl-helper-above-field.png index 56aef55fc88..4c640af65b4 100644 Binary files a/packages/text-field/test/visual/base/screenshots/text-field/baseline/rtl-helper-above-field.png and b/packages/text-field/test/visual/base/screenshots/text-field/baseline/rtl-helper-above-field.png differ diff --git a/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/ltr-error-message.png b/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/ltr-error-message.png index 2ec309aae79..a16ef73c821 100644 Binary files a/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/ltr-error-message.png and b/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/ltr-error-message.png differ diff --git a/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/ltr-helper-above-field.png b/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/ltr-helper-above-field.png index 1e8ac3a1006..c13ce4df684 100644 Binary files a/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/ltr-helper-above-field.png and b/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/ltr-helper-above-field.png differ diff --git a/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/rtl-error-message.png b/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/rtl-error-message.png index d468ed99db2..9021099e7d0 100644 Binary files a/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/rtl-error-message.png and b/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/rtl-error-message.png differ diff --git a/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/rtl-helper-above-field.png b/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/rtl-helper-above-field.png index 3bee636eaf4..520e0f64fea 100644 Binary files a/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/rtl-helper-above-field.png and b/packages/time-picker/test/visual/base/screenshots/time-picker/baseline/rtl-helper-above-field.png differ