fix(control): apply control action padding when visibility changes

fixes #182
vmware-clarity · Oct 31, 2022 · dd24347 · dd24347
1 parent 17b5842
commit dd24347
Show file tree

Hide file tree

Showing 2 changed files with 157 additions and 1 deletion.
diff --git a/projects/core/custom-elements.json b/projects/core/custom-elements.json
@@ -5088,6 +5088,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -5780,6 +5789,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -6419,6 +6437,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -7812,6 +7839,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -9119,6 +9155,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -9760,6 +9805,11 @@
               "name": "setupHTML5Validation",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -36100,6 +36150,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -51417,6 +51476,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -52910,6 +52978,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -53602,6 +53679,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -54279,6 +54365,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -54968,6 +55063,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -55694,6 +55798,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -56487,6 +56600,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -58302,6 +58424,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -58973,6 +59104,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",
@@ -60150,6 +60290,15 @@
                 "module": "forms/control/control.element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "setupPositioningListeners",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "CdsControl",
+                "module": "forms/control/control.element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActionOffsetPadding",

diff --git a/projects/core/src/forms/control/control.element.ts b/projects/core/src/forms/control/control.element.ts
@@ -23,6 +23,7 @@ import {
   hasAriaLabelTypeAttr,
   calculateOptimalLayout,
   responsive,
+  elementVisible,
 } from '@cds/core/internal';
 import { CdsControlAction } from '../control-action/control-action.element.js';
 import { CdsControlMessage } from './../control-message/control-message.element.js';
@@ -288,7 +289,7 @@ export class CdsControl extends LitElement {
     super.firstUpdated(props);
     this.setupHostAttributes();
     this.setupHTML5Validation();
-    this.setActionOffsetPadding();
+    this.setupPositioningListeners();
     this.setupResponsive();
     this.setupDescribedByUpdates();
     this.setupLabelLayout();
@@ -342,6 +343,12 @@ export class CdsControl extends LitElement {
     }
   }
 
+  private setupPositioningListeners() {
+    this.setActionOffsetPadding();
+    // https://github.com/vmware-clarity/core/issues/182
+    this.observers.push(elementVisible(this.inputControl, () => this.setActionOffsetPadding()));
+  }
+
   private async setActionOffsetPadding() {
     const prefix = (this.prefixAction as LitElement)?.updateComplete;
     const suffix = (this.suffixAction as LitElement)?.updateComplete;