feat: Allow alignment for ui.text #1370

[dbranley]

Closes #1370

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

• It's submitted to the main branch.
• 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).
• When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• If changes were made to ui folder, unit tests (make test) still pass.
• New/updated tests are included

As requested in the ticket, I have added a new align prop in text.tsx. The possible values are start, end, center, and justify, with a default of start. This new prop is then passed down through the style prop for Fluent.Text. The code change in ui/src/text.tsx looks like this:

  /** The alignment of the text content. Defaults to 'start'. */
  align?: 'start' | 'end' | 'center' | 'justify'

    <Fluent.Text data-test={name} variant={toTextVariant(size || 'm')} style={{ textAlign: align || 'start'}} block className='w-text'>

I then ran the make generate target to update the generated python and R code to reflect this new attribute in files, such as py/h2o_wave/h2o_wave/ui.py.

I have updated the documentation in website/widgets/form/text.md with a new section called Alignment. I ran the make targets to regenerate the documentation artifacts and you can see a screen shot of that here:

I tested this with a new custom python example that uses the new align attribute available for ui.text. You can find this at py/examples/text_alignment.py. And here is a screen shot of the new example:

I created a new unit test in text.test.tsx, where it tests each of the possible values for the new prop, along with confirming it defaults to start. Here is a snipit from the test:

const textAlignPropValues: Text['align'][] = ['start', 'end', 'center', 'justify']

  it('Renders Text with the align prop', () => {
    const { queryByTestId, rerender } = render(<XText {...textProps} />)
    expect(queryByTestId(name)).toBeInTheDocument()
    expect(queryByTestId(name)).toHaveAttribute('style','text-align: start;')     
    textAlignPropValues.forEach(textAlignPropValue => {
      rerender(<XText {...textProps} align={textAlignPropValue} />)
      expect(queryByTestId(name)).toBeInTheDocument()
      expect(queryByTestId(name)).toHaveAttribute('style','text-align: '+textAlignPropValue+';')      
    })
  }) 

I ran all the ui tests and confirmed they passed. Here is a screen shot for that:

[mturoci]

Good job @dbranley! A few minor comments and good to go.

[mturoci]

TLDR: This unit test can be removed.

No need to unit test visual things as they are very coupled to the implementation - will break on refactor. We have visual regression tests for this scenario that can be used to verify no other components changed unexpectedly.

If you are interested, you can checkout to main, run make build-ui to build the UI, then cd tools/showcase and make visual-regression. If you have never run it before, it will create base snapshots that will be used for comparison in the next run. Now checkout your feature branch, build UI again and run visual regression tests again. It parses all the examples in documentation and compares against your baseline (main). It's super strict so false positives are very likely, but still good enough to quickly see if something broke or not. One more thing - if new examples are inserted (like it is now in text.md), the order will not match and you will get a lot of mismatches. In that case, you just check if the screenshots look "normal" since there is no way around that.

[dbranley]

@mturoci Thanks for explaining this about the visual regression tests, I hadn't noticed it yet! I ran through this and think this is a good testing tool. I'll be sure to run this as a check before submitting any UI changes in the future.

[mturoci]

No need to also include sizes, showing different alignments with default size is enough. The more concise the examples the better.

[dbranley]

@mturoci Done! Here's a screen shot of the new example:

[dbranley]

@mturoci Thanks for all the great feedback! I think I've take care of all the points, but please let me know if I missed something or you notice something else. Thanks!

[mturoci]

Perfect!