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

feat(radio-button-group, segmented control): add validationMessage, validationIcon, and status properties #8561

Merged
merged 22 commits into from
Jan 16, 2024
Merged

feat(radio-button-group, segmented control): add validationMessage, validationIcon, and status properties #8561

merged 22 commits into from
Jan 16, 2024

Conversation

benelan
Copy link
Member

@benelan benelan commented Jan 5, 2024 •
edited
Loading

Related Issue: #8057

Summary

Add validationMessage, validationIcon, and status properties to calcite-radio-button-group and calcite-segmented-control for form validation.

@benelan benelan requested a review from a team as a code owner January 5, 2024 11:21
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Jan 5, 2024
@benelan benelan added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 5, 2024
jcfranco
jcfranco approved these changes Jan 5, 2024
View reviewed changes
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.

📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝
📝✅📝📝📝✅📝✅✅✅✅📝✅📝📝📝✅✅✅📝✅✅✅📝📝✅📝
📝✅📝📝📝✅📝✅📝📝✅📝✅📝📝📝📝✅📝📝✅📝📝✅📝✅📝
📝✅📝📝📝✅📝✅✅✅✅📝✅📝📝📝📝✅📝📝✅📝📝✅📝✅📝
📝📝✅📝✅📝📝✅📝📝✅📝✅📝📝📝📝✅📝📝✅📝📝✅📝📝📝
📝📝📝✅📝📝📝✅📝📝✅📝✅✅✅📝✅✅✅📝✅✅✅📝📝✅📝
📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝

@jcfranco
Copy link
Member

jcfranco commented Jan 5, 2024

@benelan Once all components are updated, could we also update E2E tests to cover these props with defaults and reflects?

benelan added 6 commits January 8, 2024 16:05
@benelan
feat(segmented-control): add validationMessage, validationIcon, and s…
66e39b2 
…tatus properties
@benelan
chore: cleanup
a2c0786
@benelan
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
fb698ef 
…ion-message

* 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)
  refactor(slider): simplify rendering (#8475)
  docs: consistent api description refs m thru s-comps (#8545)
  chore: release next
  fix(list, list-item, list-item-group): honor hidden attribute on list-item and list-item-group (#8541)
@benelan
chore: cleanup
25dd6c8
@benelan
chore: cleanup
d5dfd37
@benelan
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
3f41180 
…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)
@benelan benelan added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 9, 2024
@benelan
Copy link
Member Author

benelan commented Jan 9, 2024

@benelan Once all components are updated, could we also update E2E tests to cover these props with defaults and reflects?

Should validationMessage and validationIcon be reflected?

@jcfranco
Copy link
Member

Should validationMessage and validationIcon be reflected?

According to our conventions, validationIcon could be reflected.

@benelan
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
51bccc8 
…ion-message

* origin/main:
  docs: update component READMEs (#8553)
  chore: release next
  feat(action-menu): Close menu on blur instead of on tab key. (#8577)
  fix(input, input-number): support setting value property to Infinity (#8547)
@benelan
chore: clean
1e83a36
@benelan benelan changed the title feat(radio-button-group): add validationMessage, validationIcon, and status properties feat(radio-button-group, segmented control): add validationMessage, validationIcon, and status properties Jan 10, 2024
@benelan benelan mentioned this pull request Jan 10, 2024
Merged
@benelan benelan added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 10, 2024
@benelan
chore: cleanup
a563d5f
@benelan
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
3158a55 
…ion-message

* origin/main:
  chore: release next
  docs: improve consistency for component prop descriptions (#8580)
@benelan benelan added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. skip visual snapshots Pull requests that do not need visual regression testing. labels Jan 10, 2024
jcfranco
jcfranco approved these changes Jan 11, 2024
View reviewed changes
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.

💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊
💊🔘💊💊💊🔘💊💊🔘🔘💊💊🔘🔘🔘💊💊🔘🔘🔘💊🔘🔘🔘🔘💊🔘💊
💊🔘🔘💊💊🔘💊🔘💊💊🔘💊💊🔘💊💊🔘💊💊💊💊🔘💊💊💊💊🔘💊
💊🔘💊🔘💊🔘💊🔘💊💊🔘💊💊🔘💊💊🔘💊💊💊💊🔘🔘🔘💊💊🔘💊
💊🔘💊💊🔘🔘💊🔘💊💊🔘💊💊🔘💊💊🔘💊💊💊💊🔘💊💊💊💊💊💊
💊🔘💊💊💊🔘💊💊🔘🔘💊💊🔘🔘🔘💊💊🔘🔘🔘💊🔘🔘🔘🔘💊🔘💊
💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊💊

packages/calcite-components/src/components/radio-button-group/radio-button-group.scss Outdated Show resolved Hide resolved
packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
scale="l"
status="valid"
validation-icon
validation-message="Thanks for not selecting Ember"
Copy link
Member

Choose a reason for hiding this comment

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

😭🔥

@benelan
Copy link
Member Author

benelan commented Jan 11, 2024

It looks like the label CSS prop doesn't have a default value and label's bottom margin will use a fall back in this case.

--calcite-input-message-spacing-value doesn't have any effect even when removing the label in the codepen I linked in my previous comment - https://codepen.io/benesri/pen/OJqRxNm?editors=1100

Any other ideas?

@jcfranco
Copy link
Member

jcfranco commented Jan 11, 2024 •
edited
Loading

I think there's a specificity issue in input-message: margin-block-start is set to the variable's value here, but is overridden here (bypassing the prop). You could override it directly, but might be good to fix at the input-message level (in a separate PR).

@benelan
test(radio-button-group): separate validation-message into a NoTest s…
0bdf838 
…tory
@benelan
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
829acbd 
…ion-message

* origin/main:
  feat(handle, block, list-item): improve drag handle tooltip to include item label (#8584)
@benelan benelan added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 11, 2024
@macandcheese
Copy link
Contributor

I think there's a specificity issue in input-message: margin-block-start is set to the variable's value here, but is overridden here (bypassing the prop). You could override it directly, but might be good to fix at the input-message level (in a separate PR).

For consistency across forms - does this space between the input and the input message need to be configurable at all?

@benelan benelan mentioned this pull request Jan 12, 2024
Merged
@jcfranco
Copy link
Member

For consistency across forms - does this space between the input and the input message need to be configurable at all?

image

We can keep an eye out for requests.

benelan added a commit that referenced this pull request Jan 12, 2024
@benelan
fix(input-message): add missing margin to scale="s", spacing CSS vari…
49b0a20 
…able has effect (#8592)

**Related Issue:**
#8561 (comment)
## Summary

- Resolve CSS specificity issue that prevented
`--calcite-input-message-spacing-value` from having any effect.
- Add missing margin top to the small scale to align with the Figma
design, where the margin is the same for all scales.
@benelan
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
2e8bfce 
…ion-message

* origin/main:
  fix(input-message): add missing margin to scale="s", spacing CSS variable has effect (#8592)
  feat(tile): add visual scales (#8496)
@benelan
chore: cleanup
2dfb355
@benelan benelan added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 13, 2024
@benelan
Copy link
Member Author

benelan commented Jan 13, 2024

After additional testing I found that setting --calcite-label-margin-bottom: 0 caused a spacing regression when the horizontal layout wrapped.

Now that #8592 is installed I changed the code to set a negative margin-top on the input message to inverse the label's margin-bottom. @ashetland can you please review the snapshots when you get a chance? Thanks!

@benelan benelan added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 13, 2024
@benelan
Copy link
Member Author

benelan commented Jan 13, 2024

After additional testing I found that setting --calcite-label-margin-bottom: 0 caused a spacing regression when the horizontal layout wrapped.

Now that #8592 is installed I changed the code to set a negative margin-top on the input message to inverse the label's margin-bottom. @ashetland can you please review the snapshots when you get a chance? Thanks!

I was using incorrect spacing token levels and after fixing it the diffs disappeared in the most recent Chromatic build. Here are the two relevant stories:

@ashetland
Copy link
Contributor

ashetland commented Jan 16, 2024 •
edited
Loading

I think those two stories are looking good. Are these the only ones affected by this or were there others?

@jcfranco I think the long-term goal is to remove the Label margin altogether, right? If so, when we build label directly into components we'll likely need to reevaluate/refactor how this spacing is achieved on some components.

@benelan
Copy link
Member Author

benelan commented Jan 16, 2024

@ashetland the only other one that changed (other than the usual false positives) is this one:

https://www.chromatic.com/component?appId=6266d45509d7eb004aa254fb&csfId=components-controls-radio-radio-button-group--dark-mode-rtl-test-only&buildNumber=3490&k=65a1dc9570ad7dd8388b8a25-1200px-interactive-true&h=4&b=-2

I made it vertical and added the validation message

@benelan benelan merged commit d4c5efc into main Jan 16, 2024
16 checks passed
@benelan benelan deleted the benelan/radio-validation-message branch January 16, 2024 20:41
@calcite-admin calcite-admin mentioned this pull request Jan 16, 2024
Merged
geospatialem pushed a commit that referenced this pull request Jan 17, 2024
@calcite-admin @github-actions
chore: release main (#8455)
3709f80 
🤖 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/calcite-design-tokens@2.1.0...@esri/calcite-design-tokens@2.1.1)
(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/calcite-components@2.1.0...@esri/calcite-components@2.2.0)
(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/calcite-components-angular@2.1.0...@esri/calcite-components-angular@2.2.0)
(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/calcite-components-react@2.1.0...@esri/calcite-components-react@2.2.0)
(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>
@calcite-admin calcite-admin mentioned this pull request May 14, 2024
Merged
@calcite-admin calcite-admin mentioned this pull request May 28, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jcfranco jcfranco jcfranco approved these changes

Assignees

@benelan benelan

Labels
enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2024-01-17 - Jan Main Release
Development

Successfully merging this pull request may close these issues.
4 participants
@benelan @jcfranco @macandcheese @ashetland