[MGNLUI-4643] Improve shared styles between text-inputs and derivatives Created: 18/Sep/18  Updated: 14/Dec/18  Resolved: 21/Nov/18

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.0

Type: Improvement Priority: Neutral
Reporter: Mikaël Geljić Assignee: Mikaël Geljić
Resolution: Fixed Votes: 0
Labels: theme
Remaining Estimate: 0d
Time Spent: 0.5d
Original Estimate: Not Specified

Attachments: PNG File MGNLUI-4643-combobox.png    
Issue Links:
dependency
is depended upon by MGNLUI-4722 Resurface states: select field dropdo... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Resurface theme
Sprint: Saigon 154, Saigon 155, Saigon 156, Saigon 157, Saigon 158
Story Points: 2

 Description   

—such as combo-box.

We started using a mixin to include input styles arbitrarily into various Vaadin component's Sass mixins; still the border styles and font-styles are applied to the same DOM element, whereas in the select case part of goes to a parent div of the input element.

This should be fairly easy to parameterize the mixin and remove some style duplication while ensuring better consistency with interaction changes (hover/focus/validation-errors).

Acceptance criteria:

  • Hover/focus states are not active for readonly fields (e.g. in Message details app)
  • Invalid ComboBox looks consistent (grey background, border)


 Comments   
Comment by Mikaël Geljić [ 26/Oct/18 ]


Attached is the erratic current status this ticket aims at fixing. Nevermind the overstated border & radius features, as well as the caribbean green validation.

  • That green shows that the selects do not inherit the red from our color palette at the moment.
  • Neither do they keep grey background when invalid (Vaadin defaults to this pinkish)
  • Mind the width offset compared to text-fields when not focused (borderless)
Comment by Dai Ha [ 22/Nov/18 ]

Verified with magnolia-enterprise-pro-demo-bundle-6.0-20181122.092656-693-tomcat-bundle.zip.

Generated at Mon Feb 12 09:18:39 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.