Table Striped Variation Does Not Work

[thomas-j-moffett]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Primitive components

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

No response

Please describe your bug.

The table variation of "striped" doesn't work. I am using version 6.1.0 of @aws-amplify/ui-react package.

What's the expected behaviour?

The striped variation should make the table striped.

Help us reproduce the bug!

This can easily be seen in your own documentation here: https://ui.docs.amplify.aws/react/components/table?tab=#variation

It seems to work if I manually add data-variation="striped" to the table element while modifying the HTML in Chrome dev tools on your documentation page linked above. It seems that there is a amplify-table--bordered CSS class generated for the bordered one, and there is a corresponding CSS rule in the source. There is also a amplify-table--striped CSS class generated for the striped table, but no corresponding CSS rule could be found. I did find the data-variation="striped" in the source which is why I tried it out.

Code Snippet

// Put your code below this line.

Console log output

No response

Additional information and screenshots

No response

[ioanabrooks]

@thomas-j-moffett Thank you for bringing this to our attention, will be addressed asap.

[ioanabrooks]

@thomas-j-moffett We just released @aws-amplify/[email protected] with this fix!

[thomas-j-moffett]

Thanks!