Skip to content

Commit 9d32b25

Browse files
George-PayneGeorge-Payne
committed
allow actions to display content independently of if they are in a dropdown or not
1 parent 3973781 commit 9d32b25

File tree

11 files changed

+73
-22
lines changed

11 files changed

+73
-22
lines changed

‎.changeset/heavy-toes-worry.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@kurrent-ui/components': minor
3+
---
4+
5+
Actions have a new prop `displayContent` which allows them to display text content independently of if they are in a dropdown or not.

‎packages/components/src/components.d.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@ export namespace Components {
6565
* If the action should be disabled.
6666
*/
6767
"disabled": boolean;
68+
/**
69+
* If the action should display it's text content.
70+
*/
71+
"displayContent": boolean;
6872
/**
6973
* If a dot should be shown on the action, to indicate attention being required.
7074
*/
@@ -100,6 +104,10 @@ export namespace Components {
100104
* If the action should be disabled.
101105
*/
102106
"disabled": boolean;
107+
/**
108+
* If the action should display it's text content.
109+
*/
110+
"displayContent": boolean;
103111
/**
104112
* If a dot should be shown on the action, to indicate attention being required.
105113
*/
@@ -129,6 +137,10 @@ export namespace Components {
129137
* if the action should be disabled.
130138
*/
131139
"disabled": boolean;
140+
/**
141+
* If the action should display it's text content.
142+
*/
143+
"displayContent": boolean;
132144
/**
133145
* If a dot should be shown on the action, to indicate attention being required.
134146
*/
@@ -1675,6 +1687,10 @@ declare namespace LocalJSX {
16751687
* If the action should be disabled.
16761688
*/
16771689
"disabled"?: boolean;
1690+
/**
1691+
* If the action should display it's text content.
1692+
*/
1693+
"displayContent"?: boolean;
16781694
/**
16791695
* If a dot should be shown on the action, to indicate attention being required.
16801696
*/
@@ -1710,6 +1726,10 @@ declare namespace LocalJSX {
17101726
* If the action should be disabled.
17111727
*/
17121728
"disabled"?: boolean;
1729+
/**
1730+
* If the action should display it's text content.
1731+
*/
1732+
"displayContent"?: boolean;
17131733
/**
17141734
* If a dot should be shown on the action, to indicate attention being required.
17151735
*/
@@ -1739,6 +1759,10 @@ declare namespace LocalJSX {
17391759
* if the action should be disabled.
17401760
*/
17411761
"disabled"?: boolean;
1762+
/**
1763+
* If the action should display it's text content.
1764+
*/
1765+
"displayContent"?: boolean;
17421766
/**
17431767
* If a dot should be shown on the action, to indicate attention being required.
17441768
*/

‎packages/components/src/components/actions/ActionCopy.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import type { ToastOptions } from '../toast/types';
99
export interface ActionCopyProps {
1010
/** If the action is within an `c2-action-dropdown`. */
1111
dropdownItem?: boolean;
12+
/** If the action should display it's text content. */
13+
displayContent?: boolean;
1214
/** The value to be copied when clicked. */
1315
value: string;
1416
/** If the action should be disabled. */
@@ -26,6 +28,7 @@ export interface ActionCopyProps {
2628
export const ActionCopy: FunctionalComponent<ActionCopyProps> = (
2729
{
2830
dropdownItem = false,
31+
displayContent = false,
2932
value,
3033
disabled = false,
3134
icon = [ICON_NAMESPACE, 'copy'],
@@ -35,6 +38,7 @@ export const ActionCopy: FunctionalComponent<ActionCopyProps> = (
3538
) => (
3639
<c2-action
3740
dropdownItem={dropdownItem}
41+
displayContent={displayContent}
3842
action={copyText({ value, toast })}
3943
disabled={disabled}
4044
icon={icon}

‎packages/components/src/components/actions/ActionDelete.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import type { ToastOptions } from '../toast/types';
1010
export interface ActionDeleteProps {
1111
/** If the action is within an `c2-action-dropdown`. */
1212
dropdownItem?: boolean;
13+
/** If the action should display it's text content. */
14+
displayContent?: boolean;
1315
/** The name of the item to delete. */
1416
description: string;
1517
/** The function to call to delete the item. */
@@ -32,6 +34,7 @@ export interface ActionDeleteProps {
3234
*/
3335
export const ActionDelete: FunctionalComponent<ActionDeleteProps> = ({
3436
dropdownItem = false,
37+
displayContent = false,
3538
description,
3639
deleteItem,
3740
disabled = false,
@@ -42,6 +45,7 @@ export const ActionDelete: FunctionalComponent<ActionDeleteProps> = ({
4245
}) => (
4346
<c2-action-with-confirmation
4447
dropdownItem={dropdownItem}
48+
displayContent={displayContent}
4549
action={handleDeletion({ deleteItem, description, toast })}
4650
disabled={disabled}
4751
icon={icon}

‎packages/components/src/components/actions/action-link/action-link.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export class ESActionLink {
1515

1616
/** If the action is within an `c2-action-dropdown`. */
1717
@Prop({ reflect: true, attribute: 'dropdown-item' }) dropdownItem = false;
18+
/** If the action should display it's text content. */
19+
@Prop() displayContent = false;
1820
/** The url to go to when clicked. */
1921
@Prop() url!: string;
2022
/** If the action should be disabled. */
@@ -25,6 +27,8 @@ export class ESActionLink {
2527
@Prop() dot?: HTMLC2BadgeElement['color'];
2628

2729
render() {
30+
const showContent = this.displayContent || this.dropdownItem;
31+
2832
return (
2933
<c2-button-link
3034
url={this.url}
@@ -36,11 +40,11 @@ export class ESActionLink {
3640
variant={'dot'}
3741
color={this.dot}
3842
count={this.dot ? 1 : 0}
39-
slot={this.dropdownItem ? 'before' : undefined}
43+
slot={showContent ? 'before' : undefined}
4044
>
4145
<c2-icon icon={this.icon} size={20} />
4246
</c2-badge>
43-
{this.dropdownItem && <slot />}
47+
{showContent && <slot />}
4448
</c2-button-link>
4549
);
4650
}

‎packages/components/src/components/actions/action-link/readme.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,14 @@ export default () => (
2727

2828
## Properties
2929

30-
| Property | Attribute | Description | Type | Default |
31-
| ------------------- | --------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
32-
| `disabled` | `disabled` | If the action should be disabled. | `boolean` | `false` |
33-
| `dot` | `dot` | If a dot should be shown on the action, to indicate attention being required. | `"error" \| "okay" \| "warning" \| undefined` | `undefined` |
34-
| `dropdownItem` | `dropdown-item` | If the action is within an `c2-action-dropdown`. | `boolean` | `false` |
35-
| `icon` _(required)_ | `icon` | The icon to show for the action. | `[namespace: string \| symbol, name: string] \| string` | `undefined` |
36-
| `url` _(required)_ | `url` | The url to go to when clicked. | `string` | `undefined` |
30+
| Property | Attribute | Description | Type | Default |
31+
| ------------------- | ----------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
32+
| `disabled` | `disabled` | If the action should be disabled. | `boolean` | `false` |
33+
| `displayContent` | `display-content` | If the action should display it's text content. | `boolean` | `false` |
34+
| `dot` | `dot` | If a dot should be shown on the action, to indicate attention being required. | `"error" \| "okay" \| "warning" \| undefined` | `undefined` |
35+
| `dropdownItem` | `dropdown-item` | If the action is within an `c2-action-dropdown`. | `boolean` | `false` |
36+
| `icon` _(required)_ | `icon` | The icon to show for the action. | `[namespace: string \| symbol, name: string] \| string` | `undefined` |
37+
| `url` _(required)_ | `url` | The url to go to when clicked. | `string` | `undefined` |
3738

3839

3940
## Slots

‎packages/components/src/components/actions/action-with-confirmation/action-with-confirmation.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ export class EsActionWithConfirmation {
1616

1717
/** If the action is within an `c2-action-dropdown`. */
1818
@Prop({ reflect: true, attribute: 'dropdown-item' }) dropdownItem = false;
19+
/** If the action should display it's text content. */
20+
@Prop() displayContent = false;
1921
/** The action to take when the button is clicked. */
2022
@Prop() action!: () => any;
2123
/** if the action should be disabled. */
@@ -32,6 +34,8 @@ export class EsActionWithConfirmation {
3234
@State() open: boolean = false;
3335

3436
render() {
37+
const showContent = this.displayContent || this.dropdownItem;
38+
3539
return (
3640
<Host>
3741
<c2-button
@@ -41,14 +45,14 @@ export class EsActionWithConfirmation {
4145
disabled={this.disabled}
4246
>
4347
<c2-badge
44-
slot={this.dropdownItem ? 'before' : undefined}
48+
slot={showContent ? 'before' : undefined}
4549
variant={'dot'}
4650
color={this.dot}
4751
count={this.dot ? 1 : 0}
4852
>
4953
<c2-icon icon={this.icon} size={20} />
5054
</c2-badge>
51-
{this.dropdownItem && <slot />}
55+
{showContent && <slot />}
5256
</c2-button>
5357
{!this.disabled && (
5458
<c2-portal

‎packages/components/src/components/actions/action-with-confirmation/readme.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default () => (
4545
| --------------------- | ----------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
4646
| `action` _(required)_ | -- | The action to take when the button is clicked. | `() => any` | `undefined` |
4747
| `disabled` | `disabled` | if the action should be disabled. | `boolean` | `false` |
48+
| `displayContent` | `display-content` | If the action should display it's text content. | `boolean` | `false` |
4849
| `dot` | `dot` | If a dot should be shown on the action, to indicate attention being required. | `"error" \| "okay" \| "warning" \| undefined` | `undefined` |
4950
| `dropdownItem` | `dropdown-item` | If the action is within an `c2-action-dropdown`. | `boolean` | `false` |
5051
| `icon` _(required)_ | `icon` | The icon to show for the action. | `[namespace: string \| symbol, name: string] \| string` | `undefined` |

‎packages/components/src/components/actions/action.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
& > c2-button,
55
& > c2-button-link {
66
--current-color: var(--color-shade-60);
7-
--spacing: 6px;
7+
--spacing: var(--spacing-1);
88
--height: 32px;
99

1010
&[disabled] {
@@ -19,7 +19,7 @@
1919
--border-radius: 0;
2020
--align-inner: flex-start;
2121
--height: 46px;
22-
--spacing: 12px;
22+
--spacing: var(--spacing-1_5);
2323
width: 100%;
2424

2525
&::part(button),

‎packages/components/src/components/actions/action/action.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export class ESActionGeneric {
1515

1616
/** If the action is within an `c2-action-dropdown`. */
1717
@Prop({ reflect: true, attribute: 'dropdown-item' }) dropdownItem = false;
18+
/** If the action should display it's text content. */
19+
@Prop() displayContent = false;
1820
/** The action to take when the button is clicked. */
1921
@Prop() action!: (e: MouseEvent) => any;
2022
/** If the action should be disabled. */
@@ -25,6 +27,7 @@ export class ESActionGeneric {
2527
@Prop() dot?: HTMLC2BadgeElement['color'];
2628

2729
render() {
30+
const showContent = this.displayContent || this.dropdownItem;
2831
return (
2932
<c2-button
3033
onClick={this.action}
@@ -33,14 +36,14 @@ export class ESActionGeneric {
3336
disabled={this.disabled}
3437
>
3538
<c2-badge
36-
slot={this.dropdownItem ? 'before' : undefined}
39+
slot={showContent ? 'before' : undefined}
3740
variant={'dot'}
3841
color={this.dot}
3942
count={this.dot ? 1 : 0}
4043
>
4144
<c2-icon icon={this.icon} size={20} />
4245
</c2-badge>
43-
{this.dropdownItem && <slot />}
46+
{showContent && <slot />}
4447
</c2-button>
4548
);
4649
}

0 commit comments

Comments
 (0)