diff --git a/change/@ni-nimble-components-b2fe6cda-830f-4aea-8378-049b1f65f3be.json b/change/@ni-nimble-components-b2fe6cda-830f-4aea-8378-049b1f65f3be.json new file mode 100644 index 0000000000..1779231130 --- /dev/null +++ b/change/@ni-nimble-components-b2fe6cda-830f-4aea-8378-049b1f65f3be.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Update checkbox error state HLD to move plan to update clickable region of the control to future work", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/nimble-components/src/checkbox/specs/error-state.md b/packages/nimble-components/src/checkbox/specs/error-state.md index 7bc762ba6a..970b35c8e6 100644 --- a/packages/nimble-components/src/checkbox/specs/error-state.md +++ b/packages/nimble-components/src/checkbox/specs/error-state.md @@ -25,20 +25,12 @@ At a high-level, the design of the component will be: - The `title` of the text is the full error string - Red error icon (`nimble-icon-exclamation-mark`) on the right side of the label with a 4px margin between the icon and the right edge of the control - Control indicator (checkbox square) and error icon will both be center-aligned with the first line of label text, both when the label text wraps and when it fits on a single line. -- Control indicator and label will both be interactable -- hovering over them will put the component in the "mouseover" state and clicking them will activate the control -- The error icon along with the space between the label and the error icon will not be interactable -Below are some examples of how the checkbox will look and behave with different configurations. The blue outline shows the bounds of the control, and the blue background indicates the interactable regions of the control. +Below are some examples of how the checkbox will look with an error. -![](spec-images/checkbox-no_error,no_wrap.PNG) +![](spec-images/checkbox-with-error.PNG) -![](spec-images/checkbox-no_error,wrap.PNG) - -![](spec-images/checkbox-error,no_wrap.PNG) - -![](spec-images/checkbox-error,wrap.PNG) - -![](spec-images/checkbox-long_error.PNG) +![](spec-images/checkbox-with-long-error.PNG) ### API @@ -66,6 +58,10 @@ The styling changes include (but may not be limited to): - Verifying the label wraps when the label is longer than the allocated space for the control - Ensuring the checked/selected indicator is center aligned with the first line of text +### Future Work + +There are additional changes that should be made to the `nimble-checkbox` to align it with the design spec. Specifically, only the control indicator and the label should be interactable. Any other space within the `nimble-checkbox` should not be interactable, such as any whitespace to the right of the label or between the label and the error icon. This change however, has both unit test implications (because unit tests today simply call `click()` on the `nimble-checkbox` element) and ARIA implications (because the element with a role of `checkbox` should be clickable). Therefore, it is being considered out of scope for the error state feature. + ## Open Issues _None_ diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,no_wrap.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,no_wrap.PNG deleted file mode 100644 index 3422b5df0b..0000000000 Binary files a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,no_wrap.PNG and /dev/null differ diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,wrap.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,wrap.PNG deleted file mode 100644 index b99baf52fa..0000000000 Binary files a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,wrap.PNG and /dev/null differ diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-long_error.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-long_error.PNG deleted file mode 100644 index fd825ef8dd..0000000000 Binary files a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-long_error.PNG and /dev/null differ diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,no_wrap.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,no_wrap.PNG deleted file mode 100644 index 003128bce6..0000000000 Binary files a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,no_wrap.PNG and /dev/null differ diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,wrap.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,wrap.PNG deleted file mode 100644 index 1024421529..0000000000 Binary files a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,wrap.PNG and /dev/null differ diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-error.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-error.PNG new file mode 100644 index 0000000000..f7016f6131 Binary files /dev/null and b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-error.PNG differ diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-long-error.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-long-error.PNG new file mode 100644 index 0000000000..e01fb66cf6 Binary files /dev/null and b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-long-error.PNG differ