extend component by addBorder property

Author: haschek

CHANGELOG.md

@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - `isValidNewOption` property: Checks if an input string is or can be turned into a valid new option.
 - `<OverviewItem />`
     - `intent` property: visualize the state
+    - `hasBorder` property: add border around element
 
 ### Fixed
 

src/components/OverviewItem/OverviewItem.tsx

@@ -17,6 +17,12 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
      * Add a bit white space around the element.
      */
     hasSpacing?: boolean;
+    /**
+     * Add a border around the element.
+     * On default the background uses the default color from the `Card`.
+     * Otherwise, color is managed automatically by the intent state.
+     */
+    hasBorder?: boolean;
     /**
      * Uses a `Card` element to wrap the `OverviewItem` inside.
      * It is always used with `isOnlyLayout` set to `true`.
@@ -39,6 +45,7 @@ export const OverviewItem = ({
     className = "",
     densityHigh = false,
     hasSpacing = false,
+    hasBorder = false,
     hasCardWrapper = false,
     cardProps,
     intent,
@@ -51,6 +58,7 @@ export const OverviewItem = ({
                 `${eccgui}-overviewitem__item ` +
                 (densityHigh ? `${eccgui}-overviewitem__item--highdensity ` : "") +
                 (hasSpacing ? `${eccgui}-overviewitem__item--hasspacing ` : "") +
+                (hasBorder ? `${eccgui}-overviewitem__item--hasborder ` : "") +
                 (intent ? `${intentClassName(intent)} ` : "") +
                 className
             }

src/components/OverviewItem/overviewitem.scss

@@ -81,37 +81,48 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     &.#{$eccgui}-intent--info {
         --eccgui-overviewitem-color-background: #{$eccgui-color-info-background};
         --eccgui-overviewitem-color-text: #{$eccgui-color-info-text};
+        --eccgui-overviewitem-color-border: #{eccgui-color-var("semantic", "info", "300")};
     }
     &.#{$eccgui}-intent--success {
         --eccgui-overviewitem-color-background: #{$eccgui-color-success-background};
         --eccgui-overviewitem-color-text: #{$eccgui-color-success-text};
+        --eccgui-overviewitem-color-border: #{eccgui-color-var("semantic", "success", "300")};
     }
     &.#{$eccgui}-intent--warning {
         --eccgui-overviewitem-color-background: #{$eccgui-color-warning-background};
         --eccgui-overviewitem-color-text: #{$eccgui-color-warning-text};
+        --eccgui-overviewitem-color-border: #{eccgui-color-var("semantic", "warning", "300")};
     }
     &.#{$eccgui}-intent--danger {
         --eccgui-overviewitem-color-background: #{$eccgui-color-danger-background};
         --eccgui-overviewitem-color-text: #{$eccgui-color-danger-text};
+        --eccgui-overviewitem-color-border: #{eccgui-color-var("semantic", "danger", "300")};
     }
     &.#{$eccgui}-intent--neutral {
         --eccgui-overviewitem-color-background: #{$eccgui-color-workspace-background};
         --eccgui-overviewitem-color-text: #{$eccgui-color-workspace-text};
-    }
-    &.#{$eccgui}-intent--neutral {
-        --eccgui-overviewitem-color-background: #{$eccgui-color-workspace-background};
-        --eccgui-overviewitem-color-text: #{$eccgui-color-workspace-text};
+        --eccgui-overviewitem-color-border: #{eccgui-color-var("identity", "background", "500")};
     }
     &.#{$eccgui}-intent--primary {
         --eccgui-overviewitem-color-background: #{eccgui-color-var("identity", "brand", "100")};
         --eccgui-overviewitem-color-text: #{eccgui-color-var("identity", "brand", "900")};
+        --eccgui-overviewitem-color-border: #{eccgui-color-var("identity", "brand", "300")};
     }
     &.#{$eccgui}-intent--accent {
         --eccgui-overviewitem-color-background: #{eccgui-color-var("identity", "accent", "100")};
         --eccgui-overviewitem-color-text: #{eccgui-color-var("identity", "accent", "900")};
+        --eccgui-overviewitem-color-border: #{eccgui-color-var("identity", "accent", "300")};
     }
 }
 
+.#{$eccgui}-overviewitem__item--hasborder {
+    --eccgui-overviewitem-color-background: #{$card-background-color};
+    --eccgui-overviewitem-color-border: #{eccgui-color-var("identity", "background", "500")};
+
+    border: 1px solid var(--eccgui-overviewitem-color-border);
+    border-radius: $pt-border-radius;
+}
+
 .#{$eccgui}-overviewitem__item--highdensity {
     // same fix for Firefox v132+ like for the normal element height
     min-height: $button-height;