Table: Resolves issue where some CSS classes were malformed

[MelSumner]

📌 Summary

If merged, this PR resolves HDS-1491, fixing an issue where some CSS classes on the table component were malformed.

---

👀 Reviewer's checklist:

• +1 Percy if applicable
• Confirm that PR has a changelog update via Changesets if needed

💬 Please consider using conventional comments when reviewing this PR.

[alex-ju]

Is it possible to have a test to check for these classes to prevent future regression?

[MelSumner]

I'm thinking about a linting rule that could be applied universally, but I don't have a well-formed solution just yet.

[alex-ju]

I'm thinking in td-test.js, for example, we can have something like this:

  test('it should render with the appropriate `@align` CSS class', async function (assert) {
    await render(hbs`<Hds::Table::Td id="data-test-table-td" @align="right"/>`);
    assert.dom('#data-test-table-td').hasClass('hds-table__td--text-right');
  });

This way we make sure that the appropriate class applies as intended and prevents one from accidentally mangling the applied class name in the future.

[MelSumner]

ahh yes, I suppose that would address this specific issue, but I guess I was thinking more broadly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
hds-components	✅ Ready (Inspect)	Visit Preview	Jan 31, 2023 at 4:34PM (UTC)
hds-flight-website	✅ Ready (Inspect)	Visit Preview	Jan 31, 2023 at 4:34PM (UTC)
hds-website	✅ Ready (Inspect)	Visit Preview	Jan 31, 2023 at 4:34PM (UTC)

[Dhaulagiri]

Shouldn't the showcase catch this as well?

[alex-ju]

💯

[alex-ju]

Shouldn't the showcase catch this as well?

@Dhaulagiri it was reflected in the showcase – I approved the VRT which showed the difference in alignment

[Dhaulagiri]

@alex-ju thanks for that context! More an issue that we didn't notice when the initial showcase was created 👌

[alex-ju]

@alex-ju thanks for that context! More an issue that we didn't notice when the initial showcase was created 👌

yes, that's true – wanted to flag that we do have an example with alignment to the right; it probably happened during some refactoring