Skip to content

feat(#2120): table - added and modified contextual examples#434

Merged
ArakTaiRoth merged 3 commits into
GovAlta:alphafrom
mxsoco:mxsoco/feat-2120
Oct 7, 2025
Merged

feat(#2120): table - added and modified contextual examples#434
ArakTaiRoth merged 3 commits into
GovAlta:alphafrom
mxsoco:mxsoco/feat-2120

Conversation

@mxsoco
Copy link
Copy Markdown
Collaborator

@mxsoco mxsoco commented Sep 19, 2025

Added the following example:

  • Zebra Stripes
image

Modified the following examples:

  • Table with filters -- Combined filtering through text input with filtering with radio buttons. "Filter" button now makes popover appear. Text input filtering actions through the Enter key
image

-Display numbers in a table so they can be scanned easily -- In the Issue ticket, it was noted that this one should be removed. However, with the example on the Figma file, I kept it in. Please confirm if this should be kept or not.
image

@netlify
Copy link
Copy Markdown

netlify Bot commented Sep 19, 2025

Deploy Preview for abgov-ui-component-docs ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 9cfc641
🔍 Latest deploy log https://app.netlify.com/projects/abgov-ui-component-docs/deploys/68d459c2ca0b890008d25b2c
😎 Deploy Preview https://deploy-preview-434--abgov-ui-component-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@mxsoco mxsoco linked an issue Sep 19, 2025 that may be closed by this pull request
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! I just noticed a minor change with the colour value.

allowCopy={true}
code={`
.goa-table-zebra-stripes > tr:nth-child(even) {
background-color: #F8F8F8;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use a design token instead of a hex value here:
background-color: var(--goa-color-greyscale-50);

@@ -0,0 +1,3 @@
.goa-table-zebra-stripes > tr:nth-child(even) {
background-color: #F8F8F8;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use a design token instead of a hex value here:
background-color: var(--goa-color-greyscale-50);

Comment thread src/examples/tables/TablesExamples.tsx Outdated
@@ -1,16 +1,13 @@
import SortDataInATable from "@examples/sort-data-in-a-table.tsx";
import DisplayNumbersInATableSoTheyCanBeScannedEasily from "@examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.tsx";
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not seeing this example in Figma anymore so I think it's safe to remove.

@mxsoco mxsoco requested a review from bdfranck September 24, 2025 20:56
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked at the deploy preview...

  • ✅ I see a design token is use for colour
  • ✅ I see three examples
  • ✅ I see the correct number 3 in the Examples tab label

Looks good to me! 👍

Image Image Image

@ArakTaiRoth ArakTaiRoth merged commit 1af06c6 into GovAlta:alpha Oct 7, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Table: Design system website contextual example

3 participants