fix(#1466): apply padding when variant=relaxed

[syedszeeshan]

Instead of using JS for dom manipulation and adding 'relaxed' class to all eligible tds, the customElement is forced to spit out 'variant' attribute, and then the css selector goa-table[variant='relaxed'] td does work. See Chris' last comment below

[bdfranck]

Awesome! You could remove the old unused CSS:

ui-components/libs/web-components/src/assets/css/components.css

Lines 83 to 85 in b690488

	goa-table.relaxed td {
	padding: 1rem;
	}

[syedszeeshan]

screenshot below after the above changes, Table with relaxed vs normal spacing

[lizhuomeng71]

Issues is verified on Chrome, Firefox, and edge for react and angular, for mobile and desktop site

[chrisolsen]

I am pretty sure this can be fixed with the following updates to the component.css file. Note: Padding values used are just test values

goa-table[variant=normal] td {
  padding: 0.25rem; 
}

Below is what I now see when I set the table to compact

And Relaxed

[chrisolsen]

My code worked since I was testing via Angular which allowed the defined variant prop to be rendered in the DOM, then allowing my css selector to work; this did not work when testing in the Svelte playground.

To fix this problem the svelte:option needs to be changed to the following.

<svelte:options customElement={{
  tag: "goa-table",
  props: {
    variant: { reflect: true }
  }
}} />

This will ensure that the prop is visible in the DOM, and the previously defined css rule can take affect.

[tzuge]

🎉 This PR is included in version 1.17.0-alpha.44 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 4.17.0-alpha.23 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.20.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 4.20.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 3.0.0-alpha.4 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 3.0.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀