fix(listitem): fix row actions issue

carbon-design-system · Nov 17, 2020 · 5664f66 · 5664f66
1 parent 23de823
commit 5664f66
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 19 deletions.
diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.jsx
@@ -262,7 +262,7 @@ const DataSeriesFormItem = ({
                 }}
               />
             ),
-            rowActions: [
+            rowActions: () => [
               <Button
                 key={`data-item-${series.dataSourceId}`}
                 renderIcon={Edit16}

diff --git a/src/components/List/ListItem/ListItem.jsx b/src/components/List/ListItem/ListItem.jsx
@@ -167,9 +167,11 @@ const ListItem = ({
       </div>
     ) : null;
 
+  const hasRowActions =
+    rowActions && (typeof rowActions === 'function' || !isEmpty(rowActions));
+
   const renderRowActions = () =>
-    rowActions &&
-    (typeof rowActions === 'function' || rowActions.length > 0) ? (
+    hasRowActions ? (
       <div className={`${iotPrefix}--list-item--content--row-actions`}>
         {typeof rowActions === 'function' ? rowActions() : rowActions}
       </div>
@@ -244,9 +246,7 @@ const ListItem = ({
                     {
                       [`${iotPrefix}--list-item--category`]: isCategory,
                       [`${iotPrefix}--list-item--content--values__disabled`]: disabled,
-                      [`${iotPrefix}--list-item--content--values--value__with-actions`]: !isEmpty(
-                        rowActions
-                      ),
+                      [`${iotPrefix}--list-item--content--values--value__with-actions`]: hasRowActions,
                     }
                   )}
                   title={value}>
@@ -262,9 +262,7 @@ const ListItem = ({
                     `${iotPrefix}--list-item--content--values--value`,
                     `${iotPrefix}--list-item--content--values--value__large`,
                     {
-                      [`${iotPrefix}--list-item--content--values--value__with-actions`]: !isEmpty(
-                        rowActions
-                      ),
+                      [`${iotPrefix}--list-item--content--values--value__with-actions`]: hasRowActions,
                       [`${iotPrefix}--list-item--content--values__disabled`]: disabled,
                     }
                   )}>
@@ -281,9 +279,7 @@ const ListItem = ({
                     {
                       [`${iotPrefix}--list-item--category`]: isCategory,
                       [`${iotPrefix}--list-item--content--values__disabled`]: disabled,
-                      [`${iotPrefix}--list-item--content--values--value__with-actions`]: !isEmpty(
-                        rowActions
-                      ),
+                      [`${iotPrefix}--list-item--content--values--value__with-actions`]: hasRowActions,
                     }
                   )}
                   title={value}>
@@ -295,9 +291,7 @@ const ListItem = ({
                     className={classnames(
                       `${iotPrefix}--list-item--content--values--value`,
                       {
-                        [`${iotPrefix}--list-item--content--values--value__with-actions`]: !isEmpty(
-                          rowActions
-                        ),
+                        [`${iotPrefix}--list-item--content--values--value__with-actions`]: hasRowActions,
                         [`${iotPrefix}--list-item--content--values__disabled`]: disabled,
                       }
                     )}>

diff --git a/src/components/List/ListItem/ListItem.story.jsx b/src/components/List/ListItem/ListItem.story.jsx
@@ -330,7 +330,10 @@ export const WithOverflowMenuRowActions = () => (
     <ListItem
       {...dndProps}
       id="list-item"
-      value={text('value', 'List Item')}
+      value={text(
+        'value',
+        'List Item with really long values does it ellipse when I get really long text'
+      )}
       isExpandable={boolean('isExpandable', true)}
       onExpand={action('onExpand')}
       rowActions={[

diff --git a/src/components/List/ListItem/__snapshots__/ListItem.story.storyshot b/src/components/List/ListItem/__snapshots__/ListItem.story.storyshot
@@ -276,9 +276,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
             >
               <div
                 className="iot--list-item--content--values--value iot--list-item--content--values--value__with-actions"
-                title="List Item"
+                title="List Item with really long values does it ellipse when I get really long text"
               >
-                List Item
+                List Item with really long values does it ellipse when I get really long text
               </div>
               <div
                 className="iot--list-item--content--row-actions"

diff --git a/src/components/List/ListItem/_list-item.scss b/src/components/List/ListItem/_list-item.scss
@@ -175,7 +175,7 @@
         text-overflow: ellipsis;
         padding-right: $spacing-09;
         &__with-actions {
-          padding-right: 0;
+          padding-right: $spacing-06; // save room for the action button
           width: $spacing-05;
         }
         &__large {