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 > >
