Add Checkbox 'Indeterminate' State styling #460

modialpad · 2021-09-29T20:49:12Z

Description

Add Checkbox 'Indeterminate' state styles.

How it looks:

Pull Request Checklist

Ask the contributors if a similar effort is already in process or has been solved.
Review the contribution guidelines.
Use staging as your pull request's base branch. (All PRs using production as its base branch will be declined).
Ensure all gulp scripts successfully compile.
Update, remove, or extend all affected documentation.
Provide a description what is being changed, extended, or removed.
Ensure no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
Request a review from Joshua Hynes, Ted Goas, or David Becher.

dialpad-drew · 2021-09-29T21:52:07Z

Awesome, @modialpad thanks for PRing this. Glad to see you updated the documentation.

I just pushed a quick update as well; my suggestion is we parse the indeterminate style out to its own discrete section. LMK what you think.

Also, out of curiosity: is your local build looping when you save?

modialpad · 2021-09-29T22:12:39Z

Awesome, @modialpad thanks for PRing this. Glad to see you updated the documentation.

I just pushed a quick update as well; my suggestion is we parse the indeterminate style out to its own discrete section. LMK what you think.

Also, out of curiosity: is your local build looping when you save?

Np, looks more organized now 👍

Yes, when I run npm run start I think it rebuilds everything whenever I edit any files. But I think there's a bug where if anything changes the doc server doesn't restart properly. I had to exist the process and re-run npm run start in order to see app loading properly on localhost:4000. Is it just me?

dialpad-drew · 2021-09-29T22:32:18Z

Awesome, @modialpad thanks for PRing this. Glad to see you updated the documentation.
I just pushed a quick update as well; my suggestion is we parse the indeterminate style out to its own discrete section. LMK what you think.
Also, out of curiosity: is your local build looping when you save?

Np, looks more organized now 👍

Yes, when I run npm run start I think it rebuilds everything whenever I edit any files. But I think there's a bug where if anything changes the doc server doesn't restart properly. I had to exist the process and re-run npm run start in order to see app loading properly on localhost:4000. Is it just me?

No, that's not just you. I'm noticing that on my end as well; that's new. I already noted it.

Only question I have is about the attribute. MDN suggests that browsers don't currently support indeterminate as an attribute and the example using the attribute doesn't seem to exhibit any functionality. Is there a CSS-only way to do this, or are we simply just putting in some styles for the Vue component to leverage?

dbecherdialpad · 2021-09-29T22:38:51Z

docs/components/checkbox.html

+  </div>
+  <div class="d-checkbox-group">
+    <div class="d-checkbox__input">
+      <input class="d-checkbox" type="checkbox" name="Dialtone-CheckExample6" id="Dialtone-CheckExample6" indeterminate />


I don't think this is valid. There is no indeterminate attribute, you actually can ONLY set this through JS: https://css-tricks.com/indeterminate-checkboxes/

dammit @dialpad-drew already beat me to it

dbecherdialpad · 2021-09-29T22:40:00Z

lib/build/less/components/radio-checkbox.less

@@ -169,6 +169,18 @@
                background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
            }
        }
+
+        &--indeterminate,
+        &[indeterminate] {


as above, this is not an attribute. But there IS a CSS pseudo-class weirdly (if it's set via js) https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate

dbecherdialpad · 2021-09-29T22:40:56Z

lib/build/less/components/radio-checkbox.less

+            --check-radio--bgc:     var(--check-radio--color);
+            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
+
+            &[disabled] {


unrelated to your PR but I just noticed we aren't using the pseudo class for this either https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled

Yeah, the other PR I have adds the custom class for the disabled state for accessibility reasons.

…ector - update docs

modialpad · 2021-10-01T14:36:21Z

Only question I have is about the attribute. MDN suggests that browsers don't currently support indeterminate as an attribute and the example using the attribute doesn't seem to exhibit any functionality. Is there a CSS-only way to do this, or are we simply just putting in some styles for the Vue component to leverage?

@dialpad-drew @dbecherdialpad I read the docs and you're right, browsers don't support indeterminate attribute on input elements. I removed the attribute selector and updated this select on the indeterminate pseudo-class, in addition to the custom class CSS approach (--indeterminate). Removed the attribute selector example in the docs.

modialpad · 2021-10-01T17:26:09Z

@dbecherdialpad we probably don't need to update dialtone-vue for this, right? Considering that the consumer won't bother updating the indeterminate attribute through JS. And if it's just a class, then we can do that just through dialtone.

Also, another question I have is about the publish process. I assume I'll have to bump the version of Dialtone after this merge, is there documentation somewhere for this?

(Finally, I can't seem to have merge permissions here. But we should probably go ahead and merge if it looks good)

dbecherdialpad · 2021-10-01T17:34:35Z

@modialpad

we probably don't need to update dialtone-vue for this, right? Considering that the consumer won't bother updating the indeterminate attribute through JS.

For dialtone-vue I generally prefer adding a prop (which adds the class) rather than relying on engineers to pass the correct class name. This also allows for improved autocomplete and documentation. For indeterminate we can also provide this as a prop and have the vue component correctly set the indeterminate state of the checkbox (essentially implementing what you thought could be done in html).

Also, another question I have is about the publish process. I assume I'll have to bump the version of Dialtone after this merge, is there documentation somewhere for this?

Docs are here but it requires one of us to publish the version https://github.com/dialpad/dialtone/blob/staging/.github/RELEASING.md

dbecherdialpad · 2021-10-01T17:37:59Z

@modialpad In dialtone-vue this is actually quite trivial to add using the .prop v-bind modifier: vuejs/vue#4094 (comment)

https://vuejs.org/v2/api/#v-bind

modialpad · 2021-10-01T18:12:48Z

@modialpad In dialtone-vue this is actually quite trivial to add using the .prop v-bind modifier: vuejs/vue#4094 (comment)

https://vuejs.org/v2/api/#v-bind

Great, thanks! I'll open the dialtone-vue PR once Dialtone is published.

Add Checkbox Indeterminate State styling

b003cd1

modialpad added the enhancement New feature or request label Sep 29, 2021

modialpad requested review from dbecherdialpad, braddialpad, tedgoas-dialpad and dialpad-drew September 29, 2021 20:49

dialpad-drew assigned modialpad Sep 29, 2021

modialpad and others added 2 commits September 29, 2021 17:24

Update Checkbox docs with indeterminate state info

47715eb

Parsed indeterminate styles into its own example

0061bdd

Wordsmithing

3eacf6a

dbecherdialpad suggested changes Sep 29, 2021

View reviewed changes

Remove indeterminate attribute selector, add indeterminate pseudo-sel…

297bd87

…ector - update docs

modialpad requested a review from dbecherdialpad October 1, 2021 14:38

dbecherdialpad approved these changes Oct 1, 2021

View reviewed changes

braddialpad approved these changes Oct 6, 2021

View reviewed changes

modialpad merged commit 38fdeb5 into staging Oct 6, 2021

modialpad deleted the feature/checkbox-indeterminate-state branch October 6, 2021 18:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Checkbox 'Indeterminate' State styling #460

Add Checkbox 'Indeterminate' State styling #460

modialpad commented Sep 29, 2021 •

edited

Loading

dialpad-drew commented Sep 29, 2021

modialpad commented Sep 29, 2021

dialpad-drew commented Sep 29, 2021

dbecherdialpad Sep 29, 2021

dbecherdialpad Sep 29, 2021

modialpad Oct 1, 2021

dbecherdialpad Sep 29, 2021

modialpad Oct 1, 2021

dbecherdialpad Sep 29, 2021

modialpad Oct 1, 2021

modialpad commented Oct 1, 2021

modialpad commented Oct 1, 2021

dbecherdialpad commented Oct 1, 2021

dbecherdialpad commented Oct 1, 2021

modialpad commented Oct 1, 2021

Add Checkbox 'Indeterminate' State styling #460

Add Checkbox 'Indeterminate' State styling #460

Conversation

modialpad commented Sep 29, 2021 • edited Loading

Description

Pull Request Checklist

dialpad-drew commented Sep 29, 2021

modialpad commented Sep 29, 2021

dialpad-drew commented Sep 29, 2021

dbecherdialpad Sep 29, 2021

Choose a reason for hiding this comment

dbecherdialpad Sep 29, 2021

Choose a reason for hiding this comment

modialpad Oct 1, 2021

Choose a reason for hiding this comment

dbecherdialpad Sep 29, 2021

Choose a reason for hiding this comment

modialpad Oct 1, 2021

Choose a reason for hiding this comment

dbecherdialpad Sep 29, 2021

Choose a reason for hiding this comment

modialpad Oct 1, 2021

Choose a reason for hiding this comment

modialpad commented Oct 1, 2021

modialpad commented Oct 1, 2021

dbecherdialpad commented Oct 1, 2021

dbecherdialpad commented Oct 1, 2021

modialpad commented Oct 1, 2021

modialpad commented Sep 29, 2021 •

edited

Loading