CDC #60 - Adding customization for action button sizes to Items

performant-software · Jan 9, 2024 · b3a319b · b3a319b
1 parent 39ef2df
commit b3a319b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/packages/semantic-ui/src/components/Items.js b/packages/semantic-ui/src/components/Items.js
@@ -275,6 +275,7 @@ class ItemsClass extends Component<Props, {}> {
                 icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
                 key={actionIndex}
                 onClick={action.onClick.bind(this, item)}
+                size={action.size}
               />
             ))}
             { this.isSelectable() && (
@@ -410,6 +411,7 @@ class ItemsClass extends Component<Props, {}> {
               key={actionIndex}
               icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
               onClick={action.onClick.bind(this, item)}
+              size={action.size}
             />
           ))}
         </Item.Content>

diff --git a/packages/storybook/src/semantic-ui/Items.stories.js b/packages/storybook/src/semantic-ui/Items.stories.js
@@ -185,4 +185,16 @@ export const ItemsPerRow = useDragDrop(() => (
     renderHeader={(item) => <Header content={item.header} />}
     renderMeta={(item) => item.id}
   />
+));
+
+export const ButtonSize = useDragDrop(() => (
+  <Items
+    actions={_.map(actions, (a) => ({ ...a, size: 'mini' }))}
+    items={items}
+    onCopy={action('copy')}
+    onDelete={action('delete')}
+    renderImage={(item) => <Image alt={item.image_alt} src={item.image} />}
+    renderHeader={(item) => <Header content={item.header} />}
+    renderMeta={(item) => item.id}
+  />
 ));