Label is a single-line sequence of text. I think that is the statement that might be in the process of being indirectly debated. Is it documented as such?
On Fri, Mar 16, 2018 at 4:37 PM, Alex Harui <[email protected]> wrote: > Because, this isn't an issue of performance. We give our users choices > and a toolkit to replicate ANY HTML tree they want to. We are proposing > to replace what is to me the most obvious Flex-like component name for > injecting a span into the DOM. Label is a single-line sequence of text. > So is Span. > > I'm not seeing a huge performance difference. If you think it is > significant enough that our users should be alerted to use SizeableLabel > or whatever we call the Div-wrapping-text version, start blogging it after > you validate your test case. I noticed that the number of Spans the test > appears to report are higher than the number of Divs, but that might be a > false alarm. You can be a hero in the web world if you are right and > change the advice I see elsewhere on the net to use Span for inline > elements and Div for other things. Even the JSPerf page is using spans. > Tell them to replace them. > > Meanwhile, I'm going back to try to migrate an app. Sure wish we had more > people helping on that. > > -Alex > > > We can certainly give them advice that SizedLabel is faster than Label if > that's important, but the different didn't seem that significant. > > On 3/15/18, 6:14 PM, "[email protected] on behalf of OmPrakash Muppirala" > <[email protected] on behalf of [email protected]> wrote: > > >If creating a div is more performant than creating a span, why insist on > >using a span? How is that pay as you go? > > > >Thanks, > >Om > > > >On Thu, Mar 15, 2018 at 5:19 PM, Alex Harui <[email protected]> > >wrote: > > > >> A Flex Label, and any Flex component was a swiss-army knife of features > >> and not PAYG. I have not given up on PAYG. I think it will pay off > >>when > >> we get to the last mile. If we don't stick to PAYG, I think we will > >>just > >> repeat the history of Flex and produce a fat framework that can't run > >> everywhere. Yes, a Div would probably better mimic a Flex Label, but > >>the > >> Basic label is not a swiss-army knife. > >> > >> This article is old, but I think it says you can't put a Div in a Span: > >> > >>https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2Fdoctype.c > >>om%2Fspan-contain-div-html5&data=02%7C01%7Caharui%40adobe.com > %7C77b57b271 > >>ef7423114c208d58ae0d810%7Cfa7b1b5a7b34438794aed2c178de > cee1%7C0%7C0%7C6365 > >>67620658308491&sdata=o9msOjZpbwywflSfgJDebUdMM3hgNP > dN%2Btn%2BrcSZsV4%3D&r > >>eserved=0 > >> > >> I think you can if you change the span's display to "block" but I think > >> that is essentially replacing the element. > >> > >> Everything, including width and truncation should be opt-in, PAYG. > >>Make a > >> LabelWithWidth or SizeableLabel component that is a div if you want. > >> > >> Again, the goal is to encapsulate common patterns. I am not seeing a > >>lot > >> of Divs wrapping text nodes. I see lots of spans wrapping text nodes. > >> Basic Label is that pattern. The Basic component set would be > >>incomplete > >> if there wasn't a component that could inject a Span into the DOM. > >>Create > >> another component that is a Div wrapping a text node, give it a > >>different > >> name, and let's move on. > >> > >> Alina used Label quite often without setting width. No need for those > >> instances to be a Div, AFAICT. > >> > >> Do we even need to discuss span vs div if the truncation bead will work > >>by > >> setting display:block? > >> > >> We have a huge opportunity here to get another app migrated and prove to > >> the world that Royale is the right choice. But we keep discussing stuff > >> that IMO, isn't really moving the big pieces forward. But, IMO, we > >>should > >> not compromise on PAYG philosophy and patterns. > >> > >> My 2 cents, > >> -Alex > >> > >> On 3/15/18, 4:27 PM, "[email protected] on behalf of OmPrakash > >>Muppirala" > >> <[email protected] on behalf of [email protected]> wrote: > >> > >> >FWIW, it seems like creating divs is faster than creating spans. > >> >https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fjsperf.co > >> >m%2Fspan-vs-div-creation&data=02%7C01%7Caharui%40adobe.com > >> %7C3664f690b3da4 > >> >e4aefab08d58acc7bf0%7Cfa7b1b5a7b34438794aed2c178de > >> cee1%7C0%7C0%7C636567533 > >> >215453966&sdata=oPPp2e9aRbQ%2FngKbcFMHMCmXi%2BKa%2B% > >> 2F0aA98XFFqxhFA%3D&res > >> >erved=0 > >> > > >> >Thanks, > >> >Om > >> > > >> >On Thu, Mar 15, 2018 at 3:38 PM, Greg Dove <[email protected]> > wrote: > >> > > >> >> Observing from the sidelines, fwiw I agree with Harbs here. Span to > >>me > >> >> makes more sense as part of the text value of a label and not as the > >> >>basis > >> >> for the representation of the Label itself - div seems closer to > >>what I > >> >>was > >> >> used to with legacy Flex (which may no longer be the 'reference' for > >> >> choosing an implementation). > >> >> I don't think there is any semantic or other reason that makes span > >>the > >> >> logical default tag for Label, in fact I recall that being a problem > >> >>many > >> >> times with some work I was involved with last year using FlexJS. > >> >> But maybe I am missing something in terms of understanding. > >> >> > >> >> > >> >> > >> >> > >> >> On Fri, Mar 16, 2018 at 11:08 AM, Harbs <[email protected]> > >>wrote: > >> >> > >> >> > I’m suggesting to change it because span does not fit the use case > >>of > >> >> > Label. Width and truncate are just two applications which indicate > >> >>that > >> >> > span is not the correct element. I’m pretty sure I had other edge > >> >>cases > >> >> > which were likely effected by the fact that Label is a span, > >>although > >> >>I’m > >> >> > not positive. > >> >> > > >> >> > I disagree with your distinction between span and div. > >> >> > > >> >> > Both span and div can have children. Spans can contain divs and > >>divs > >> >>can > >> >> > contain spans. At its core, Span has nothing to do with text. It’s > >> >>just > >> >> > often used for text because text (within its container) is inline. > >> >> > > >> >> > MDN says[1] "<span> is very much like a <div> element, but <div> > >>is a > >> >> > block-level element whereas a <span> is an inline element.” > >> >> > > >> >> > Label is *not* necessarily an inline element. We have all kinds of > >> >> layouts > >> >> > for Label. Many (most?) of them are not inline. > >> >> > > >> >> > If you feel really strongly about this, I’ll revert even though I > >> >> disagree. > >> >> > > >> >> > FWIW, the truncate bead does not need to change the element type. > >>It > >> >>can > >> >> > explicitly set the display of the element to block. > >> >> > > >> >> > Harbs > >> >> > > >> >> > > >> >>[1]https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fdevel > >> >>oper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%2FElement% > >> 2Fspan&data=02%7C0 > >> >>1%7Caharui%40adobe.com%7C3664f690b3da4e4aefab08d58acc > >> 7bf0%7Cfa7b1b5a7b344 > >> >>38794aed2c178decee1%7C0%7C0%7C636567533215453966&sdata= > >> xrtF9H7%2BjFzqGDax > >> >>nj0%2BuY3hsHu6BaUb4Yp15ucwhyc%3D&reserved=0 < > >> >> > > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fdevelope > >> >>r.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%2FElement% > >> 2Fspan&data=02%7C01%7 > >> >>Caharui%40adobe.com%7C3664f690b3da4e4aefab08d58acc > >> 7bf0%7Cfa7b1b5a7b344387 > >> >>94aed2c178decee1%7C0%7C0%7C636567533215453966&sdata= > >> xrtF9H7%2BjFzqGDaxnj0 > >> >>%2BuY3hsHu6BaUb4Yp15ucwhyc%3D&reserved=0> > >> >> > > >> >> > > On Mar 15, 2018, at 11:25 PM, Alex Harui > >><[email protected]> > >> >> > wrote: > >> >> > > > >> >> > > Label in Flex and Royale is not intended to have any children > >>(other > >> >> than > >> >> > > bold, italic and other text markup). Span represents that. Div > >> >>does > >> >> > not. > >> >> > > You are suggesting changing to div JUST IN CASE someone needs to > >> >>set a > >> >> > > width and/or truncate. Just-in-case code is not PAYG. > >> >> > > > >> >> > > My 2 cents, > >> >> > > -Alex > >> >> > > > >> >> > > On 3/15/18, 2:17 PM, "[email protected] <mailto: > >> >> > [email protected]> on behalf of Carlos Rovira" > >> >> > > <[email protected] <mailto:[email protected]> on > >>behalf > >> >>of > >> >> > [email protected] <mailto:[email protected]>> wrote: > >> >> > > > >> >> > >> And why not change IBeadView in Label for a view that uses a div > >> >>when > >> >> > >> needed? ;) > >> >> > >> in the other cases, maintains the span > >> >> > >> > >> >> > >> 2018-03-15 21:05 GMT+01:00 Harbs <[email protected]>: > >> >> > >> > >> >> > >>> I’m still not understanding you. What about Label says it’s a > >>span > >> >> > >>> instead > >> >> > >>> of a div? Why is making it a div not PAYG? Span simply limits > >> >>Label > >> >> > >>> unnecessarily. I think span is not the appropriate element for > >> >>Label. > >> >> > >>> > >> >> > >>>> A Label without width should grow to the size of its text. > >>Isn't > >> >> that > >> >> > >>> how > >> >> > >>>> it worked in Flex? > >> >> > >>> > >> >> > >>> Sure, and a div does that too. In Flex, a label could have a > >>width > >> >> too > >> >> > >>> if > >> >> > >>> specified. Spans cannot. > >> >> > >>> > >> >> > >>> Harbs > >> >> > >>> > >> >> > >>>> On Mar 15, 2018, at 9:56 PM, Alex Harui > >> >><[email protected]> > >> >> > >>> wrote: > >> >> > >>>> > >> >> > >>>> Have the truncation bead swap the span for div. Again, some > >> >> component > >> >> > >>> has > >> >> > >>>> to put a span in the DOM. Label has been just fine for that > >>so > >> >>far. > >> >> > >>>> > >> >> > >>>> A Label without width should grow to the size of its text. > >>Isn't > >> >> that > >> >> > >>> how > >> >> > >>>> it worked in Flex? > >> >> > >>>> > >> >> > >>>> Maybe Label should be refactored to not have width/height > >> >>properties > >> >> > >>> but > >> >> > >>>> IMO we have bigger fish to fry. > >> >> > >>>> > >> >> > >>>> I'm sure Div is used to wrap text in some frameworks, but > >>those > >> >> > >>> frameworks > >> >> > >>>> probably aren't PAYG. In Alina's app, Label has a usage > >>score of > >> >> 69, > >> >> > >>> but > >> >> > >>>> Label.width has a score of only 5. We will have her use > >> >> > >>>> LabelWithTruncation or add the truncation bead on the few > >>labels > >> >> that > >> >> > >>> need > >> >> > >>>> > >> >> > >>>> My 2 cents, > >> >> > >>>> -Alex > >> >> > >>>> > >> >> > >>>> On 3/15/18, 12:45 PM, "Harbs" <[email protected]> wrote: > >> >> > >>>> > >> >> > >>>>> But we already have a truncation bead. The only reason it > >> >>doesn’t > >> >> > >>> work > >> >> > >>> in > >> >> > >>>>> Label is because spans don’t have widths. > >> >> > >>>>> > >> >> > >>>>> Label is not something which should flow beyond its bounds — > >> >>which > >> >> is > >> >> > >>>>> what span is useful for. I still don’t see why you think span > >> >>makes > >> >> > >>> more > >> >> > >>>>> sense. > >> >> > >>>>> > >> >> > >>>>> FWIW, div *is* used as a container for text in various > >> >>frameworks. > >> >> > >>>>> > >> >> > >>>>> My $0.02, > >> >> > >>>>> Harbs > >> >> > >>>>> > >> >> > >>>>>> On Mar 15, 2018, at 9:42 PM, Alex Harui > >> >><[email protected] > >> >> > > >> >> > >>>>>> wrote: > >> >> > >>>>>> > >> >> > >>>>>> AIUI, "inline" is the default display style for Span. > >>"block" > >> >>is > >> >> > >>> the > >> >> > >>>>>> default for Div. HTML flows inline by default for just > >>plain > >> >> text. > >> >> > >>>>>> Basic > >> >> > >>>>>> components try to give Flex-friendly names for HTMLElements. > >> >>Some > >> >> > >>>>>> component in Basic needs to inject a span into the DOM. In > >>a > >> >>few > >> >> > >>>>>> seconds > >> >> > >>>>>> of looking at a Google web page, I did not see any divs with > >> >>text > >> >> as > >> >> > >>>>>> children. I saw spans. The Divs all contained other > >>elements. > >> >> > >>>>>> > >> >> > >>>>>> I don't create HTML web pages for a living, but if I were to > >> >> place a > >> >> > >>>>>> label > >> >> > >>>>>> over a control like I often see in Flex, I would not wrap > >>the > >> >> label > >> >> > >>> in > >> >> > >>> a > >> >> > >>>>>> Div. The control would be div, so I would us a span or just > >> >>plain > >> >> > >>> text. > >> >> > >>>>>> If I looked at the final DOM and saw Divs around every > >>chunk of > >> >> > >>> text, I > >> >> > >>>>>> would think there is something heavy about the framework. > >> >> > >>>>>> > >> >> > >>>>>> Again, the goal is to encapsulate common patterns. Label > >> >>combined > >> >> > >>> with > >> >> > >>>>>> some control is trying to replicate common patterns for > >> >>labeling > >> >> > >>>>>> controls. > >> >> > >>>>>> You are trying to solve the common pattern of truncating > >>text. > >> >> That > >> >> > >>>>>> will > >> >> > >>>>>> require a Div. But truncation, or even width/height is not > >> >> something > >> >> > >>>>>> that > >> >> > >>>>>> should be built into Label for PAYG reasons. IMO, you > >>should > >> >> > >>> create a > >> >> > >>>>>> different component with a different name. > >>TruncatingLabel, or > >> >> > >>>>>> LabelWIthTruncation. > >> >> > >>>>>> > >> >> > >>>>>> My 2 cents, > >> >> > >>>>>> -Alex > >> >> > >>>>>> > >> >> > >>>>>> On 3/15/18, 12:19 PM, "Harbs" <[email protected]> > wrote: > >> >> > >>>>>> > >> >> > >>>>>>> Why is span lighter than div? > >> >> > >>>>>>> > >> >> > >>>>>>> Inline and nowrap is not specific to span. AFAICT, there’s > >> >> nothing > >> >> > >>>>>>> specific to snap which fits Label better than div. > >> >> > >>>>>>> > >> >> > >>>>>>> As far as components which “does” span: Besides Span in > >>HTML, > >> >>we > >> >> > >>> have > >> >> > >>>>>>> HTMLText in Basic which encapsulates span. > >> >> > >>>>>>> > >> >> > >>>>>>> I can revert the change I made to Label, but I have not > >>seen > >> >>any > >> >> > >>>>>>> downside > >> >> > >>>>>>> to using div for Label. It seems to me that there’s > >>nothing in > >> >> the > >> >> > >>>>>>> Label > >> >> > >>>>>>> promise which dictates using span. > >> >> > >>>>>>> > >> >> > >>>>>>> Harbs > >> >> > >>>>>>> > >> >> > >>>>>>>> On Mar 15, 2018, at 6:55 PM, Alex Harui > >> >> <[email protected] > >> >> > > > >> >> > >>>>>>>> wrote: > >> >> > >>>>>>>> > >> >> > >>>>>>>> > >> >> > >>>>>>>> > >> >> > >>>>>>>> On 3/15/18, 5:34 AM, "Harbs" <[email protected]> > >>wrote: > >> >> > >>>>>>>> > >> >> > >>>>>>>>> Gotcha. FWIW, we now have the HTML element component set > >> >>which > >> >> > >>> more > >> >> > >>>>>>>>> thinly wraps HTML elements. > >> >> > >>>>>>>>> > >> >> > >>>>>>>>> I can’t think of any reason why Label would be better as > >>a > >> >>span > >> >> > >>> than > >> >> > >>>>>>>>> a > >> >> > >>>>>>>>> div. It seems to me that simply using div instead of span > >> >>would > >> >> > >>> make > >> >> > >>>>>>>>> Label more versatile. Am I missing something? > >> >> > >>>>>>>> > >> >> > >>>>>>>> You may be missing that the only real goal of Royale is to > >> >> > >>> encapsulate > >> >> > >>>>>>>> popular patterns. Pretty sure I've seen span used on many > >> >>web > >> >> > >>> pages, > >> >> > >>>>>>>> so > >> >> > >>>>>>>> we need a component that does what it does, including > >> >>assuming > >> >> > >>> inline > >> >> > >>>>>>>> instead of block display. Similarly, what would you think > >> >>of a > >> >> > >>>>>>>> framework > >> >> > >>>>>>>> that had a HelloWorld that used a div instead of a span? > >>You > >> >> > >>> might > >> >> > >>>>>>>> think > >> >> > >>>>>>>> it is too heavy. > >> >> > >>>>>>>> > >> >> > >>>>>>>> Per PAYG, if span doesn’t' support certain features, then > >>you > >> >> > >>> create > >> >> > >>> a > >> >> > >>>>>>>> LabelWithTruncation and have it use a Div if you need to. > >> >> > >>>>>>>> > >> >> > >>>>>>>> My 2 cents, > >> >> > >>>>>>>> -Alex > >> >> > >>>>>>>>> > >> >> > >>>>>>>>>> On Mar 15, 2018, at 2:30 PM, Peter Ent > >> >><[email protected] > >> >> > > >> >> > >>>>>>>>>> wrote: > >> >> > >>>>>>>>>> > >> >> > >>>>>>>>>> Label was one of the very first components and the idea > >>was > >> >> > >>>>>>>>>> minimalism. > >> >> > >>>>>>>>>> Button was <button> and TextInput was <input > >>type="text"> > >> >>and > >> >> > >>> Label > >> >> > >>>>>>>>>> was > >> >> > >>>>>>>>>> <span>. > >> >> > >>>>>>>>>> > >> >> > >>>>>>>>>> I'm wondering if we should have NativeButton, > >>NativeLabel, > >> >> etc. > >> >> > >>>>>>>>>> which > >> >> > >>>>>>>>>> would be these minimal elements and have others that are > >> >><div> > >> >> > >>>>>>>>>> wrapping. > >> >> > >>>>>>>>>> For instance, ImageAndTextButton is a <button><img > >> >> > >>>>>>>>>> src="goo.jpg">Label > >> >> > >>>>>>>>>> Here</button> which works but the alignment is weird so > >> >>maybe > >> >> > >>>>>>>>>> ImageAndTextButton should be a <div><img>Text</div> > >>which > >> >>can > >> >> be > >> >> > >>>>>>>>>> aligned > >> >> > >>>>>>>>>> and styled better. > >> >> > >>>>>>>>>> > >> >> > >>>>>>>>>> Anyway, that's the reason: simplicity. > >> >> > >>>>>>>>>> > >> >> > >>>>>>>>>> ‹peter > >> >> > >>>>>>>>>> > >> >> > >>>>>>>>>> On 3/15/18, 7:51 AM, "Harbs" <[email protected]> > >> wrote: > >> >> > >>>>>>>>>> > >> >> > >>>>>>>>>>> Is there a reason that the element type of Basic Label > >>is > >> >> span? > >> >> > >>>>>>>>>>> > >> >> > >>>>>>>>>>> I tried adding a łTextOverflow˛ bead to a Label and it > >> >>does > >> >> not > >> >> > >>>>>>>>>>> seem > >> >> > >>>>>>>>>>> to > >> >> > >>>>>>>>>>> work because spans donąt really have a working width. > >> >> Switching > >> >> > >>> the > >> >> > >>>>>>>>>>> element type to div seems to make it work. > >> >> > >>>>>>>>>>> > >> >> > >>>>>>>>>>> Harbs > >> >> > >>>>>>>>>> > >> >> > >>>>>>>>> > >> >> > >>>>>>>> > >> >> > >>>>>>> > >> >> > >>>>>> > >> >> > >>>>> > >> >> > >>>> > >> >> > >>> > >> >> > >>> > >> >> > >> > >> >> > >> > >> >> > >> -- > >> >> > >> Carlos Rovira > >> >> > >> https://na01.safelinks.protection.outlook.com/?url= > >> >> > http%3A%2F%2Fabout.me%2 > >> >><https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fna01.sa > >> > >>>>felinks&data=02%7C01%7Caharui%40adobe.com% > 7C3664f690b3da4e4aefab08d58ac > >>>>c > >> 7 > >> >>bf0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636567533215453966&sdata > >> >>=exoH%2BPKzuyM%2BykE65GQeHk%2BjPAZSsUFjsKwx3BRvjsk%3D&reserved=0. > >> >> > protection.outlook.com/?url=http%3A%2F%2Fabout.me%2> > >> >> > >> Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com > >> > >>>><https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2F40adob > >>>>e > >> . > >> > >>>>com%2F&data=02%7C01%7Caharui%40adobe.com% > 7C3664f690b3da4e4aefab08d58acc > >> 7b > >> >>f0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636567533215453966&sdata= > >> >>ewhtNMkSjHssIseUSvxq9etF%2FtrcA%2Buqk3sZlJkjHuc%3D&reserved=0 > >> >> >% > >> >> > 7Cae539925833d453aaa2e08d5 > >> >> > >> 8aba29c4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> >> > 7C636567454874235113&s > >> >> > >> data=Xvu%2BZ7186rOBNg5j0KrJsGPi5O4YnwiY > 1WVtz2xsNvc%3D&reserved=0 > >> >> > > >> >> > > >> >> > >> > >> > >
