Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form field: styling fixes and tweaks #1958

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

Cosmatevs
Copy link
Contributor

  • if a form field is a container element that has its own variant, this variant no longer affects the form field style, e.g. breaking placement of labels inside empty text areas:
    misplaced textarea label
  • icons inside drop downs, drop down data grids, and date pickers behave more consistently for flat and filled variants:
    • if the field is empty, they're centered vertically towards the whole field,
    • otherwise, they are centered verticaly towards the value, effectively going down.
      Current setup:
      Current form field icons
      New setup:
      More consistent form field icons

I hope the new setup will make it easier to implement clear and other action buttons in other field components.

* FormField: handle positions of standardized field icons
* FormField: fix css selectors for variants to avoid capturing variants of containers
* FormField: fix css selectors
* DatePicker: tweak css selectors and values for icon-dependent padding
@yordanov
Copy link
Collaborator

Hi @Cosmatevs,

Thanks for fixing these glitches. Maybe it's me, but I cannot find any changes addressing the first bullet point "if a form field is a container element that has its own variant, this variant no longer affects the form field style"?

We'll need more time to review the rest. At first glance, some of the styles could be considered breaking changes and might require bumping the major version of the components.

@Cosmatevs
Copy link
Contributor Author

@yordanov The first issue was addressed by changing css selectors from e.g. .rz-variant-filled to .rz-form-field.rz-variant-filled.
On GitHub it looks like I've rewritten the whole formfield.scss file 😐 That's because I made the whitespace consistent with other scss files. It doesn't look so scary once you switch the hide whitespace setting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants