allow actions to display content independently of if they are in a dr…

…opdown or not
EventStore · Jan 27, 2025 · 9d32b25 · 9d32b25
1 parent 3973781
commit 9d32b25
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 22 deletions.
diff --git a/.changeset/heavy-toes-worry.md b/.changeset/heavy-toes-worry.md
@@ -0,0 +1,5 @@
+---
+'@kurrent-ui/components': minor
+---
+
+Actions have a new prop `displayContent` which allows them to display text content independently of if they are in a dropdown or not.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -65,6 +65,10 @@ export namespace Components {
           * If the action should be disabled.
          */
         "disabled": boolean;
+        /**
+          * If the action should display it's text content.
+         */
+        "displayContent": boolean;
         /**
           * If a dot should be shown on the action, to indicate attention being required.
          */
@@ -100,6 +104,10 @@ export namespace Components {
           * If the action should be disabled.
          */
         "disabled": boolean;
+        /**
+          * If the action should display it's text content.
+         */
+        "displayContent": boolean;
         /**
           * If a dot should be shown on the action, to indicate attention being required.
          */
@@ -129,6 +137,10 @@ export namespace Components {
           * if the action should be disabled.
          */
         "disabled": boolean;
+        /**
+          * If the action should display it's text content.
+         */
+        "displayContent": boolean;
         /**
           * If a dot should be shown on the action, to indicate attention being required.
          */
@@ -1675,6 +1687,10 @@ declare namespace LocalJSX {
           * If the action should be disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If the action should display it's text content.
+         */
+        "displayContent"?: boolean;
         /**
           * If a dot should be shown on the action, to indicate attention being required.
          */
@@ -1710,6 +1726,10 @@ declare namespace LocalJSX {
           * If the action should be disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If the action should display it's text content.
+         */
+        "displayContent"?: boolean;
         /**
           * If a dot should be shown on the action, to indicate attention being required.
          */
@@ -1739,6 +1759,10 @@ declare namespace LocalJSX {
           * if the action should be disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If the action should display it's text content.
+         */
+        "displayContent"?: boolean;
         /**
           * If a dot should be shown on the action, to indicate attention being required.
          */

diff --git a/packages/components/src/components/actions/ActionCopy.tsx b/packages/components/src/components/actions/ActionCopy.tsx
@@ -9,6 +9,8 @@ import type { ToastOptions } from '../toast/types';
 export interface ActionCopyProps {
     /** If the action is within an `c2-action-dropdown`. */
     dropdownItem?: boolean;
+    /** If the action should display it's text content. */
+    displayContent?: boolean;
     /** The value to be copied when clicked. */
     value: string;
     /** If the action should be disabled. */
@@ -26,6 +28,7 @@ export interface ActionCopyProps {
 export const ActionCopy: FunctionalComponent<ActionCopyProps> = (
     {
         dropdownItem = false,
+        displayContent = false,
         value,
         disabled = false,
         icon = [ICON_NAMESPACE, 'copy'],
@@ -35,6 +38,7 @@ export const ActionCopy: FunctionalComponent<ActionCopyProps> = (
 ) => (
     <c2-action
         dropdownItem={dropdownItem}
+        displayContent={displayContent}
         action={copyText({ value, toast })}
         disabled={disabled}
         icon={icon}

diff --git a/packages/components/src/components/actions/ActionDelete.tsx b/packages/components/src/components/actions/ActionDelete.tsx
@@ -10,6 +10,8 @@ import type { ToastOptions } from '../toast/types';
 export interface ActionDeleteProps {
     /** If the action is within an `c2-action-dropdown`. */
     dropdownItem?: boolean;
+    /** If the action should display it's text content. */
+    displayContent?: boolean;
     /** The name of the item to delete. */
     description: string;
     /** The function to call to delete the item. */
@@ -32,6 +34,7 @@ export interface ActionDeleteProps {
  */
 export const ActionDelete: FunctionalComponent<ActionDeleteProps> = ({
     dropdownItem = false,
+    displayContent = false,
     description,
     deleteItem,
     disabled = false,
@@ -42,6 +45,7 @@ export const ActionDelete: FunctionalComponent<ActionDeleteProps> = ({
 }) => (
     <c2-action-with-confirmation
         dropdownItem={dropdownItem}
+        displayContent={displayContent}
         action={handleDeletion({ deleteItem, description, toast })}
         disabled={disabled}
         icon={icon}

diff --git a/packages/components/src/components/actions/action-link/action-link.tsx b/packages/components/src/components/actions/action-link/action-link.tsx
@@ -15,6 +15,8 @@ export class ESActionLink {
 
     /** If the action is within an `c2-action-dropdown`. */
     @Prop({ reflect: true, attribute: 'dropdown-item' }) dropdownItem = false;
+    /** If the action should display it's text content. */
+    @Prop() displayContent = false;
     /** The url to go to when clicked. */
     @Prop() url!: string;
     /** If the action should be disabled. */
@@ -25,6 +27,8 @@ export class ESActionLink {
     @Prop() dot?: HTMLC2BadgeElement['color'];
 
     render() {
+        const showContent = this.displayContent || this.dropdownItem;
+
         return (
             <c2-button-link
                 url={this.url}
@@ -36,11 +40,11 @@ export class ESActionLink {
                     variant={'dot'}
                     color={this.dot}
                     count={this.dot ? 1 : 0}
-                    slot={this.dropdownItem ? 'before' : undefined}
+                    slot={showContent ? 'before' : undefined}
                 >
                     <c2-icon icon={this.icon} size={20} />
                 </c2-badge>
-                {this.dropdownItem && <slot />}
+                {showContent && <slot />}
             </c2-button-link>
         );
     }

diff --git a/packages/components/src/components/actions/action-link/readme.md b/packages/components/src/components/actions/action-link/readme.md
@@ -27,13 +27,14 @@ export default () => (
 
 ## Properties
 
-| Property            | Attribute       | Description                                                                   | Type                                                    | Default     |
-| ------------------- | --------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
-| `disabled`          | `disabled`      | If the action should be disabled.                                             | `boolean`                                               | `false`     |
-| `dot`               | `dot`           | If a dot should be shown on the action, to indicate attention being required. | `"error" \| "okay" \| "warning" \| undefined`           | `undefined` |
-| `dropdownItem`      | `dropdown-item` | If the action is within an `c2-action-dropdown`.                              | `boolean`                                               | `false`     |
-| `icon` _(required)_ | `icon`          | The icon to show for the action.                                              | `[namespace: string \| symbol, name: string] \| string` | `undefined` |
-| `url` _(required)_  | `url`           | The url to go to when clicked.                                                | `string`                                                | `undefined` |
+| Property            | Attribute         | Description                                                                   | Type                                                    | Default     |
+| ------------------- | ----------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
+| `disabled`          | `disabled`        | If the action should be disabled.                                             | `boolean`                                               | `false`     |
+| `displayContent`    | `display-content` | If the action should display it's text content.                               | `boolean`                                               | `false`     |
+| `dot`               | `dot`             | If a dot should be shown on the action, to indicate attention being required. | `"error" \| "okay" \| "warning" \| undefined`           | `undefined` |
+| `dropdownItem`      | `dropdown-item`   | If the action is within an `c2-action-dropdown`.                              | `boolean`                                               | `false`     |
+| `icon` _(required)_ | `icon`            | The icon to show for the action.                                              | `[namespace: string \| symbol, name: string] \| string` | `undefined` |
+| `url` _(required)_  | `url`             | The url to go to when clicked.                                                | `string`                                                | `undefined` |
 
 
 ## Slots

diff --git a/...s/components/src/components/actions/action-with-confirmation/action-with-confirmation.tsx b/...s/components/src/components/actions/action-with-confirmation/action-with-confirmation.tsx
@@ -16,6 +16,8 @@ export class EsActionWithConfirmation {
 
     /** If the action is within an `c2-action-dropdown`. */
     @Prop({ reflect: true, attribute: 'dropdown-item' }) dropdownItem = false;
+    /** If the action should display it's text content. */
+    @Prop() displayContent = false;
     /** The action to take when the button is clicked. */
     @Prop() action!: () => any;
     /** if the action should be disabled. */
@@ -32,6 +34,8 @@ export class EsActionWithConfirmation {
     @State() open: boolean = false;
 
     render() {
+        const showContent = this.displayContent || this.dropdownItem;
+
         return (
             <Host>
                 <c2-button
@@ -41,14 +45,14 @@ export class EsActionWithConfirmation {
                     disabled={this.disabled}
                 >
                     <c2-badge
-                        slot={this.dropdownItem ? 'before' : undefined}
+                        slot={showContent ? 'before' : undefined}
                         variant={'dot'}
                         color={this.dot}
                         count={this.dot ? 1 : 0}
                     >
                         <c2-icon icon={this.icon} size={20} />
                     </c2-badge>
-                    {this.dropdownItem && <slot />}
+                    {showContent && <slot />}
                 </c2-button>
                 {!this.disabled && (
                     <c2-portal

diff --git a/packages/components/src/components/actions/action-with-confirmation/readme.md b/packages/components/src/components/actions/action-with-confirmation/readme.md
@@ -45,6 +45,7 @@ export default () => (
 | --------------------- | ----------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
 | `action` _(required)_ | --                | The action to take when the button is clicked.                                | `() => any`                                             | `undefined` |
 | `disabled`            | `disabled`        | if the action should be disabled.                                             | `boolean`                                               | `false`     |
+| `displayContent`      | `display-content` | If the action should display it's text content.                               | `boolean`                                               | `false`     |
 | `dot`                 | `dot`             | If a dot should be shown on the action, to indicate attention being required. | `"error" \| "okay" \| "warning" \| undefined`           | `undefined` |
 | `dropdownItem`        | `dropdown-item`   | If the action is within an `c2-action-dropdown`.                              | `boolean`                                               | `false`     |
 | `icon` _(required)_   | `icon`            | The icon to show for the action.                                              | `[namespace: string \| symbol, name: string] \| string` | `undefined` |

diff --git a/packages/components/src/components/actions/action.css b/packages/components/src/components/actions/action.css
@@ -4,7 +4,7 @@
     & > c2-button,
     & > c2-button-link {
         --current-color: var(--color-shade-60);
-        --spacing: 6px;
+        --spacing: var(--spacing-1);
         --height: 32px;
 
         &[disabled] {
@@ -19,7 +19,7 @@
         --border-radius: 0;
         --align-inner: flex-start;
         --height: 46px;
-        --spacing: 12px;
+        --spacing: var(--spacing-1_5);
         width: 100%;
 
         &::part(button),

diff --git a/packages/components/src/components/actions/action/action.tsx b/packages/components/src/components/actions/action/action.tsx
@@ -15,6 +15,8 @@ export class ESActionGeneric {
 
     /** If the action is within an `c2-action-dropdown`. */
     @Prop({ reflect: true, attribute: 'dropdown-item' }) dropdownItem = false;
+    /** If the action should display it's text content. */
+    @Prop() displayContent = false;
     /** The action to take when the button is clicked. */
     @Prop() action!: (e: MouseEvent) => any;
     /** If the action should be disabled. */
@@ -25,6 +27,7 @@ export class ESActionGeneric {
     @Prop() dot?: HTMLC2BadgeElement['color'];
 
     render() {
+        const showContent = this.displayContent || this.dropdownItem;
         return (
             <c2-button
                 onClick={this.action}
@@ -33,14 +36,14 @@ export class ESActionGeneric {
                 disabled={this.disabled}
             >
                 <c2-badge
-                    slot={this.dropdownItem ? 'before' : undefined}
+                    slot={showContent ? 'before' : undefined}
                     variant={'dot'}
                     color={this.dot}
                     count={this.dot ? 1 : 0}
                 >
                     <c2-icon icon={this.icon} size={20} />
                 </c2-badge>
-                {this.dropdownItem && <slot />}
+                {showContent && <slot />}
             </c2-button>
         );
     }

diff --git a/packages/components/src/components/actions/action/readme.md b/packages/components/src/components/actions/action/readme.md
@@ -35,13 +35,14 @@ export default () => (
 
 ## Properties
 
-| Property              | Attribute       | Description                                                                   | Type                                                    | Default     |
-| --------------------- | --------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
-| `action` _(required)_ | --              | The action to take when the button is clicked.                                | `(e: MouseEvent) => any`                                | `undefined` |
-| `disabled`            | `disabled`      | If the action should be disabled.                                             | `boolean`                                               | `false`     |
-| `dot`                 | `dot`           | If a dot should be shown on the action, to indicate attention being required. | `"error" \| "okay" \| "warning" \| undefined`           | `undefined` |
-| `dropdownItem`        | `dropdown-item` | If the action is within an `c2-action-dropdown`.                              | `boolean`                                               | `false`     |
-| `icon` _(required)_   | `icon`          | The icon to show for the action.                                              | `[namespace: string \| symbol, name: string] \| string` | `undefined` |
+| Property              | Attribute         | Description                                                                   | Type                                                    | Default     |
+| --------------------- | ----------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
+| `action` _(required)_ | --                | The action to take when the button is clicked.                                | `(e: MouseEvent) => any`                                | `undefined` |
+| `disabled`            | `disabled`        | If the action should be disabled.                                             | `boolean`                                               | `false`     |
+| `displayContent`      | `display-content` | If the action should display it's text content.                               | `boolean`                                               | `false`     |
+| `dot`                 | `dot`             | If a dot should be shown on the action, to indicate attention being required. | `"error" \| "okay" \| "warning" \| undefined`           | `undefined` |
+| `dropdownItem`        | `dropdown-item`   | If the action is within an `c2-action-dropdown`.                              | `boolean`                                               | `false`     |
+| `icon` _(required)_   | `icon`            | The icon to show for the action.                                              | `[namespace: string \| symbol, name: string] \| string` | `undefined` |
 
 
 ## Slots