feat: Allow alignment for ui.text #1370

Closes #1370

The PR fulfills these requirements: (check all that 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.
[x] 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:

doc_issue_1370

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:

output_example_issue_1370

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:

wave_ui_test_issue_1370

h2oai / wave

feat: Allow alignment for ui.text #1370 #2336