feat: Changes from review comments, remove max_choices references and…

… code simplification h2oai#273
dbranley · Feb 21, 2024 · 5b397a9 · 5b397a9
1 parent e52bc88
commit 5b397a9
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 19 deletions.
diff --git a/py/examples/picker_selection.py b/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 and max of 3 choices', choices=[
+            ui.picker(name='picker', label='Picker with initial values', 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'),
-            ], max_choices=3, values=['spam', 'eggs']),
+            ], values=['spam', 'eggs']),
             ui.button(name='show_inputs', label='Submit', primary=True),
         ])
     await q.page.save()
diff --git a/ui/src/picker.test.tsx b/ui/src/picker.test.tsx
@@ -41,22 +41,12 @@ 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)
+  it('Renders data-test attr on selection remove button', () => {
+    const { queryByTestId } = render(<XPicker model={{...pickerProps, values: [name]}} />)
 
-    //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)      
   })
 

diff --git a/ui/src/picker.tsx b/ui/src/picker.tsx
@@ -53,10 +53,6 @@ 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]),
@@ -83,7 +79,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}
+        removeButtonIconProps={{ iconName: 'Cancel', 'data-test' : 'remove_' + m.name } as Fluent.IIconProps}
         removeButtonAriaLabel="Remove"
         onResolveSuggestions={filterSuggestedTags}
         onChange={onChange}