Public

Am I reading this correctly: This function interprets and additional increment in the count associated with a `Input.button()` to dispatch an event resettling the value of `input.checked` to null? And the purpose of the final `dispatchEvent` is to let other listening functions know that a change has occurred?

Increment in the parent function `reduce` is to retain the default behavior with `Inputs.button`. Yes, `dispatchEvent` is to let other know the value of this component has been updated.

You can simplify this to: function reset(form, value) { if(!form.length) return; for(const n of form) n.checked = null; form.dispatchEvent(new Event("form", { bubbles: true })); } Note that I changed the name `input` to `form` because only HTMLFormElement is iterable, inputs aren't.

Thanks for those suggestions Fabian!

Aaron Kyle Dennis

Using @tomarkworthy `view` here allows us to have an infinitely render-able-on-call copy of this element rather than rendering a single element that would be pulled across the DOM when different calls to it are made?

This cell is passing the values from a grouped set of inputs into a function that is firstly interpreting them into an `Input.button` that is assigned a `reset` function (i.e. Observable Inputs) and then renders that `Input.button` object into an HTML stylized element with an assigned CSS class. It is using this `<div class="">` assignment that allows us to apply custom CSS to the returned input object?

We can use the regular `html` and `htl.html` to compose Inputs and other HTML elements. But, we will loose out on the values returned by the Inputs. Here, I'm using Tom's `view` to return the values of the inputs used. This is like a factory function, each time you call this function in a cell, a copy of HTML DOM elements are provided to that cell. The gist of the code here is: — create a radio, `radioGroup`, using `Inputs.radio` — create a button, `clearBtn` using `Input.button` — when `clearBtn` is clicked its `reduce` function, which I use to reset `radioGroup`. With in the `reduce` function I'm retain default `r => r +1` to increment count on each clicks.

Aaron Kyle Dennis

Would you mind sharing a few words about why this method is helpful? I think I get it but would appreciate an expert interpretation :)

In @mootari's own words: "Because Tachyons resets and normalizes all styles we need to inject it as the first of all stylesheets:". The above snippet insert the `<link >` tag before other styles sheets in `<head>` of the page.

You can also target Observable inputs directly by fetching the library's current class namespace: ``` ns = Inputs.text().classList[0] ``` and including that in your CSS, e.g.: ``` .${ns} > label { text-transform: uppercase } .${ns}-checkbox div label { font-style: italic } ```

Thanks Fabian. That's pretty neat!

Can we keep this comment open or put this nearer the top? Don't bury the lede! ns = Inputs.text().classList[0] <style> form.${ns} { width: inherit; } </style>

👍 Will keep this comment open.

This is pretty powerful for removing the weird width behaviour of all the inputs. form.${ns} { width: inherit; }

It's "bubbles", not "bubble" :)

🙈

Comments (16)

Increment in the parent function `reduce` is to retain the default behavior with `Inputs.button`. Yes, `dispatchEvent` is to let other know the value of this component has been updated.

Thanks for those suggestions Fabian!

Would you mind sharing a few words about why this method is helpful? I think I get it but would appreciate an expert interpretation :)

Thanks Fabian. That's pretty neat!

Can we keep this comment open or put this nearer the top? Don't bury the lede! ns = Inputs.text().classList[0] <style> form.${ns} { width: inherit; } </style>

👍 Will keep this comment open.

This is pretty powerful for removing the weird width behaviour of all the inputs. form.${ns} { width: inherit; }

It's "bubbles", not "bubble" :)