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

[Input] suffixText & prefixText style issues when set via property #10959

Closed
2 of 6 tasks
driskull opened this issue Dec 3, 2024 · 2 comments
Closed
2 of 6 tasks

[Input] suffixText & prefixText style issues when set via property #10959

driskull opened this issue Dec 3, 2024 · 2 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 2 Small fix or update, may require updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone
Milestone
2024-12-17 - Dec ...

Comments

@driskull
Copy link
Member

driskull commented Dec 3, 2024 •
edited
Loading

Check existing issues

Actual Behavior

The input styles rely on the suffix-text attribute, however the property isn't reflected so the attribute will not be there if the property is used.

Expected Behavior

The styles work for both attributes and properties of suffixText, prefixText

Reproduction Sample

https://codepen.io/driskull/pen/YPKyrJL?editors=1010

Reproduction Steps

  1. open codepen
  2. notice the input set via property looks different than the one set via attributes

Reproduction Version

3.0.0-next.44

Relevant Info

The following style selector also looks to be incorrect:

:host([suffix-text]) input,
.element-wrapper:has(.clear-button) input,
:host([number-button-type="vertical"][type="number"]) input,
:host([suffix-text][number-button-type="horizontal"]) .suffix,
:host([suffix-text][number-button-type="vertical"][type="number"]) .suffix,
:host([number-button-type="vertical"][type="number"])
  .clear-button
  :host([number-button-type="horizontal"][type="number"])
  .clear-button {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

No response

Calcite package

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

Esri team

N/A
@driskull driskull added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Dec 3, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels Dec 3, 2024
@driskull driskull changed the title [Input] suffixText style issues [Input] suffixText/prefixText style issues Dec 3, 2024
@driskull driskull changed the title [Input] suffixText/prefixText style issues [Input] suffixText & prefixText style issues when set via property Dec 3, 2024
@driskull driskull mentioned this issue Dec 3, 2024
Open
@macandcheese macandcheese self-assigned this Dec 3, 2024
@macandcheese macandcheese added 1 - assigned Issues that are assigned to a sprint and a team member. estimate - 2 Small fix or update, may require updates to tests. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Dec 3, 2024
@macandcheese macandcheese 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 Dec 17, 2024
@macandcheese macandcheese mentioned this issue Dec 17, 2024
Merged
macandcheese added a commit that referenced this issue Dec 17, 2024
@macandcheese
fix(input): Avoid styling on non-reflected attributes (#11089)
cd6afeb 
**Related Issue:** #10959 #10958

## Summary
Adds classes to use for specific styling cases in Input. This only
adjusts `suffix-text` and `prefix-text`. There are other styles set on
attributes in the component, but those are reflected attributes. We
could still improve that in the future if needed - and / or, in the
newer `input-x` components.
@macandcheese macandcheese 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 Dec 17, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned macandcheese Dec 17, 2024
@geospatialem geospatialem 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 Dec 17, 2024
@geospatialem
Copy link
Member

Verified in 3.0.0-next.71

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. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 2 Small fix or update, may require updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone
Projects
None yet
Milestone
2024-12-17 - Dec Milestone
Development

No branches or pull requests
4 participants
@driskull @macandcheese @geospatialem @DitwanP