Export repeat grids as lists

aruffo3 · March 5, 2019, 7:31pm

When I have a list of items, like text for a nav, export the <ul></ul> correctly.
I have the following as a left nav element in XD:
CLOTHING
Item 1
Item 2
Item 3

If I export this, it spits this code out:

<ul class="left-nav__category">
 <li id="CLOTHING">
   <span>CLOTHING</span>
 </li>
</ul>
<li id="Activewear">
  <span>Activewear</span>
</li>
<div id="Casual">
   <span>Casual</span>
</div>
<div id="Coats">
   <span>Coats</span>
</div>
<div id="Shirts">
   <span>Shirts</span>
</div>
<div id="Jeans">
   <span>Jeans</span>
</div>

I would expect all the items to be in a list, not just the top element and the incorrect <li></li> below it.

I have also tried this in a repeat grid with the same results.

velara · March 5, 2019, 7:49pm

Hmm… how are you creating your bullet list? I don’t see a bullet list option in my XD. If you are pasting the bullet list in from somewhere else can you create and upload an example (.xd)?

I might be able to recreate it but when I copy a list from a web page for example, the bullet list is removed. I tried copying this HTML:

Clothing

Active wear
Casual
Coats

aruffo3 · March 5, 2019, 9:32pm

Not using bullets (Mac - option 8) in the list, this is for a left nav.

I created a repeat grid of text items because you can’t create a “real” bulleted list in XD.

Then I ungrouped the grid to see if things exported differently.

aruffo3 · March 5, 2019, 10:21pm

One thing to note on the repeat grid is that it can be used for a LOT of things that simply need to repeat. For example, we use the repeat grid horizontally on our Product Description Pages.
We set up an image and have a Designer Name, a Product description, a Price and maybe a few adornments(Exclusives, Sales, etc) that are directly below it. Each of these is one product column, and we simple stretch it out until we have 4 products and text, across 4 columns in one row.

We also use it for our Left Navigation and Designer Indexes.

So repeat grids can be either Horizontal or Vertical in their display.

aruffo3 · March 6, 2019, 3:51pm

OK, so I think I have this worked out. Well at least for individual text elements. Haven’t tried a repeat grid yet.

I have 6 items representing my left navigation list.

I group them and label that grouped element, as “nav”. (I uncheck the “Displayed” but it still puts the ID.)
The resulting code is: <div id="nav" class="nav">

Now for each of the items in the group, my menu items, I set their Tag Name as “li”.

On the first menu item element I add to the Markup Before, <ul class="left-nav__category">

On the last menu item element, I add to the Markup After, </ul>

The resulting code is:

<div id="nav" class="nav">
    	<ul class="left-nav__category">
    		<li id="CLOTHING">
    			<span>CLOTHING</span>
    		</li>
    		<li id="Activewear">
    			<span>Activewear</span>
    		</li>
    		<li id="Casual">
    			<span>Casual</span>
    		</li>
    		<li id="Coats">
    			<span>Coats</span>
    		</li>
    		<li id="Shirts">
    			<span>Shirts</span>
    		</li>
    		<li id="Jeans">
    			<span>Jeans</span>
    		</li>
    	</ul>
 </div>

velara · March 6, 2019, 4:51pm

I found a bug in looking into this where the alternate tag name was not applied to groups or repeat grids. I’ve fixed that and the UL was applied on the container. Then I set the first repeat grid item to use a LI tag name and it worked for all items but I also had to set the overflow on the grid to visible because the bullets character was being clipped. In practice it might require setting the left margin.

Would having a sub tag name for Repeat Grids solve this? Maybe also a sub class name? This would only apply to Repeat Grids.

aruffo3 · March 6, 2019, 5:06pm

That may be what is needed. Until XD actually implements a real bulleted list, I think both of those would work.
I think most people would use this as a way to set up a left nav or a horizontal main nav. Not to really set up a bulleted list of text, like within/after page content.

aruffo3 · March 13, 2019, 8:06pm

We finally updated XD to current and your plugin to current.

I have been playing around with the repeat grid.
Couple things:

I deselect the Display ID but it keeps generating an id for each element in the grid. (This is happening for every element on the artboard)
I am using the Tag Name ul and Sub Tag Name li which creates my list. However, the items in the list now are contained in a <div> with a <span> holding the actual list text.

So each of the list items looks like this:

<li id="nav_5">
  <div id="Jeans">
    <span>Jeans</span>
  </div>
</li>

the span I can live with, the div, not so much.

velara · March 14, 2019, 3:28am

Although the Display checkbox is on the ID line it is for the overall visibility of the element.

If it is unchecked then the style:

display: none;

is added to the styles and the element is hidden. If it is checked nothing is added and the element is visible.

Do you not want the grid item id?

Does the div change the look or layout of the output? Are you going to have anything else besides text as a list item?

The RepeatGrid allows you to repeat a group of items so the first div is the container for all of them items that get repeated. This is the one that can have the tag name renamed.

The second div is from the Text element. It is a container for the spans of text since each run of text can have different styles and there can be multiple spans. The common styles inherit the formatting from the text container.

What if you changed the tag name on the text to a paragraph?

aruffo3 · March 14, 2019, 1:57pm

Hmmm…

Is it necessary for every element to have an ID?

Since I am not using the generated CSS, that checkbox literally does nothing. I don’t want, or need an ID on every element. If I need an ID, I should be able to just add it on myself through the HTML.

The <div> doesn’t change the appearance, but is adding extra code that is completely unnecessary.

If I make the tag a <p>, I don’t want to have to create extra CSS for the <ul><li><p> to nullify the CSS I have for my <ul><li>. I already have CSS for my <p> and <ul><li> tags globally, that have a set line-height and padding.

I don’t have an issue with the <span>.

I do use the repeat grid for images and text, just not as a list.

I don’t want the plugin to create code that is unnecessary and would bloat the page. This causes extra work for the developer since now I have to go into the code and delete all the ID’s and tags that are not necessary.

I’m attaching the XD file as an example.

Copy of unsemantic.xd.zip (43.9 KB)