feat: introduce style properties for disabled input #7553

FrediWa · 2024-07-16T06:44:26Z

Description

Adds variables for setting disabled background and text color. The text color applies to labels as well, as well as labels for radiobuttons and checkboxes.
Adds --vaadin-radio-button-disabled-background
Adds --vaadin-checkbox-disabled-background

Fixes #7482

Type of change

Feature

rolfsmeds

Summary:

Let's only use the disabled-value-color for actual field values, not other disabled texts.
Let's introduce separate disabled background colors for CB and RB, similarly to the normal background colors.

rolfsmeds · 2024-07-17T06:55:47Z

packages/checkbox/theme/lumo/vaadin-checkbox-styles.js

    }

    :host([disabled]) [part='checkbox']::after {
-      color: var(--lumo-contrast-30pct);
+      color: var(--_disabled-value-color);


This is a bit of a breaking change: if someone is currently relying on the checkmark using --lumo--contrast-30pct, and overriding that property to a custom value, this change will break that.

So I'm a bit torn: on one hand it seems logical for the disabled checkmark to use the disable value color, but OTOH breaking change. Also, one might argue that the checkmark should not use disable value color since that is generally used for disabled text, whereas the checkmark is a selection indicator rather than a value per se (similar to the selection underline of a Tab for example).

rolfsmeds · 2024-07-17T07:59:48Z

packages/checkbox/theme/lumo/vaadin-checkbox-styles.js

@@ -27,6 +27,8 @@ registerStyles(
      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
      --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
      --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
+      --_disabled-background: var(--vaadin-input-field-disabled-background, var(--lumo-contrast-10pct));


I hadn't realized checkbox and radiobutton uses a different disabled color compared to other fields, but here we are. This is not otherwise a problem, but if we want to add the disabled color properties to the opt-in global defaults (which we probably do want to do), it becomes a problem as CB+RB need a different value than other fields.

We might need to do a similar thing with CB and RB as we did for the normal background color, i.e. instead of using the general --vaadin-input-field-background, we introduced a separate --vaadin-checkbox-background, so that would mean a --vaadin-checkbox-disabled-background and --vaadin-radio-button-disabled-background.

Should I then just leave CB/RB out or should I introduce these specific variables and include them in this PR?

I suppose it wouldn't hurt to introduce them in the same PR.

rolfsmeds · 2024-07-17T08:13:19Z

packages/details/theme/lumo/vaadin-details-summary-styles.js

  }

  :host([disabled]),
  :host([disabled]) [part='toggle'] {
-    color: var(--lumo-disabled-text-color);
+    color: var(--_disabled-value-color);
    cursor: default;


Details summary is not really a value, so I don't think the disabled value color property makes sense here.

rolfsmeds · 2024-07-17T08:14:17Z

packages/item/theme/lumo/vaadin-item-styles.js

@@ -62,7 +63,7 @@ const item = css`

  /* Disabled */
  :host([disabled]) {
-    color: var(--lumo-disabled-text-color);
+    color: var(--_disabled-value-color);
    cursor: default;


As with Details summary, this is not a field value, so let's not use the new prop here.

rolfsmeds · 2024-07-17T08:16:22Z

packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js

@@ -31,7 +32,7 @@ export const sideNavItemStyles = css`
  }

  :host([disabled]) [part='link'] {
-    color: var(--lumo-disabled-text-color);
+    color: var(--_disabled-value-color);
  }


Also not an input value, so let's not use it here.

rolfsmeds · 2024-07-17T08:16:39Z

packages/tabs/theme/lumo/vaadin-tab-styles.js

@@ -200,7 +201,7 @@ registerStyles(
    :host([disabled]) {
      pointer-events: none;
      opacity: 1;
-      color: var(--lumo-disabled-text-color);
+      color: var(--_disabled-value-color);
    }


Also not an input field value, so let's not use it here.

rolfsmeds · 2024-07-17T08:16:55Z

packages/upload/theme/lumo/vaadin-upload-styles.js

@@ -47,7 +48,7 @@ registerStyles(
    }

    :host([max-files-reached]) [part='drop-label'] {
-      color: var(--lumo-disabled-text-color);
+      color: var(--_disabled-value-color);
    }


Also not an input field value, so let's not use it here.

rolfsmeds · 2024-07-17T08:17:10Z

packages/vaadin-lumo-styles/mixins/helper.js

-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    color: var(red);
+    -webkit-text-fill-color: var(--_disabled-value-color);
  }


Helper is not a value, so let's not use it here.

web-padawan

Let's also copy the new properties to this file so that we have defaults for them in globals export below these lines:

web-components/packages/vaadin-lumo-styles/style.js

Lines 99 to 100 in 31b0524

    
               --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct); 
        
               --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);

--vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
--vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);

sonarqubecloud · 2024-07-30T05:34:05Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

vaadin-bot · 2024-08-06T07:38:10Z

This ticket/PR has been released with Vaadin 24.5.0.alpha7 and is also targeting the upcoming stable 24.5.0 version.

FrediWa changed the title ~~feat: introduce color variables for disabled input~~ feat: introduce style properties for disabled input Jul 16, 2024

FrediWa requested review from rolfsmeds and vursen July 16, 2024 08:40

rolfsmeds requested changes Jul 17, 2024

View reviewed changes

FrediWa requested a review from rolfsmeds July 22, 2024 05:38

FrediWa marked this pull request as draft July 24, 2024 10:54

git experiment

5910fab

FrediWa force-pushed the feat/disabled-variable branch from 7cb2aa7 to 5910fab Compare July 24, 2024 11:03

FrediWa added 2 commits July 25, 2024 10:23

Remove style from labels, radiobuttons, checkboxes and MSCB chips

3f814ae

revert mistakes

717c074

FrediWa marked this pull request as ready for review July 25, 2024 07:54

FrediWa requested review from web-padawan and rolfsmeds and removed request for rolfsmeds and vursen July 25, 2024 08:17

rolfsmeds approved these changes Jul 29, 2024

View reviewed changes

web-padawan reviewed Jul 29, 2024

View reviewed changes

add global defaults

705cec3

web-padawan approved these changes Jul 30, 2024

View reviewed changes

FrediWa merged commit dc322e1 into main Jul 30, 2024
9 checks passed

FrediWa deleted the feat/disabled-variable branch July 30, 2024 07:19

web-padawan mentioned this pull request Jul 30, 2024

fix: use proper selector for input container disabled color #7596

Merged

This was referenced Aug 2, 2024

feat: add radio-button and checkbox disabled style properties #7615

Merged

docs: document disabled properties vaadin/docs#3579

Merged

vaadin-bot added prerelease version for Vaadin 24.5.0 Released with Vaadin 24.5.0.alpha7 labels Aug 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: introduce style properties for disabled input #7553

feat: introduce style properties for disabled input #7553

FrediWa commented Jul 16, 2024 •

edited

Loading

rolfsmeds left a comment

rolfsmeds Jul 17, 2024

rolfsmeds Jul 17, 2024

FrediWa Jul 17, 2024

rolfsmeds Jul 17, 2024

rolfsmeds Jul 17, 2024

rolfsmeds Jul 17, 2024

rolfsmeds Jul 17, 2024

rolfsmeds Jul 17, 2024

rolfsmeds Jul 17, 2024

rolfsmeds Jul 17, 2024

web-padawan left a comment

sonarqubecloud bot commented Jul 30, 2024

vaadin-bot commented Aug 6, 2024

	--vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
	--vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);

feat: introduce style properties for disabled input #7553

feat: introduce style properties for disabled input #7553

Conversation

FrediWa commented Jul 16, 2024 • edited Loading

Description

Type of change

rolfsmeds left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

web-padawan left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Jul 30, 2024

Quality Gate passed

vaadin-bot commented Aug 6, 2024

FrediWa commented Jul 16, 2024 •

edited

Loading