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

calcite-text-area font-size property (not scale) #7606

Closed
Tracked by #7180
tom12993 opened this issue Aug 25, 2023 · 3 comments
Closed
Tracked by #7180

calcite-text-area font-size property (not scale) #7606

tom12993 opened this issue Aug 25, 2023 · 3 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Monitor Issues logged by ArcGIS Monitor team members. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 2 Small fix or update, may require 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
2024-09-30 - 2.13...

Comments

@tom12993
Copy link

tom12993 commented Aug 25, 2023 •
edited
Loading

Description

I need to change the font size of the text-area input without changing the scale of the entire component.
Reason: I like the scale of the component set to "s" for the footer, but that makes the input text's font-size too small. I'd like to control those two separately.

Acceptance Criteria

Styles variable like --calcite-text-area-font-size or something similar.

Which Component

calcite-text-area

Example Use Case

image
I'd like to avoid doing this:

document.querySelector('calcite-text-area').shadowRoot.innerHTML += 
    `<style>textarea {font-size: 14px !important;}</style>`

Priority impact

p3 - want for upcoming milestone

Esri team

ArcGIS Monitor
@tom12993 tom12993 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 Aug 25, 2023
@github-actions github-actions bot added ArcGIS Monitor Issues logged by ArcGIS Monitor team members. p3 - want for upcoming milestone labels Aug 25, 2023
@geospatialem geospatialem added impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone and removed p3 - want for upcoming milestone labels May 21, 2024
@geospatialem geospatialem added needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. and removed needs triage Planning workflow - pending design/dev review. labels Jun 25, 2024
@geospatialem
Copy link
Member

geospatialem commented Jun 25, 2024 •
edited
Loading

Spike to determine the feasibility and consistency across the design system, in terms of the scaling of the component's text as part of the effort in #7180.

@geospatialem geospatialem added design-tokens Issues requiring design tokens. and removed spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. labels Sep 10, 2024
@Elijbet Elijbet mentioned this issue Sep 11, 2024
Open
@benelan benelan mentioned this issue Sep 18, 2024
Merged
@geospatialem geospatialem added p - low Issue is non core or affecting less that 10% of people using the library 2 - in development Issues that are actively being worked on. estimate - 2 Small fix or update, may require updates to tests. and removed 0 - new New issues that need assignment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Sep 19, 2024
benelan added a commit that referenced this issue Sep 23, 2024
@benelan
feat(text-area): add component tokens (#10343)
d2504b7 
**Related Issue:** #7180, #7606, #9040

## Summary

Add the following component-scoped CSS Variables to `calcite-text-area`:

`--calcite-text-area-background-color`: Specifies the background color
of the component.
`--calcite-text-area-border-color`: Specifies the border color of the
text area.
`--calcite-text-area-character-limit-text-color`: Specifies the color of
the character limit text displayed in footer of the component.
`--calcite-text-area-divider-color`: Specifies the color of the divider
between the text area and footer.
`--calcite-text-area-font-size`: Specifies the font size of the thext
area and footer.
`--calcite-text-area-max-height`: Specifies the the maximum height of
the text area in the component.
`--calcite-text-area-min-height`: Specifies the minimum height of the
text area in the component.
`--calcite-text-area-text-color`: Specifies the color of text in the
component.
`--calcite-text-area-footer-border-color`: Specifies the border color of
the footer.
@benelan benelan added the 3 - installed Issues that have been merged to master branch and are ready for final confirmation. label Sep 23, 2024
@github-actions github-actions bot removed the 2 - in development Issues that are actively being worked on. label Sep 23, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned benelan Sep 23, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem removed the 3 - installed Issues that have been merged to master branch and are ready for final confirmation. label Sep 23, 2024
@geospatialem geospatialem added the 4 - verified Issues that have been released and confirmed resolved. label Sep 23, 2024
@geospatialem
Copy link
Member

Verified with the Chromatic build on 9/23 and the following:

CSS:

#feedback-notes {
  --calcite-text-area-font-size: 30px;
}

HTML:

<calcite-text-area id="feedback-notes"></calcite-text-area>

image

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

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Monitor Issues logged by ArcGIS Monitor team members. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 2 Small fix or update, may require 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
2024-09-30 - 2.13.0 Sep Main release
Development

No branches or pull requests
4 participants
@geospatialem @benelan @DitwanP @tom12993