D8CORE-1261: Revised table styles.

[sherakama]

READY FOR REVIEW

Summary

• Updates default styles for all tables

Needed By (Date)

• At your leisure.

Urgency

• None

Steps to Test

1. Review code
2. Click tugboat and review elements page for table styles

See Also

• PR Checklist

[sherakama]

We may need a page of all html elements to review this.

[yvonnetangsu]

We may need a page of all html elements to review this.

Let me know if you need anything from me.

[sherakama]

I'm open to ideas. Do we want a public page with all the HTML elements we have styled for both testing for us and for the public?

[yvonnetangsu]

I'm open to ideas. Do we want a public page with all the HTML elements we have styled for both testing for us and for the public?

Yeah, either that or we separate things into child pages, e.g., one for all form elements. Actually, perhaps we make a list of all the HTML elements we want to include then we could decide if it's ok to put them all on one page or if that gets too long?

Things I can think of:

• Tables
• Form stuff (text input, text area, radio/checkbox, select dropdown, submit buttons, whole form etc.)
• lists - default ul, ol, and dl, also our custom styles, e.g., Kerri's list with lines in between, big number lists

Anything else?

[sherakama]

Yeah, it might be a good idea to get them separated. We are often asked for form elements and should look into providing not only more styled options but components for them as well. Anyhow, my vote is separation.

[yvonnetangsu]

Yeah, it might be a good idea to get them separated. We are often asked for form elements and should look into providing not only more styled options but components for them as well. Anyhow, my vote is separation.

Sounds good to me. I vote for separation too. I've been wanting to do/see some styling on our form elements also!

[sherakama]

If you'd like to take first pass at this please do as I don't think I will get the time to spend on it I would like to this month.

[sherakama]

FYI
@buttonwillowsix @jenbreese @kerri-augenstein

[kerri-augenstein]

@yvonnetangsu @sherakama, the Adapt project has specific needs for FORM ELEMENTS! YAY! So we'll definitely be creating and executing them at the root of Decanter, and sub-theming off of those for SAA/OOD, within the next few months.

[yvonnetangsu]

@yvonnetangsu @sherakama, the Adapt project has specific needs for FORM ELEMENTS! YAY! So we'll definitely be creating and executing them at the root of Decanter, and sub-theming off of those for SAA/OOD, within the next few months.

Cool - let me know if you have any designs for these, Kerri (both default and variants). I'd be happy to write myself a ticket, or @jenbreese and I could each take on some elements (just a suggestion and I totally know you guys might be super busy with D8).

[yvonnetangsu]

@yvonnetangsu @sherakama, the Adapt project has specific needs for FORM ELEMENTS! YAY! So we'll definitely be creating and executing them at the root of Decanter, and sub-theming off of those for SAA/OOD, within the next few months.

Cool - let me know if you have any designs for these, Kerri (both default and variants). I'd be happy to write myself a ticket, or @jenbreese and I could each take on some elements (just a suggestion and I totally know you guys might be super busy with D8).

@kerri-augenstein @buttonwillowsix

[kerri-augenstein]

@yvonnetangsu, hahaha, designs... hahahaha. Will be working on 'em in the next few weeks and getting design feedback from y'all.

[sherakama]

Putting up for review so it doesn't fall behind again.

[yvonnetangsu]

Putting up for review so it doesn't fall behind again.

@sherakama Just double checking - the table element isn't actually on the tugboat preview right?

[jenbreese]

@yvonnetangsu and @sherakama I couldn't find a table element either.

[sherakama]

@yvonnetangsu @jenbreese

I totally thought we had an elements page somewhere. Guess that page is gone. An alternative to test this branch would be to pull it into your current work and quickly set up a table.

[sherakama]

Here is a live URL of this code in action: https://amptesting.sites.stanford.edu/wysiwyg/test-tables-layout-full-width

[yvonnetangsu]

@yvonnetangsu @jenbreese

I totally thought we had an elements page somewhere. Guess that page is gone. An alternative to test this branch would be to pull it into your current work and quickly set up a table.

Yeah, there's one on the previous version of the site, but not on this Netlify one.

Are we going with this design for the default table style? Big improvements over the current one (you fixed the double border issue). Just want to know if there's a design we're going for.

[kerri-augenstein]

@yvonnetangsu @jenbreese, yea, I think we should go with the design that's shown on the page Shea shared.

https://amptesting.sites.stanford.edu/wysiwyg/test-tables-layout-full-width

We tweaked some things that I think work well in the root of Decanter.

[yvonnetangsu]

Another question - what do you think about removing the margin-bottom from the last element in each table cell, eg, a <p>? Since the table cell padding already take care of the spacing at the bottom. Other than that and the outside margin, looks great to me! 👍

[yvonnetangsu]

^ ^ ^ That's the margin-bottom I was referring to.

And have you seen this newer MARTY video btw? 😄
https://www.youtube.com/watch?v=3x3SqeSdrAE

[jenbreese]

I like the idea of removing the margin-bottom. I think it would surprise users to have the extra space in a table.

[sherakama]

@yvonnetangsu @jenbreese ready for review again.

[jenbreese]

I think we want something more like this. But I don't think we want to use the * or to list out all the possibilities.

&:last-child {
        p {
          @include margin(null null 0 null);
        }
      }

As it is in now, I get this look. (Borders I added to make easier to see.)

[sherakama]

Ok, I changed it to target the child elements. I think we have to use * here as it could really be anything inside that td/th.

[yvonnetangsu]

Thanks for the fix! Looks good to me for base table style. GTG

[jenbreese]

@yvonnetangsu Want me to merge since you approved?

[yvonnetangsu]

@yvonnetangsu Want me to merge since you approved?

Hi @jenbreese Sure! Was waiting to see if you have anything else to add 😄 Thanks!

[sherakama]

Woot. 6 months of work. YAY!

[yvonnetangsu]

Woot. 6 months of work. YAY!

You're doing better than me at un-staling 😂 🎉