Hi Piotr.
I think is what I just pointed in the response to a Harbs emails. I think
once people set typenames and classnames, if we operate all through
element.classList, that solves all conflicts, since all classes are in a
managed list, if people wants to add or remove they can through the list.
The only thing we can't avoid is to remove typenames, but I think we should
not try to enforce that in the same way we want to use object bracketed
access to properties since is more dinamic. In resume, we'll end with a
very robust class system based on classList that has browser support and
people can override if they want (it's up to what they want to do)
2018-03-12 18:47 GMT+01:00 Piotr Zarzycki <piotrzarzyck...@gmail.com>:
> Carlos,
>
> But people are changing className all the time and that's the way how you
> are changing your component. That was the problem. How do you handle that
> one ? Change UIBase, your component to your approach.
>
> Than in your examples set <Button className="myCustomClass" /> - What are
> you get ?
>
>
>
> 2018-03-12 18:44 GMT+01:00 Carlos Rovira <carlosrov...@apache.org>:
>
> > Hi Harbs,
> >
> > if once typenames and classnames are set, if UIBase changes the way it
> > manages className to use element.classList, things will be more easy and
> a
> > matter of use add/remove/toggle methods in element.classList. right?
> > if people changes className directly will be bad, unless he/she wants to
> > override it completely (and if they want to do that since they needed,
> why
> > not?)
> >
> > 2018-03-12 17:51 GMT+01:00 Harbs <harbs.li...@gmail.com>:
> >
> > > Right, but Carlos is using: element.classList.toggle("primary",
> value);
> > > (and similar)
> > >
> > > That will be overwritten if someone sets myButton.className =
> > “foo_class”;
> > > (where myButton is some kind of UIBase)
> > >
> > > You cannot even do something like this: myButton.className =
> > > myButton.className + “ foo_class”; because the properties such as
> > > “primary” are not being included in the typeNames or classNames.
> > >
> > > Harbs
> > >
> > > > On Mar 12, 2018, at 6:42 PM, Alex Harui <aha...@adobe.com.INVALID>
> > > wrote:
> > > >
> > > > Well, it isn't fair if someone writes to element.className, but we
> > > control
> > > > what happens when someone writes to UIBase.className. I just want it
> > to
> > > > be as simple as possible and PAYG.
> > > >
> > > > -Alex
> > > >
> > > > On 3/12/18, 9:21 AM, "Harbs" <harbs.li...@gmail.com <mailto:
> > > harbs.li...@gmail.com>> wrote:
> > > >
> > > >> I’m pretty sure your solution will only work if the user doesn’t
> set a
> > > >> className of their own. Setting className overwrites the entire
> > > classList.
> > > >>
> > > >>> On Mar 12, 2018, at 5:45 PM, Carlos Rovira <
> carlosrov...@apache.org>
> > > >>> wrote:
> > > >>>
> > > >>> Hi
> > > >>>
> > > >>> I made some simplification that works ok in Jewel:
> > > >>>
> > > >>> 1.- remove CSSClassList and use element.classList since is native
> and
> > > >>> supported in all browsers we target, this simplifies code, and
> > removes
> > > >>> classes from core.
> > > >>> 2.- I still need to use some additional code that can be
> simplified.
> > > I'm
> > > >>> doing:
> > > >>>
> > > >>> element.classList.toggle("primary", value);
> > > >>> setClassName(computeFinalClassNames());
> > > >>> classList has its own toggle function that makes super easy to
> manage
> > > >>> adds
> > > >>> and removes, so no need to have a custom function in royale
> > > >>>
> > > >>> that uses:
> > > >>>
> > > >>> COMPILE::JS
> > > >>> override protected function computeFinalClassNames():String
> > > >>> {
> > > >>> return super.computeFinalClassNames() + " " + element.classList;
> > > >>> }
> > > >>>
> > > >>> I'd like to remove that and change the "setClassName" call to
> > nothing,
> > > >>> if
> > > >>> we change UIBase to simple use classList
> > > >>>
> > > >>> My guess is that we can have "typenames" and "classNames" but once
> > all
> > > >>> set,
> > > >>> all can be managed with classList to add/remove since this is
> native
> > > and
> > > >>> manages all itself
> > > >>>
> > > >>> thoughts?
> > > >>>
> > > >>>
> > > >>>
> > > >>>
> > > >>>
> > > >>> 2018-03-12 14:01 GMT+01:00 Carlos Rovira <carlosrov...@apache.org
> >:
> > > >>>
> > > >>>> Hi,
> > > >>>>
> > > >>>> long thread and very useful read here. Since Jewel is very similar
> > to
> > > >>>> MDL
> > > >>>> in adding/removing classes I want to comment here some things:
> > > >>>>
> > > >>>> 1.- I just changed jewel typenames to the constructor and things
> > works
> > > >>>> ok,
> > > >>>> I could remove the createElement override
> > > >>>> 2.- I have into account the use of typenames as something
> inmutable
> > > (as
> > > >>>> part of definition of a component) and classNames as things that
> are
> > > >>>> put by
> > > >>>> developer, or change at runtime due to some user operation
> > > >>>>
> > > >>>> Then:
> > > >>>>
> > > >>>> 3.- Why not use classList [1] instead of create our own
> > CSSClassList ?
> > > >>>> is
> > > >>>> well supported in the browsers we are targeting
> > > >>>>
> > > >>>> Something more "light" :)
> > > >>>>
> > > >>>> 4.- I know that order in html classes are not relevant, in the
> > > >>>> execution.
> > > >>>> And most of people here doesn't mind if typenames are before or
> > after
> > > >>>> classNames. So hope this doesn't make any problem to anyone here:
> > > >>>> Can I change the code to put typeNames before classNames in
> > > >>>> computeFinalClassNames? I think this not affects anyone since is a
> > > >>>> small
> > > >>>> change and helps me to get organized classnames and identify
> > things. I
> > > >>>> think is better to see in final html typeNames first then
> classNames
> > > so
> > > >>>> "inheritance" (to call it some way), could be easy detected by the
> > eye
> > > >>>>
> > > >>>> Thanks
> > > >>>>
> > > >>>> Carlos
> > > >>>>
> > > >>>>
> > > >>>> [1]
> > > >>>> https://na01.safelinks.protection.outlook.com/?url=
> > > https%3A%2F%2Fwww.w3s <https://na01.safelinks.
> > protection.outlook.com/?url=
> > > https%3A%2F%2Fwww.w3s>
> > > >>>> chools.com <http://chools.com/>%2FJsref%
> > 2Fprop_element_classlist.asp&
> > > data=02%7C01%7Caharui%40
> > > >>>> adobe.com <http://adobe.com/>%7C8ce390a012154f8f2a8a08d588354aa0%
> > > 7Cfa7b1b5a7b34438794aed2c17
> > > >>>> 8decee1%7C0%7C0%7C636564684909764090&sdata=
> > > OOh4TK5LKB75CGn6U4%2BeaVC%2Fi
> > > >>>> V%2BHgGzDj8fqrBB%2BCcs%3D&reserved=0
> > > >>>>
> > > >>>>
> > > >>>>
> > > >>>>
> > > >>>>
> > > >>>>
> > > >>>> --
> > > >>>> Carlos Rovira
> > > >>>>
> > > >>>> https://na01.safelinks.protection.outlook.com/?url=
> > > http%3A%2F%2Fabout.me <https://na01.safelinks.
> > protection.outlook.com/?url=
> > > http%3A%2F%2Fabout.me>
> > > >>>> %2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com <
> > > http://40adobe.com/>%7C8ce390a012154f8f2a8a
> > > >>>> 08d588354aa0%7Cfa7b1b5a7b34438794aed2c178de
> > > cee1%7C0%7C0%7C63656468490976
> > > >>>> 4090&sdata=HDNJQ8VZuNS5lhOBU2ZsRrGQAgG5qO
> > xiIQJKkOaTZV4%3D&reserved=0
> > > >>>>
> > > >>>>
> > > >>>
> > > >>>
> > > >>> --
> > > >>> Carlos Rovira
> > > >>>
> > > >>> https://na01.safelinks.protection.outlook.com/?url=
> > > http%3A%2F%2Fabout.me% <https://na01.safelinks.
> > > protection.outlook.com/?url=http%3A%2F%2Fabout.me%>
> > > >>> 2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com <
> > http://40adobe.com/
> > > >%7C8ce390a012154f8f2a8a08
> > > >>> d588354aa0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> > > 7C63656468490976409
> > > >>> 0&sdata=HDNJQ8VZuNS5lhOBU2ZsRrGQAgG5qOxiIQJKkOaTZV4%3D&reserved=0
> > >
> > >
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
> >
>
>
>
> --
>
> Piotr Zarzycki
>
> Patreon: *https://www.patreon.com/piotrzarzycki
> <https://www.patreon.com/piotrzarzycki>*
>
--
Carlos Rovira
http://about.me/carlosrovira
