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 <[email protected]>: > 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 <[email protected]>: > > > 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 <[email protected]> > > 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" <[email protected] <mailto: > > [email protected]>> 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 <[email protected]> > > >>> 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 <[email protected]>: > > >>> > > >>>> 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>*
