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

Update form components to leverage ElementInternals API #8126

Open
1 of 20 tasks
jcfranco opened this issue Nov 4, 2023 · 2 comments
Open
1 of 20 tasks

Update form components to leverage ElementInternals API #8126

jcfranco opened this issue Nov 4, 2023 · 2 comments
Assignees
@jcfranco @benelan
Labels
1 - assigned Issues that are assigned to a sprint and a team member. blocked This issue is blocked by another issue. calcite-components Issues specific to the @esri/calcite-components package. p - medium Issue is non core or affecting less that 60% of people using the library refactor Issues tied to code that needs to be significantly reworked. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment.
Milestone
2025-02-25 - Feb ...

Comments

@jcfranco
Copy link
Member

jcfranco commented Nov 4, 2023 •
edited by geospatialem
Loading

Description

Lit is looking to add support for ElementInternals, so we should explore leveraging this API instead of our custom solution.

cc @eriklharper @benelan

Blocked issues: #9319, #4681, #5026, #8626, #7731

Proposed Advantages

Improved form integration and leaner components.

Which Component

All components implementing FormComponent:

  • checkbox
  • combobox
  • input-date-picker
  • input-number
  • input-text
  • input-time-picker
  • input-time-zone
  • input
  • meter
  • radio-button
  • rating
  • segmented-control
  • select
  • slider
  • switch
  • text-area

Relevant Info

Safari added support for ElementInternals at 16.4, so we may have to consider the following if we update form components to use this API:

  1. waiting until Safari 18 to ensure last 2 base versions support this API
  2. consider a polyfill to handle Safari 16.0 – 16.3 (requires a lot testing)
  3. moving forward and document form integration won't work for 16.0 – 16.3 (nonstarter option as it introduces a regression for this version)

Calcite package

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

Related issues
@jcfranco jcfranco added refactor Issues tied to code that needs to be significantly reworked. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Nov 4, 2023
@github-actions github-actions bot added the calcite-components Issues specific to the @esri/calcite-components package. label Nov 4, 2023
@jcfranco jcfranco mentioned this issue Nov 14, 2023
Closed
@geospatialem geospatialem added 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 Dec 12, 2023
@geospatialem geospatialem added this to the 2024 March Priorities milestone Dec 12, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Dec 12, 2023
@geospatialem geospatialem mentioned this issue Dec 12, 2023
Open
This was referenced Jan 26, 2024
Closed
Merged
jcfranco added a commit that referenced this issue Feb 10, 2024
@jcfranco
fix(input, input-number, input-text, text-area): ensure all applicabl…
6de8534 
…e props are considered in form validation (#8655)

**Related Issue:** #8647 

## Summary

This ensures `pattern`, `minlength`, `maxlength`, `min`, `max`, `step`
are set on the internal form input based on the matching type.

**Note**: `minlength` and `maxlength` won't trigger constraint
validation unless a user interacts with the input (see [`minlength`
spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute:~:text=Constraint%20validation%3A%20If%20an%20element%20has%20a%20minimum,element%20is%20suffering%20from%20being%20too%20short.)
and [`maxlength`
spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute:~:text=Constraint%20validation%3A%20If%20an%20element%20has%20a%20maximum,element%20is%20suffering%20from%20being%20too%20long.)).
This will have to be a known limitation until #8126 is completed.
Elijbet pushed a commit that referenced this issue Feb 15, 2024
@jcfranco @Elijbet
fix(input, input-number, input-text, text-area): ensure all applicabl…
f0f59a2 
…e props are considered in form validation (#8655)

**Related Issue:** #8647 

## Summary

This ensures `pattern`, `minlength`, `maxlength`, `min`, `max`, `step`
are set on the internal form input based on the matching type.

**Note**: `minlength` and `maxlength` won't trigger constraint
validation unless a user interacts with the input (see [`minlength`
spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute:~:text=Constraint%20validation%3A%20If%20an%20element%20has%20a%20minimum,element%20is%20suffering%20from%20being%20too%20short.)
and [`maxlength`
spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute:~:text=Constraint%20validation%3A%20If%20an%20element%20has%20a%20maximum,element%20is%20suffering%20from%20being%20too%20long.)).
This will have to be a known limitation until #8126 is completed.
@eriklharper eriklharper mentioned this issue Mar 5, 2024
Open
@geospatialem geospatialem added the p - low Issue is non core or affecting less that 10% of people using the library label Mar 25, 2024
@geospatialem geospatialem mentioned this issue Apr 22, 2024
Open
@benelan benelan mentioned this issue Apr 30, 2024
Closed
6 tasks
@geospatialem geospatialem mentioned this issue May 28, 2024
Open
6 tasks
@geospatialem geospatialem mentioned this issue Jun 4, 2024
Open
6 tasks
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library and removed p - low Issue is non core or affecting less that 10% of people using the library labels Jun 4, 2024
@geospatialem geospatialem mentioned this issue Jun 25, 2024
Open
3 tasks
@geospatialem
Copy link
Member

With the transition to Lit from Stencil, Calcite is ensuring stability before proceeding with ElementInternals support, targeting the above in the next upcoming milestone (December 2024).

@jcfranco jcfranco mentioned this issue Dec 2, 2024
Open
@jcfranco
Copy link
Member Author

jcfranco commented Dec 3, 2024

This is blocked by lit/rfcs#45.

This was referenced Dec 12, 2024
Open
Open
Open
@geospatialem geospatialem added the blocked This issue is blocked by another issue. label Dec 16, 2024
@Elijbet Elijbet mentioned this issue Dec 23, 2024
Open
6 tasks
@benelan benelan mentioned this issue Jan 6, 2025
Closed
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jcfranco jcfranco

@benelan benelan

Labels
1 - assigned Issues that are assigned to a sprint and a team member. blocked This issue is blocked by another issue. calcite-components Issues specific to the @esri/calcite-components package. p - medium Issue is non core or affecting less that 60% of people using the library refactor Issues tied to code that needs to be significantly reworked. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment.
Projects
None yet
Milestone
2025-02-25 - Feb Milestone
Development

No branches or pull requests
3 participants
@jcfranco @geospatialem @benelan