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.

Sign up for GitHub

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

Jump to bottom

Provide CSS variable for input placeholder color #8967

Closed
2 of 6 tasks
Tracked by #7180
ellenupp opened this issue Mar 19, 2024 · 6 comments
Closed
2 of 6 tasks
Tracked by #7180

Provide CSS variable for input placeholder color #8967

ellenupp opened this issue Mar 19, 2024 · 6 comments
Assignees
@DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. calcite-components Issues specific to the @esri/calcite-components package. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - low Issue is non core or affecting less that 10% of people using the library
Milestone
2025-02-06 - 3.0....

Comments

@ellenupp
Copy link

Check existing issues

Description

Because the input background color can be changed using --calcite-color-foreground-1, there should be a way to change the placeholder text color for general theming purposes as well as to maintain a sufficient contrast ratio. From https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#:~:text=including%20placeholder%20text, placeholder text is included in the minimum contrast Success Criterion (1.4.3). Against foreground-1 there are some failures in some browser default/mode combinations, for example:

Chrome, dark mode: #757575 against #2B2B2B = 3.07:1
Safari, light mode: #A9A9A9 (darkgray) against #FFFFFF = 2.35:1

(Note: To check the placeholder color in the user agent stylesheet, inspect an input when “Show user agent shadow DOM” is enabled in dev tools settings > preferences > elements (Chrome)).

Acceptance Criteria

It is possible to set the placeholder color in an input, for example
--calcite-color-input-placeholder: #6d6d88
or maybe with an existing variable like --calcite-color-text-3, which would be applied as the color in the ::placeholder pseudo-element.

Relevant Info

No response

Which Component

calcite-input, calcite-input-*

Example Use Case

No response

Priority impact

p2 - want for current milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Dashboards
@ellenupp ellenupp added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Mar 19, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. labels Mar 19, 2024
@macandcheese macandcheese added the design-tokens Issues requiring design tokens. label Mar 19, 2024
@macandcheese
Copy link
Contributor

Good news! This will be added as a part of the larger component-specific design token effort (#7180) - the PR that added this request can be found here: #8767

@ellenupp
Copy link
Author

That's great, thanks!

@geospatialem geospatialem mentioned this issue Aug 27, 2024
Open
@geospatialem geospatialem added p - low Issue is non core or affecting less that 10% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Aug 27, 2024
@macandcheese macandcheese added the 3 - installed Issues that have been merged to master branch and are ready for final confirmation. label Dec 13, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Dec 13, 2024
@macandcheese macandcheese added needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed 0 - new New issues that need assignment. labels Dec 13, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Dec 14, 2024

@alisonailea the placeholder text color token doesn't seem to be working while I'm testing locally. Are you seeing the same behavior?
image

@DitwanP DitwanP added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Dec 17, 2024
@DitwanP DitwanP assigned alisonailea and unassigned geospatialem and DitwanP Dec 17, 2024
@DitwanP DitwanP removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Dec 17, 2024
@geospatialem geospatialem removed this from the 2024-12-17 - Dec Milestone milestone Dec 17, 2024
@alisonailea alisonailea mentioned this issue Dec 18, 2024
Merged
@alisonailea alisonailea added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jan 6, 2025
alisonailea added a commit that referenced this issue Jan 6, 2025
@alisonailea
fix(input): correctly apply placeholder styles (#11107)
7fa1eea 
**Related Issue:** #8967 

## Summary

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

<img width="1436" alt="Screenshot 2024-12-18 at 3 21 01 PM"
src="https://github.com/user-attachments/assets/721214f6-48a4-486d-b98e-e8d30e8b6099"
/>


BEGIN_COMMIT_OVERRIDE
END_COMMIT_OVERRIDE
@alisonailea alisonailea added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Jan 6, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 6, 2025

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned alisonailea Jan 6, 2025
@geospatialem geospatialem removed their assignment Jan 6, 2025
@DitwanP
Copy link
Contributor

DitwanP commented Jan 10, 2025

🍡 Verified locally on dev
image

@DitwanP DitwanP closed this as completed Jan 10, 2025
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Jan 10, 2025
benelan pushed a commit that referenced this issue Feb 8, 2025
@alisonailea @benelan
fix(input): correctly apply placeholder styles (#11107)
fb38f87 
**Related Issue:** #8967 

## Summary

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

<img width="1436" alt="Screenshot 2024-12-18 at 3 21 01 PM"
src="https://github.com/user-attachments/assets/721214f6-48a4-486d-b98e-e8d30e8b6099"
/>


BEGIN_COMMIT_OVERRIDE
END_COMMIT_OVERRIDE
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. calcite-components Issues specific to the @esri/calcite-components package. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - low Issue is non core or affecting less that 10% of people using the library
Projects
None yet
Milestone
2025-02-06 - 3.0.0 Feb Breaking Chang...
Development

No branches or pull requests
5 participants
@alisonailea @macandcheese @geospatialem @ellenupp @DitwanP