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

fix(input): correctly apply placeholder styles #11107

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from

Conversation

alisonailea
Copy link
Contributor

@alisonailea alisonailea commented Dec 18, 2024

Related Issue: #8967

Summary

Breaks the placeholder styles into separate lines to avoid a browser specific selector erroring out the whole line.

Screenshot 2024-12-18 at 3 21 01 PM

BEGIN_COMMIT_OVERRIDE
END_COMMIT_OVERRIDE

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Dec 18, 2024
@alisonailea alisonailea removed the request for review from DitwanP December 18, 2024 23:23
Copy link
Contributor

@macandcheese macandcheese left a comment

Choose a reason for hiding this comment

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

&:placeholder-shown {
@apply text-ellipsis;
}
}

// Placeholder styles
// Do not combine these style rules. The browser interprets the rule as one. Properties like -webkit can not be found in Firefox, thus the whole line is rendered as an error.
Copy link
Member

Choose a reason for hiding this comment

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

Nitpick: for clarity, maybe use one of the placeholder vendor prefixes instead of -webkit?

&:placeholder-shown {
@apply text-ellipsis;
}
}

// Placeholder styles
// Do not combine these style rules. The browser interprets the rule as one. Properties like -webkit can not be found in Firefox, thus the whole line is rendered as an error.
Copy link
Member

Choose a reason for hiding this comment

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

thus the whole line is rendered as an error.

Suggestion: thus the whole selector is invalidated and is ignored.

// Do not combine these style rules. The browser interprets the rule as one. Properties like -webkit can not be found in Firefox, thus the whole line is rendered as an error.
:-ms-input-placeholder {
@apply font-normal;
color: var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3));
Copy link
Member

Choose a reason for hiding this comment

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

Can we use a mixin or placeholder to DRY these styles a bit? This can be done in a follow-up.

@jcfranco jcfranco added the no changelog entry Use the commit override to avoid a changelog entry label Dec 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. no changelog entry Use the commit override to avoid a changelog entry
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants