fix(alert): adjust close button positioning

also pass icon size prop through button action element fixes #92
vmware-clarity · Jun 22, 2022 · 4318412 · 4318412
1 parent ba90734
commit 4318412
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 7 deletions.
diff --git a/projects/core/custom-elements.json b/projects/core/custom-elements.json
@@ -1225,6 +1225,14 @@
               "attribute": "action",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "iconSize"
+            },
             {
               "kind": "field",
               "name": "i18n"
@@ -1353,6 +1361,13 @@
               },
               "fieldName": "action"
             },
+            {
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "iconSize"
+            },
             {
               "name": "pressed",
               "type": {
@@ -1550,6 +1565,18 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -1682,6 +1709,17 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "name": "pressed",
               "type": {
@@ -1852,6 +1890,18 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -2002,6 +2052,17 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "name": "pressed",
               "type": {
@@ -2665,6 +2726,18 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -2817,6 +2890,17 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "name": "pressed",
               "type": {
@@ -7836,6 +7920,18 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -7980,6 +8076,17 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "name": "pressed",
               "type": {
@@ -36078,6 +36185,18 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -36223,6 +36342,17 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "name": "pressed",
               "type": {
@@ -50244,6 +50374,18 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -50376,6 +50518,17 @@
                 "module": "button-action/button-action.element.js"
               }
             },
+            {
+              "name": "iconSize",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "iconSize",
+              "inheritedFrom": {
+                "name": "CdsButtonAction",
+                "module": "button-action/button-action.element.js"
+              }
+            },
             {
               "name": "pressed",
               "type": {

diff --git a/projects/core/src/alert/alert-group.stories.ts b/projects/core/src/alert/alert-group.stories.ts
@@ -43,6 +43,11 @@ export function API(args: any) {
 export function alertGroup() {
   return html`
     <div cds-layout="vertical gap:sm">
+      <cds-alert-group status="info" aria-label="This is an example info alert group">
+        <cds-alert closable aria-label="This is an example info alert group">
+          This example is a closable alert inside an alert group with a status of "info".
+        </cds-alert>
+      </cds-alert-group>
       <cds-alert-group status="info" aria-label="This is an example info alert group">
         <cds-alert closable aria-label="This is an example info alert group">
           This example is a closable alert inside an alert group with a status of "info".

diff --git a/projects/core/src/alert/alert.element.scss b/projects/core/src/alert/alert.element.scss
@@ -36,6 +36,11 @@ $lightweight-alert-line-height: $cds-global-typography-body-line-height;
   --color: var(--icon-color);
 }
 
+.alert-close-wrapper {
+  padding: var(--container-padding);
+  padding-bottom: 0;
+}
+
 cds-internal-close-button {
   --color: inherit;
 }

diff --git a/projects/core/src/alert/alert.element.ts b/projects/core/src/alert/alert.element.ts
@@ -252,13 +252,15 @@ export class CdsAlert extends LitElement {
           ? html`<span class="alert-spacer" cds-layout="align:stretch">&nbsp;</span>`
           : html``}
         ${this.type !== 'light' && this.closable
-          ? html`<slot name="close-button">
-              <cds-internal-close-button
-                icon-size="${this.type === 'banner' ? '20' : '16'}"
-                @click="${() => this.closableController.close(true)}"
-                aria-label="${this.i18n.closeButtonAriaLabel}"
-              ></cds-internal-close-button
-            ></slot>`
+          ? html`<span class="alert-close-wrapper"
+              ><slot name="close-button">
+                <cds-internal-close-button
+                  icon-size="${this.type === 'banner' ? '20' : '16'}"
+                  @click="${() => this.closableController.close(true)}"
+                  aria-label="${this.i18n.closeButtonAriaLabel}"
+                >
+                </cds-internal-close-button> </slot
+            ></span>`
           : html``}
       </div>
     `;

diff --git a/projects/core/src/button-action/button-action.element.spec.ts b/projects/core/src/button-action/button-action.element.spec.ts
@@ -47,4 +47,13 @@ describe('cds-button-action', () => {
     await componentIsStable(component);
     expect(component.hasAttribute('cds-button-action')).toBe(true);
   });
+
+  it('should update the size of the icon via the iconSize property', async () => {
+    await componentIsStable(component);
+    expect(component.offsetHeight).toEqual(16);
+
+    component.iconSize = '20';
+    await componentIsStable(component);
+    expect(component.offsetHeight).toEqual(20);
+  });
 });
diff --git a/projects/core/src/button-action/button-action.element.ts b/projects/core/src/button-action/button-action.element.ts
@@ -41,6 +41,8 @@ export class CdsButtonAction extends CdsBaseButton {
 
   @property({ type: String, reflect: true }) action: string;
 
+  @property({ type: String }) iconSize: string;
+
   @i18n() i18n = I18nService.keys.actions;
 
   @state({ type: Boolean, reflect: true, attribute: 'cds-button-action' }) protected cdsButtonAction = true;
@@ -53,6 +55,7 @@ export class CdsButtonAction extends CdsBaseButton {
         <slot
           ><cds-icon
             .shape=${this.shape ? this.shape : 'ellipsis-vertical'}
+            .size=${this.iconSize}
             ?solid=${this.pressed || this.expanded}
             inner-offset=${1}
           ></cds-icon