Apply text field style update

[zolhorvath]

Issue

This PR fixes #7. Link to the issue

Screenshot / UI changes

Increased font size globally to 16px/1.5 (this is the size that text fields are prepared to). Every brand color is included as variable.

Screenshots (zip)

Testing instructions

• Add https://github.com/zolhorvath/seven-refresh/ as drupal-profile (sevenrefresh)
• Remove core/themes/seven
• Make sure that this theme is installed to themes/custom/seven
• Symlink core/misc to themes/custom/misc
• Run yarn && yarn build:css in the theme's root
• Install a Drupal with profile sevenrefresh. This will enable additional field types such as telephone or date_range and enable styleguide drupal module as well

After that Drupal is installed, Styleguide will be the front page and you'll have the test form at /contact/testform.

[zolhorvath]

I'd say this is ready for the first review :)

[zolhorvath]

Sorry, this is still WIP (wrong class names)

[zolhorvath]

Form-item classes converted to BEM

[zolhorvath]

New screenshots from my localhost (Chrome, Firefox, Safari on OSX)

• [filename].png: previous commit (6341ba8f8)
• [filename]_1.png: current commit (d2d3a0aaf)

textInputTest.zip

[lauriii]

This affects other field types than text fields. If that's intentional, maybe we should rename this issue to include those in the scope?

[zolhorvath]

@lauriii

Short answer is yes.

Longer one:

Yes, this does affect other types as well. I'm unsure how to handle this, my initial idea was to handle the situations like this (I mean this autocomplete) by a modifier class.

But for first, let's clarify what we should mean on 'types'.

Type could mean

• a Drupal component (like autocomplete or even complex ones like datetime or datetime range or radios, checkboxes)
• the type attribute of an <input> element (like <input type="file">, <input type="color"> or <input type="week">)
• and in some situation it can mean the tagname as well: <input>, <textarea>, <select>, <button>, <datalist>...

Current situation is that the mentioned autocomplete also has text type attribute, and the additional magic is controlled by a Drupal script here — worths to mention that it should use a js- prefixed selector for the operation since the current approach is not frontend-agnostic. Besides this, I think that the most basic input type is text since every browser falls back to this if an HTML5 input isn't implemented (e.g. datetime-local, [see] https://robertnyman.com/html5/forms/input-types.html).

Check out this list-gits. I think that Text-related types, Date-related types, and the basics of Color, File and <textarea> could (and should) be covered by this issue:

• we don't have separate task for the password or email type and
• it makes no sense to have one IMHO.

May be a good idea to forget about the form-text, form-autocomplete or form-email classes and use as less drupalism as possible (targeting these as [type="text"] or [type="email"])?..

[zolhorvath]

Based on a discussion, we will introduce the basics of a standardized form element CSS class set here.

Base class will be form-element. Each input type (or input item name) will get modifiers like form-element--color, form-element--text or form-element--textarea.

[zolhorvath]

@lauriii Refactor happened. I still have to regenerate the screenshots (only the native-one's generation is automated).

Before-after in OSX Chrome:

[zolhorvath]

Unfortunately screenshots were uploaded to the issue and not here: https://github.com/drupalux/claro/issues/7#issuecomment-445866943

[lauriii]

Thank you @zolhorvath!