From c8b2d3caf263982133af881e72bafca7cdb7dc38 Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Tue, 13 Aug 2024 17:11:00 +0200 Subject: [PATCH] fix(core/push-card): adjust colors and v3 adaptions (#1317) Co-authored-by: Daniel Leroux --- .changeset/giant-tigers-decide.md | 5 ++ packages/core/component-doc.json | 80 +++++++++++++++---- packages/core/src/components.d.ts | 12 ++- .../components/action-card/action-card.tsx | 1 + .../card-accordion/card-accordion.scss | 9 ++- packages/core/src/components/card/card.scss | 4 +- packages/core/src/components/card/card.tsx | 6 +- .../src/components/push-card/push-card.tsx | 9 ++- 8 files changed, 98 insertions(+), 28 deletions(-) create mode 100644 .changeset/giant-tigers-decide.md diff --git a/.changeset/giant-tigers-decide.md b/.changeset/giant-tigers-decide.md new file mode 100644 index 00000000000..029c119d4b8 --- /dev/null +++ b/.changeset/giant-tigers-decide.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': minor +--- + +feat(core/push-card): add alternative card types diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index f2c59fc7192..d373cd6c671 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -125,10 +125,10 @@ }, { "name": "variant", - "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"", + "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", "complexType": { "original": "ActionCardVariant", - "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"", + "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", "references": { "ActionCardVariant": { "location": "local", @@ -141,8 +141,14 @@ "attr": "variant", "reflectToAttr": false, "docs": "Card variant", - "docsTags": [], + "docsTags": [ + { + "name": "deprecated", + "text": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead." + } + ], "default": "'insight'", + "deprecation": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.", "values": [ { "value": "alarm", @@ -152,6 +158,10 @@ "value": "critical", "type": "string" }, + { + "value": "filled", + "type": "string" + }, { "value": "info", "type": "string" @@ -168,6 +178,10 @@ "value": "notification", "type": "string" }, + { + "value": "outline", + "type": "string" + }, { "value": "primary", "type": "string" @@ -876,10 +890,10 @@ }, { "name": "variant", - "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", + "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", "complexType": { "original": "BlindVariant", - "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", + "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", "references": { "BlindVariant": { "location": "local", @@ -908,6 +922,10 @@ "value": "critical", "type": "string" }, + { + "value": "filled", + "type": "string" + }, { "value": "info", "type": "string" @@ -1528,10 +1546,10 @@ }, { "name": "variant", - "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"", + "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", "complexType": { "original": "CardVariant", - "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"", + "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", "references": { "CardVariant": { "location": "local", @@ -1544,8 +1562,14 @@ "attr": "variant", "reflectToAttr": false, "docs": "Card variant", - "docsTags": [], + "docsTags": [ + { + "name": "deprecated", + "text": "variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead." + } + ], "default": "'insight'", + "deprecation": "variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.", "values": [ { "value": "alarm", @@ -1555,6 +1579,10 @@ "value": "critical", "type": "string" }, + { + "value": "filled", + "type": "string" + }, { "value": "info", "type": "string" @@ -1571,6 +1599,10 @@ "value": "notification", "type": "string" }, + { + "value": "outline", + "type": "string" + }, { "value": "primary", "type": "string" @@ -12691,7 +12723,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -12734,7 +12766,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -12755,15 +12787,15 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { "name": "variant", - "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"", + "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", "complexType": { "original": "PushCardVariant", - "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"", + "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", "references": { "PushCardVariant": { "location": "local", @@ -12776,8 +12808,14 @@ "attr": "variant", "reflectToAttr": false, "docs": "Card variant", - "docsTags": [], + "docsTags": [ + { + "name": "deprecated", + "text": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead." + } + ], "default": "'insight'", + "deprecation": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.", "values": [ { "value": "alarm", @@ -12787,6 +12825,10 @@ "value": "critical", "type": "string" }, + { + "value": "filled", + "type": "string" + }, { "value": "info", "type": "string" @@ -12803,6 +12845,10 @@ "value": "notification", "type": "string" }, + { + "value": "outline", + "type": "string" + }, { "value": "primary", "type": "string" @@ -17568,7 +17614,7 @@ ], "typeLibrary": { "src/components/card/card.tsx::CardVariant": { - "declaration": "export type CardVariant =\n | 'insight'\n | 'notification'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'primary';", + "declaration": "export type CardVariant =\n | 'insight'\n | 'notification'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'primary'\n | 'outline'\n | 'filled';", "docstring": "", "path": "src/components/card/card.tsx" }, @@ -17593,7 +17639,7 @@ "path": "src/components/typography/typography.tsx" }, "src/components/action-card/action-card.tsx::ActionCardVariant": { - "declaration": "export type CardVariant =\n | 'insight'\n | 'notification'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'primary';", + "declaration": "export type CardVariant =\n | 'insight'\n | 'notification'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'primary'\n | 'outline'\n | 'filled';", "docstring": "", "path": "src/components/action-card/action-card.tsx" }, @@ -17723,7 +17769,7 @@ "path": "src/components/pane/pane.tsx" }, "src/components/push-card/push-card.tsx::PushCardVariant": { - "declaration": "export type CardVariant =\n | 'insight'\n | 'notification'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'primary';", + "declaration": "export type CardVariant =\n | 'insight'\n | 'notification'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'primary'\n | 'outline'\n | 'filled';", "docstring": "", "path": "src/components/push-card/push-card.tsx" }, diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 84da58ff1a4..afd4c484123 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -110,6 +110,7 @@ export namespace Components { "subheading": string; /** * Card variant + * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead. */ "variant": ActionCardVariant; } @@ -292,6 +293,7 @@ export namespace Components { "selected": boolean; /** * Card variant + * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead. */ "variant": CardVariant; } @@ -1827,7 +1829,7 @@ export namespace Components { /** * Card heading */ - "heading": string; + "heading"?: string; /** * Card icon */ @@ -1835,13 +1837,14 @@ export namespace Components { /** * Card KPI value */ - "notification": string; + "notification"?: string; /** * Card subheading */ - "subheading": string; + "subheading"?: string; /** * Card variant + * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead. */ "variant": PushCardVariant; } @@ -4132,6 +4135,7 @@ declare namespace LocalJSX { "subheading"?: string; /** * Card variant + * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead. */ "variant"?: ActionCardVariant; } @@ -4327,6 +4331,7 @@ declare namespace LocalJSX { "selected"?: boolean; /** * Card variant + * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead. */ "variant"?: CardVariant; } @@ -6023,6 +6028,7 @@ declare namespace LocalJSX { "subheading"?: string; /** * Card variant + * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead. */ "variant"?: PushCardVariant; } diff --git a/packages/core/src/components/action-card/action-card.tsx b/packages/core/src/components/action-card/action-card.tsx index 2669786eaf0..36c889a06b5 100644 --- a/packages/core/src/components/action-card/action-card.tsx +++ b/packages/core/src/components/action-card/action-card.tsx @@ -24,6 +24,7 @@ export type ActionCardVariant = CardVariant; export class IxActionCard { /** * Card variant + * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead. */ @Prop() variant: ActionCardVariant = 'insight'; diff --git a/packages/core/src/components/card-accordion/card-accordion.scss b/packages/core/src/components/card-accordion/card-accordion.scss index 97d0fc94842..43b96aa2c8d 100644 --- a/packages/core/src/components/card-accordion/card-accordion.scss +++ b/packages/core/src/components/card-accordion/card-accordion.scss @@ -30,7 +30,14 @@ background-color: var(--theme-color-component-1); align-items: center; justify-content: flex-start; - @include ghost-hover-pressed(); + + &:hover { + background: var(--theme-color-component-1--hover); + } + + &:active { + background: var(--theme-color-component-1--active); + } @include focus-visible { outline: 1px solid var(--theme-color-focus-bdr); diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss index e9e678ff4fd..4404a886636 100644 --- a/packages/core/src/components/card/card.scss +++ b/packages/core/src/components/card/card.scss @@ -41,12 +41,12 @@ } } -:host(.card-insight) { +:host(.card-insight), :host(.card-outline) { --ix-card-background: transparent; --ix-card-border-color: var(--theme-color-soft-bdr); } -:host(.card-notification) { +:host(.card-notification), :host(.card-filled) { --ix-card-background: var(--theme-color-component-1); } diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx index cd8d8472053..7f56e6450d1 100644 --- a/packages/core/src/components/card/card.tsx +++ b/packages/core/src/components/card/card.tsx @@ -1,5 +1,6 @@ import { Component, Element, h, Host, Prop } from '@stencil/core'; +//TODO(IX-1601): Remove insight, notification in 3.0 export type CardVariant = | 'insight' | 'notification' @@ -9,7 +10,9 @@ export type CardVariant = | 'info' | 'neutral' | 'success' - | 'primary'; + | 'primary' + | 'outline' + | 'filled'; /** * @since 1.6.0 @@ -24,6 +27,7 @@ export class Card { /** * Card variant + * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead. */ @Prop() variant: CardVariant = 'insight'; diff --git a/packages/core/src/components/push-card/push-card.tsx b/packages/core/src/components/push-card/push-card.tsx index a0ca496df24..9b8a276d072 100644 --- a/packages/core/src/components/push-card/push-card.tsx +++ b/packages/core/src/components/push-card/push-card.tsx @@ -30,20 +30,21 @@ export class PushCard { /** * Card KPI value */ - @Prop() notification: string; + @Prop() notification?: string; /** * Card heading */ - @Prop() heading: string; + @Prop() heading?: string; /** * Card subheading */ - @Prop() subheading: string; + @Prop() subheading?: string; /** * Card variant + * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead. */ @Prop() variant: PushCardVariant = 'insight'; @@ -54,7 +55,7 @@ export class PushCard { @Prop() collapse: boolean = true; render() { - const color: TypographyColors = + const color: TypographyColors | undefined = this.variant === 'insight' || this.variant === 'notification' ? 'std' : undefined;