feat(design-system): action menu classname pass down [AR-43506]

Author: mmurawski-dn

.changeset/real-clocks-flow.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+- Add `className` option to the SecondaryRowAction props

packages/design-system/src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx

@@ -76,6 +76,7 @@ export const DsTableCell = <TData, TValue>({
 											key={i}
 											value={label}
 											disabled={isDisabled}
+											className={action.className}
 											onClick={(e) => e.stopPropagation()}
 											onSelect={() => action.onClick(row.original)}
 										>

packages/design-system/src/components/ds-table/components/ds-table-cell/ds-table-cell.types.ts

@@ -39,6 +39,11 @@ export type SecondaryRowAction<TData> = Omit<RowAction<TData>, 'icon'> & {
 	 * Optional icon to be displayed for the action
 	 */
 	icon?: IconType;
+
+	/**
+	 * Optional className to apply custom styling to the action item
+	 */
+	className?: string;
 };
 
 /**

packages/design-system/src/components/ds-table/ds-table.stories.module.scss

@@ -369,3 +369,7 @@
 	white-space: pre-wrap;
 	word-break: break-all;
 }
+
+.destructiveAction {
+	color: var(--system-status-error);
+}

packages/design-system/src/components/ds-table/ds-table.stories.tsx

@@ -491,6 +491,7 @@ export const WithRowActions: Story = {
 				label: 'Delete',
 				tooltip: 'Delete this row',
 				disabled: (data) => data.status === 'single',
+				className: styles.destructiveAction,
 				onClick: (data) => {
 					alert(`Delete action for ${data.firstName}`);
 				},