FWIW, it seems like creating divs is faster than creating spans. https://jsperf.com/span-vs-div-creation
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://developer.mozilla.org/en-US/docs/Web/HTML/Element/span < > > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span> > > > > > 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=http%3A%2F%2Fabout.me%2> > > >> Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com <http://40adobe.com/ > >% > > 7Cae539925833d453aaa2e08d5 > > >> 8aba29c4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > > 7C636567454874235113&s > > >> data=Xvu%2BZ7186rOBNg5j0KrJsGPi5O4YnwiY1WVtz2xsNvc%3D&reserved=0 > > > > >
