flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject Re: [FlexJS] Struggling with custom HTML
Date Mon, 27 Mar 2017 21:55:34 GMT

On 3/27/17, 12:03 AM, "Harbs" <harbs.lists@gmail.com> wrote:

>My specific problem was caused by the CheckBox component. The way
>CheckBox was made, it’s not styleable. Styleable checkboxes require CSS
>which hides the default checkbox and creates a pseudo-element which is
>styled by CSS to have the desired look.
>I’m working on a panel for InDesign. Generally I’m using Topcoat CSS
>because that matches the general styling of InDesign components pretty
>closely. This works for most FlexJS components pretty well. Because
>FlexJS checkboxes are not styleable, checkboxes are not usable with the
>Topcoat CSS. The CSS hides the default checkbox, but the Topcoat one does
>not appear because the expected HTML structure is not there.
>I am considering changing Checkbox to have the expected structure or
>creating a new “CSSCheckBox” component which has the structure. The
>problem I see that there seems to be more than one method of creating CSS
>styled checkbox.
>Ultimately, I don’t think using HTML checkboxes is the “FlexJS” way of
>making checkboxes. That’s because any styling of checkboxes are hacks.
>I’d really like to see our skinning story improve. Flex 3 and Flex 4 had
>very good methods for skinning components, and I wish we had a better
>platform agnostic skinning story for FlexJS.

In the Flat.swc, there is a RadioButton that has a different HTML
structure that the Flat theme expects.  I don't know what we did for MDL,
but I'm pretty sure some of those components have different HTML
structures than the Basic versions.  IMO, if you want to support TopCoat,
start a TopCoat.swc and get the HTML structure you want in there.  Basic's
CheckBox is meant to be just a thin wrapper over the single HTMLElement.
Someday, I hope the Flat set grows into the Bootstrap set and can handle
all Bootstrap themes.

Again, we are in the business of encapsulating patterns.  There is a cost
to make a one-size-fits-all or in the case,
one-checkbox-that-can-be-styled-any-way-you-want.  We should eventually
get around to creating such a component set for those who need it, but I
think the "optimized" versions will be specific to their main themes.
IOW, it will be more efficient to use the MDL set for MDL than have an MDL
skin for the skinnable set.

So, in my vision of the future there will be a Checkbox in Basic,
Flat/Bootstrap, MDL, Topcoat, Jquery, CreateJS and others.

Of course, I could be wrong.

View raw message