fix: Misaligned 'Remove' button when no label is present in the attribute editor

[connorlanigan]

When there is no visible label on any of the columns (e.g. because the label is inherited from a parent form field), the 'Remove' button had an incorrect vertical offset applied.

Description

This change removes the additional padding from the button if no column has a label. This is mainly the case when there is only a single column and the attribute editor is inside a FormField (which provides the visible and screenreader-visible label).

Related links, issue #, if available: n/a

How has this been tested?

Manual testing (including with a screenreader). I added a new dev page with an example usage. Available locally at http://localhost:8080/#/light/attribute-editor/form-field-label

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

Base: 92.61% // Head: 92.59% // Decreases project coverage by -0.01% ⚠️

Coverage data is based on head (f0de6d9) compared to base (aa135d7).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #528      +/-   ##
==========================================
- Coverage   92.61%   92.59%   -0.02%     
==========================================
  Files         567      568       +1     
  Lines       16131    16165      +34     
  Branches     4417     4426       +9     
==========================================
+ Hits        14939    14968      +29     
- Misses       1112     1116       +4     
- Partials       80       81       +1     

Impacted Files	Coverage Δ
src/code-editor/status-bar.tsx	100.00% <ø> (ø)
src/attribute-editor/row.tsx	100.00% <100.00%> (ø)
src/internal/hooks/use-analytics/index.ts	100.00% <100.00%> (ø)
src/wizard/index.tsx	100.00% <100.00%> (ø)
src/wizard/wizard-form.tsx	100.00% <100.00%> (ø)
src/pie-chart/pie-chart.tsx	77.70% <0.00%> (-0.44%)	⬇️
src/mixed-line-bar-chart/chart-container.tsx	90.50% <0.00%> (-0.23%)	⬇️
src/area-chart/model/use-chart-model.ts	55.35% <0.00%> (-0.20%)	⬇️
src/area-chart/internal.tsx	100.00% <0.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[jperals]

There is also a layout issue when one label is provided but not the other. Do we want to support that use case as well?

[connorlanigan]

When there are multiple columns, they should all have labels, in order to differentiate what each column is for. If one of the columns doesn't have a label, it would be very difficult to users to know what that column is and what they should put there, so it's not really a supported or expected use case.

This fix is primarily for the special case where there is only a single column. In that case, having a label on the column is redundant if there is already a visible label provided by a FormField (and this label is also used for announcing the column's input fields to screenreaders), so it is an expected use case to have no label in single-column situations.