feat: Add data-test attribute to picker item remove button h2oai#273

py/examples/picker_selection.py

@@ -14,14 +14,14 @@ async def serve(q: Q):
         ]
     else:
         q.page['example'] = ui.form_card(box='1 1 4 5', items=[
-            ui.picker(name='picker', label='Picker with initial values', choices=[
+            ui.picker(name='picker', label='Picker with initial values and max of 3 choices', choices=[
                 ui.choice(name='spam', label='Spam'),
                 ui.choice(name='eggs', label='Eggs'),
                 ui.choice(name='ham', label='Ham'),
                 ui.choice(name='cheese', label='Cheese'),
                 ui.choice(name='beans', label='Beans'),
                 ui.choice(name='toast', label='Toast'),
-            ], values=['spam', 'eggs']),
+            ], max_choices=3, values=['spam', 'eggs']),
             ui.button(name='show_inputs', label='Submit', primary=True),
         ])
     await q.page.save()

ui/src/picker.test.tsx

@@ -41,6 +41,25 @@ describe('Picker.tsx', () => {
     expect(queryByTestId(name)).toBeInTheDocument()
   })
 
+  it('Does not render data-test attr when max choices reached', () => {
+    const { queryByTestId } = render(<XPicker model={{...pickerProps, values: [name], max_choices: 1}} />)
+    expect(queryByTestId(name)).toBe(null)
+  })
+
+  it('Remove selection so data-test attr for picker renders', () => {
+    const { queryByTestId } = render(<XPicker model={{...pickerProps, values: [name], max_choices: 1}} />)
+    expect(queryByTestId(name)).toBe(null)
+
+    //get the 'remove' button using its data-test attr 
+    const removeButton = (queryByTestId('remove_'+name) as HTMLElement)
+    expect(removeButton).toBeInTheDocument()
+    fireEvent.click(removeButton)
+
+    //now the picker data-test attr is in the DOM
+    expect(queryByTestId(name)).toBeInTheDocument()
+    expect(queryByTestId('remove_'+name)).toBe(null)      
+  })
+
   it('Sets correct args - init', () => {
     render(<XPicker model={pickerProps} />)
     expect(wave.args[name]).toBeNull()

ui/src/picker.tsx

@@ -53,6 +53,10 @@ const pickerSuggestionsProps: Fluent.IBasePickerSuggestionsProps = {
   noResultsFoundText: 'No results found',
 }
 
+const removeButtonIconProps: Fluent.IIconProps = {
+  iconName: 'Cancel'
+}
+
 export const XPicker = ({ model: m }: { model: Picker }) => {
   const
     tags: Fluent.ITag[] = React.useMemo(() => m.choices.map(({ name, label }) => ({ key: name, name: label || name })), [m.choices]),
@@ -79,6 +83,7 @@ export const XPicker = ({ model: m }: { model: Picker }) => {
       {m.label && <Fluent.Label required={m.required}>{m.label}</Fluent.Label>}
       <Fluent.TagPicker
         inputProps={{ 'data-test': m.name } as Fluent.IInputProps}
+        removeButtonIconProps={{ ...removeButtonIconProps, 'data-test' : 'remove_'+m.name } as Fluent.IIconProps}
         removeButtonAriaLabel="Remove"
         onResolveSuggestions={filterSuggestedTags}
         onChange={onChange}