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

feat(checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select): add required property #8517

Merged
merged 15 commits into from
Jan 9, 2024

Conversation

benelan
Copy link
Member

@benelan benelan commented Dec 28, 2023

Related Issue: #8057

Summary

Remove the @internal tag from the required property on form components.

@benelan benelan requested a review from a team as a code owner December 28, 2023 20:51
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Dec 28, 2023
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

👍

@benelan benelan added the skip visual snapshots Pull requests that do not need visual regression testing. label Jan 2, 2024
benelan and others added 5 commits January 2, 2024 11:17
…ription refs (#8533)

**Related Issue:** #7071

## Summary
Updates doc consistency across a-named components defined in the above
issue for props, events, methods, and css vars, including:
- `action-bar`
- `action-group`
- `action-pad`
- `alert`

cc @DitwanP
…8484)

**Related Issue:** #8522

## Summary

- depends on #8483
- Renames `activated` property to `selected` to align with other
components
- Makes `selected` public
- Adds public event `calciteHandleChange` for when `selected` is changed
via user
- Renames internal event `calciteInternalHandleChange` to
`calciteInternalAssistiveTextChange` to better illustrate its purpose
- adds tests
…sue (#8518)

**Related Issue:** #7958

## Summary

Resolves an extremely hard to reproduce caching issue that occurs due to
Alert's timeouts. The fix is to cache Alert's number formatter per
component so it doesn't impact other components.
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

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

🎉

To provide more context in the changelog, can you revisit the PR title to include the enhanced components in the scope?

feat(a, b, c...): add required property

@benelan
Copy link
Member Author

benelan commented Jan 4, 2024

@aaronpi and @SkyeSeitz provided design feedback on #8057 and @SkyeSeitz asked:

Is the required prop applicable [to Segmented Control] since it should always have a selected item?

@jcfranco what do you think, should we keep required internal for Segmented Control? Slider and Rating may also be worth reevaluating, since I think both of them always have a value.

If we keep required internal, then they won't have any constraint validation properties and wouldn't need the internal input-message for validation.

@benelan benelan changed the title feat: add required property to form components that didn't have it feat(checkbox, combobox, input-date-picker, input-time-picker, input-time-zone, rating, segmented-control, select): add required property Jan 4, 2024
…-not-internal

* origin/main:
  docs(d, f, g, and h-named components): update api description refs (#8540)
  docs(b and c components): consistent api description refs (#8536)
  ci(update-doc): build design tokens to prevent errors (#8542)
  docs: update component readmes (#8543)
  ci: consistent formatting across packages (#8534)
  refactor(list-item): Remove unnecessary code for rendering open caret (#8537)
  docs(tab-nav, table, tabs, tile-select, tree, value-list): consistent api description refs (#8535)
  chore: release next
  feat(list-item): Add dragSelected property and calciteListItemDragHandleChange event (#8524)
  chore: release next
  fix(input-date-picker): hard to reproduce numbering-system caching issue (#8518)
  feat(handle): add selected property and calciteHandleChange event. (#8484)
  docs(action-bar, action-group, action-pad, alert): consistent api decription refs (#8533)
…-not-internal

* origin/main:
  refactor: remove @ts-ignore needed for Stencil missing  in JSX types (#8551)
  refactor(combobox): remove unused interface (#8552)
  fix(input-date-picker): ensure range icon toggles open corresponding date-picker (#8554)
  fix(button): avoid needlessly overwriting title (#8491)
@benelan benelan changed the title feat(checkbox, combobox, input-date-picker, input-time-picker, input-time-zone, rating, segmented-control, select): add required property feat(checkbox, combobox, input-date-picker, input-time-picker, input-time-zone, select): add required property Jan 5, 2024
@benelan benelan changed the title feat(checkbox, combobox, input-date-picker, input-time-picker, input-time-zone, select): add required property feat(checkbox, combobox, input-date-picker, input-time-picker, select): add required property Jan 5, 2024
@jcfranco
Copy link
Member

jcfranco commented Jan 5, 2024

@aaronpi and @SkyeSeitz provided design feedback on #8057 and
@SkyeSeitz #8057 (comment):

Is the required prop applicable [to Segmented Control] since it should always have a selected item?

@jcfranco what do you think, should we keep required internal for Segmented Control? Slider and Rating may also be worth reevaluating, since I think both of them always have a value.

I replied in the referenced issue, but the TLDR is: we still need a public required prop for segmented control.

Slider and Rating may also be worth reevaluating, since I think both of them always have a value.

Slider always has a value, but rating does support no initial value.

@jcfranco
Copy link
Member

jcfranco commented Jan 9, 2024

@benelan pointed out that rating has a default value of 0 when not set, which confirms that both slider and rating always have a value. Thanks for the catch!

…-not-internal

* origin/main:
  fix(action): update component tokens to support transparent (#8532)
  build: update browserslist db (#8565)
  fix(input, input-number, input-text): restore focus on input after browser validation error is displayed and user continues typing (#8563)
  docs(various components): consistent api description refs (#8550)
@benelan benelan changed the title feat(checkbox, combobox, input-date-picker, input-time-picker, select): add required property feat(checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select): add required property Jan 9, 2024
@benelan benelan merged commit 72a1ce4 into main Jan 9, 2024
10 checks passed
@benelan benelan deleted the benelan/required-prop-not-internal branch January 9, 2024 01:27
@github-actions github-actions bot added this to the 2024-01-17 - Jan Main Release milestone Jan 9, 2024
benelan added a commit that referenced this pull request Jan 9, 2024
…ion-message

* origin/main:
  chore: release next
  fix(color-picker): emit color change when nudging color channels by using the shift key (#8579)
  chore: release next
  feat(list): Add "filter-no-results" slot to display content when no filtered items are shown (#8569)
  feat(checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select): add required property (#8517)
  chore: release next
  docs(monorepo): clarify which PR to edit when modifying changelog entry (#8573)
geospatialem pushed a commit that referenced this pull request Jan 17, 2024
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 2.1.1</summary>

##
[2.1.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-01-17)


### Bug Fixes

* Allow users to control tabindex on interactive components
([#8166](#8166))
([b15c052](b15c052))


### Reverts

* Chore(modal): remove e2e tests that are covered by dedicated openClose
commonTests helper
([#8392](#8392))
([#8471](#8471))
([4bedf99](4bedf99))
</details>

<details><summary>@esri/calcite-components: 2.2.0</summary>

##
[2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-01-17)


### Features

* **action-menu:** Close menu on blur instead of on tab key.
([#8577](#8577))
([ccfbd0c](ccfbd0c))
* **checkbox, combobox, input-date-picker, input-time-picker,
segmented-control, select:** Add required property
([#8517](#8517))
([72a1ce4](72a1ce4))
* **handle, block, list-item:** Improve drag handle tooltip to include
item label
([#8584](#8584))
([6e643e2](6e643e2))
* **handle:** Add `blurUnselectDisabled` property to disable unselecting
handle on blur.
([#8483](#8483))
([4d665cc](4d665cc))
* **handle:** Add selected property and calciteHandleChange event.
([#8484](#8484))
([d2e9880](d2e9880))
* **list-item:** Add dragSelected property and
calciteListItemDragHandleChange event
([#8524](#8524))
([4db2eb7](4db2eb7))
* **list-item:** Add tooltip for expanding and collapsing
([#8612](#8612))
([4964491](4964491))
* **list:** Add "filter-no-results" slot to display content when no
filtered items are shown
([#8569](#8569))
([f1fc7f6](f1fc7f6))
* **list:** Introduce clearer unselected state
([#8510](#8510))
([f1e836c](f1e836c))
* **radio-button-group, segmented control:** Add validationMessage,
validationIcon, and status properties
([#8561](#8561))
([d4c5efc](d4c5efc))
* Reflect validationIcon property
([#8583](#8583))
([b3d38b3](b3d38b3))
* **table-header:** Add style when within a `selected` Table Row
([#8449](#8449))
([13cfe75](13cfe75))
* **tabs:** Emit selection-related events when selection is modified
after closing the selected tab
([#8582](#8582))
([b15c940](b15c940))
* **tile:** Add visual scales
([#8496](#8496))
([7638ec4](7638ec4))
* Use input-message to display validation messages for invalid fields
after form submission
([#8574](#8574))
([fd392fe](fd392fe))


### Bug Fixes

* **action:** Update component tokens to support transparent
([#8532](#8532))
([81cb5cc](81cb5cc))
* Allow users to control tabindex on interactive components
([#8166](#8166))
([b15c052](b15c052))
* **button:** Avoid needlessly overwriting title
([#8491](#8491))
([350a983](350a983))
* **color-picker:** Emit color change when nudging color channels by
using the shift key
([#8579](#8579))
([4250598](4250598))
* **combobox:** Only allow deleting visible chips with the keyboard
([#8603](#8603))
([2d38241](2d38241))
* **date-picker:** Prevent console error when selecting just an end date
for input date picker
([#8444](#8444))
([c0e51c3](c0e51c3))
* **filter:** Prevent console warning from displaying to end users
([#8458](#8458))
([0de7646](0de7646))
* **input-date-picker:** Ensure range icon toggles open corresponding
date-picker
([#8554](#8554))
([cfafd15](cfafd15))
* **input-date-picker:** Resolve a hard to reproduce number formatter
caching issue that occurred due to the countdown delay in queued Alerts.
([5f4fa3e](5f4fa3e))
* **input-message:** Add missing margin to scale="s", spacing CSS
variable has effect
([#8592](#8592))
([49b0a20](49b0a20))
* **input, input-number, input-text:** Restore focus on input after
browser validation error is displayed and user continues typing
([#8563](#8563))
([5897965](5897965))
* **input, input-number:** Support setting value property to Infinity
([#8547](#8547))
([f6ac698](f6ac698))
* **list-item:** Store last focused cell from focusing on elements
within a cell.
([#8494](#8494))
([28f93b4](28f93b4))
* **list, list-item, list-item-group:** Honor hidden attribute on
list-item and list-item-group
([#8541](#8541))
([3851dc6](3851dc6))
* **list:** Correct selectedItems value when list is filtered
([#8481](#8481))
([9de1922](9de1922))
* **list:** Fix event detail newIndex when down arrow pressed to sort
([#8462](#8462))
([b3d5169](b3d5169))
* **list:** Fix keyboard arrow navigation
([#8470](#8470))
([57fdaa4](57fdaa4))
* **modal:** Ensure focus trapping in dynamically created, subsequently
opened modals
([#8593](#8593))
([4ec6b94](4ec6b94))
* **table:** Fix double border on `bordered` Table Rows in
`table-footer`
([#8509](#8509))
([c16ea33](c16ea33))
* **table:** Improve Table overflow behavior
([#8424](#8424))
([79743e1](79743e1))
* **text-area:** Prevent infinite render loop when `max-length` property
is defined
([#8610](#8610))
([f30d933](f30d933))


### Reverts

* Chore(modal): remove e2e tests that are covered by dedicated openClose
commonTests helper
([#8392](#8392))
([#8471](#8471))
([4bedf99](4bedf99))


### Dependencies

* The following workspace dependencies were updated
  * devDependencies
    * @esri/calcite-design-tokens bumped from ^2.1.1-next.4 to ^2.1.1
</details>

<details><summary>@esri/calcite-components-angular: 2.2.0</summary>

##
[2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-01-17)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0
</details>

<details><summary>@esri/calcite-components-react: 2.2.0</summary>

##
[2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-01-17)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Issues tied to a new feature or request. skip visual snapshots Pull requests that do not need visual regression testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants