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

Enhancement: Clearer/better to see checkboxes #2848

Closed
janett-baresel opened this issue Aug 18, 2021 · 11 comments
Closed

Enhancement: Clearer/better to see checkboxes #2848

janett-baresel opened this issue Aug 18, 2021 · 11 comments
Assignees
@benelan
Labels
4 - verified Issues that have been released and confirmed resolved. enhancement Issues tied to a new feature or request. good first issue Issues that can be worked on by contributors new to calcite-components.
Milestone
Sprint 10/11 – 10/22

Comments

@janett-baresel
Copy link

janett-baresel commented Aug 18, 2021 •
edited
Loading

Description

calcite-checkbox is hard to see when the small size is used. The line for the check is so thin, that even in normal size it is pretty subtle.
Here a comparison of calcite-checkbox in small and checkbox icons we used in the past:
image

The line looks pretty blurry and is hard to see.

Acceptance Criteria

Clearer, thicker line for the check mark.

Relevant Info

Which Component

calcite-checkbox (especially in size="small")

Example Use Case

see above screenshot. We use checkboxes for a layer list where layers are turned on and off (visibility).

SVCH
@janett-baresel janett-baresel added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Aug 18, 2021
@julio8a julio8a removed the needs triage Planning workflow - pending design/dev review. label Sep 24, 2021
@julio8a julio8a added this to the Sprint 10/11 – 10/22 milestone Sep 24, 2021
@julio8a julio8a added the good first issue Issues that can be worked on by contributors new to calcite-components. label Sep 24, 2021
@SkyeSeitz
Copy link

SkyeSeitz commented Sep 24, 2021 •
edited
Loading

Does the Calcite checkbox have to use this icon: https://esri.github.io/calcite-ui-icons/#check
or are there components that are designed outside the icon library? I am thinking of other UI elements that are small, but not Calcite UI icons such as toggles, radio button, etc.

@SkyeSeitz
Copy link

SkyeSeitz commented Sep 24, 2021 •
edited
Loading

Request submitted for new check icon to live specifically in this component. Thanks for the suggestion, @janett-baresel

@SkyeSeitz
Copy link

The follow SVG code can now live in the checkbox component to replace the Calcite UI check icon:
<svg id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M5.5 10.38L2.56 7.44l.88-.88L5.5 8.62l5.06-5.06.88.88z"/><path fill="none" d="M0 0h14v14H0z"/></svg>

Reach out if there are any follow up questions.

@y0n4 y0n4 self-assigned this Oct 13, 2021
@y0n4 y0n4 added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Oct 13, 2021
y0n4 added a commit that referenced this issue Oct 14, 2021
@y0n4
fix(checkbox): replace the current check mark svg with provided svg f…
297336c 
…rom #2848
@caripizza
Copy link
Contributor

caripizza commented Oct 14, 2021 •
edited
Loading

@KatelynSeitz I don't think that svg is going to scale properly unfortunately.

It looks to me like we just need to revert the path changes back to what they were before this pr change:
https://github.com/Esri/calcite-components/pull/2205/files#diff-652d8517a10478f41cf540118f5d3246cd42490b69fd1a164933515f47f35c0dL91

Before (current)
image

After (the previous svg paths before Julio's pr):
image

@caripizza
Copy link
Contributor

@macandcheese we could use your help here. Can we revert the checkmark paths back to what they were prior to Julio's change? Or, how should Yona proceed on this one?

@macandcheese
Copy link
Contributor

macandcheese commented Oct 14, 2021 •
edited
Loading

Have we tried having all three of these Calcite UI icon svg path in the component and set based on scale ?https://esri.github.io/calcite-ui-icons/#check

Either way we are scaling one svg to three sizes now, which wouldn't work with any single path, imo. Or, alternatively if @KatelynSeitz could provide the new thicker one in 3 sizes to correspond to scale?

@caripizza
Copy link
Contributor

@macandcheese AFAIK, checkbox has to support indeterminate state, so it's using getPath to apply the proper d attribute values to the conditionally rendered svg's path. Then for each scale, it sets the height/width of the checkbox to a font-size (ie., 12px sm/ 14px m / 16px l).

It really looks to me like we just need to revert that pr change Julio added, refactoring checkbox for each icon scale seems like more work than is required here to me.

Screenshots for comparison, all 100 x 30 px.

Master (ie., current behavior) Reverted paths (ie., my suggestion)
checked + focused
image image
indeterminate + focused
image image

@caripizza
Copy link
Contributor

I'd like to add an additional to-do to this issue - let's remove the test class that got added to the svg's containing div (Matt confirmed was added on accident).

@macandcheese
Copy link
Contributor

@caripizza sounds good to me - if that old path works at s, and l, it seems like less work to just revert.

y0n4 added a commit that referenced this issue Oct 14, 2021
@y0n4
fix(checkbox): simply add thicker stroke to the checkbox svg and retr…
be1be00 
…act the svg upgrade provided #2848
@y0n4 y0n4 mentioned this issue Oct 14, 2021
Merged
@y0n4 y0n4 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 Oct 15, 2021
y0n4 added a commit that referenced this issue Oct 18, 2021
@y0n4 @jcfranco
@dependabot @driskull @benelan
fix(checkbox): style the current svg checkbox and interdeterminate ic…
4503631 
…on to be bolder #2848 (#3250)

* fix(combobox): add chevron icon at end of input regardless of selection mode (#3055)

* fix(checkbox): replace the current check mark svg with provided svg from #2848

* fix(combox-item): adjust height of the item to be consistent respective to its scale size (#3144) (#3197)

* fix(combox-item): adjust height of the item to be consistent respective to its scale size (#3144)

* fix(combobox-item): keep the container styling relative to the scale size

* fix(combobox-item): review pr comment suggestion for styling

* refactor(filter): avoid stateful regexp used for filtering

* 1.0.0-next.288 [skip ci]

* build(deps): bump storybook from 6.3.10 to 6.3.11 (#3233)

Bumps [storybook](https://github.com/storybookjs/storybook/tree/HEAD/lib/cli) from 6.3.10 to 6.3.11.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.11/lib/cli)

---
updated-dependencies:
- dependency-name: storybook
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump @storybook/html from 6.3.10 to 6.3.11 (#3232)

Bumps [@storybook/html](https://github.com/storybookjs/storybook/tree/HEAD/app/html) from 6.3.10 to 6.3.11.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.11/app/html)

---
updated-dependencies:
- dependency-name: "@storybook/html"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix(dropdown): close on outside click when disable-close-on-select is true #3136 (#3227)

* fix(dropdown): remove preventDefault and stopPropagation on click event (#3231)

* fix(dropdown): close on outside click when disable-close-on-select is true #3136

* fix(dropdown): remove preventDefault on click event. #1709

* 1.0.0-next.289 [skip ci]

* fix(checkbox): simply add thicker stroke to the checkbox svg and retract the svg upgrade provided #2848

* fix(combobox): add chevron icon at end of input regardless of selecti… (#3143)

* fix(combobox): add chevron icon at end of input regardless of selection mode (#3055)

* fix(combobox): align the chevron icon to be centered vertically on multiple chips select mode (#3055)

* fix(action-bar): get up-to-date master changes

* feat(combobox): add additional story for multiple with preselected inputs

* fix(combobox): make all the combobox height size consistent scale

* 1.0.0-next.290 [skip ci]

* docs(input-time-picker): value is always 24-hour format (#3245)

* fix(checkbox): remove test class

* fix(checkbox): refactor styling to tailwind

* fix(checkbox): pr review to remove unused style

* fix(checkbox): add fill tailwind class

Co-authored-by: JC Franco <[email protected]>
Co-authored-by: Travis CI User <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Matt Driscoll <[email protected]>
Co-authored-by: Ben Elan <[email protected]>
@y0n4 y0n4 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 Oct 18, 2021
@github-actions github-actions bot assigned benelan and unassigned y0n4 Oct 18, 2021
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@benelan
Copy link
Member

benelan commented Oct 21, 2021

verified on next

@benelan benelan closed this as completed Oct 21, 2021
@benelan benelan 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 Oct 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@benelan benelan

Labels
4 - verified Issues that have been released and confirmed resolved. enhancement Issues tied to a new feature or request. good first issue Issues that can be worked on by contributors new to calcite-components.
Projects
None yet
Milestone
Sprint 10/11 – 10/22
Development

No branches or pull requests
7 participants
@macandcheese @julio8a @benelan @janett-baresel @y0n4 @SkyeSeitz @caripizza