wave
wave copied to clipboard
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:
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: