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

feat: Add specific component tags for avatar, text-area and button for better theming support #50

Merged
merged 12 commits into from
Mar 9, 2021

Conversation

Peppe
Copy link
Contributor

@Peppe Peppe commented Mar 8, 2021

Resolves #28

Jens Jansson added 7 commits March 8, 2021 13:03
Own tag for avatar when used via vaadin-message, so that it can be themed.
Own tag for avatar when used via vaadin-message-input, so that it can be themed.
Own tag for button when used via vaadin-message-input, so that it can be themed.
A zero value should not have a unit.
Copy link
Member

@web-padawan web-padawan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Visual tests are failing, please check if some CSS is not correctly applied.

src/vaadin-message-input-text-area.js Show resolved Hide resolved
@Peppe
Copy link
Contributor Author

Peppe commented Mar 8, 2021

I have a problem.
Linting started complaining about vaadin-message-avatar.js:13:

--vaadin-avatar-outline-width: 0px;

It is a zero value and zero values should not have a unit. I changed the row to

--vaadin-avatar-outline-width: 0;

but that actually broke the implementation. Margin-right of the avatar was not anymore there. This is because it is used in a calc in vaadin-message-avatar-styles.js:8:

:host {
  margin-right: calc(var(--lumo-space-m) - var(--vaadin-avatar-outline-width));
  margin-top: calc(var(--lumo-space-s) - var(--vaadin-avatar-outline-width));
}

that evaluates with resolved variables to margin-right: calc(1rem - 0);, and I guess you have to have units on everything that goes into a calc.

So now I'm unsure how to have to satisfy the linter correctly.

@web-padawan
Copy link
Member

Tested in iOS Simulator locally and the tests are passing. Probably it was SauceLabs issue.

@web-padawan web-padawan merged commit 68ffc34 into master Mar 9, 2021
@web-padawan web-padawan deleted the own-tags branch March 9, 2021 09:06
web-padawan pushed a commit to vaadin/web-components that referenced this pull request Mar 12, 2021
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.

Define specific tag names for avatar, text area and button
2 participants