fix/feat: Adjust progress_table_cell_type not to increase table row height #1921

[kaitlyncliu]

The PR fulfills these requirements: (check all the apply)

• [x] It's submitted to the main branch.
• [x] When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
• [x] When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• [x] If changes were made to ui folder, unit tests (make test) still pass.

• [ ] New/updated tests are included

  @kellyycha and I fixed this issue by adding a new keyword argument type in the progress_table_cell_type that allows users to implement a bar style progress cell with the progress value indicated to the left of the bar, reducing the height of the row.

This is how the table.py example looks originally:

Without the Progress column, the row height would look like this, which has a row height that is noticeably shorter than with the Progress:

Our implementation results in a bar that looks like the following and maintains a similar row height to the row without a progress cell:

We default type to the spinner/arc progress indicator so that previously implemented tables will continue to look the same.

The UI and unit tests still pass:

Closes #1921

[kellyycha]

Hi @mturoci I added the python example file called table_progress.py, wrote documentation for https://wave.h2o.ai/docs/widgets/form/table/, changed the attribute from type to compact using make generate, and cleaned up the CSS, but am still unsure about the width of the progress arc and bar being fluid instead of a set number. Please let me know what you think and if there are any more changes necessary!

[mturoci]

The changes look better now. Good job @kaitlyncliu!

am still unsure about the width of the progress arc and bar being fluid instead of a set number.

I meant this:

https://github.com/h2oai/wave/assets/64769322/a5f70c58-2382-4388-8ecd-3491b5224f03

Hint: Have a look at flexbox and its flex-grow prop :)