fix: updating spectrum-config to support new label styles

adobe · Feb 1, 2023 · cefeaad · cefeaad
1 parent d88e2a9
commit cefeaad
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
@@ -57,12 +57,9 @@ export class ButtonBase extends LikeAnchor(
     protected get buttonContent(): TemplateResult[] {
         const content = [
             html`
-                <div id="label" ?hidden=${!this.hasLabel}>
-                    <slot
-                        id="slot"
-                        @slotchange=${this.manageTextObservedSlot}
-                    ></slot>
-                </div>
+                <span id="label" ?hidden=${!this.hasLabel}>
+                    <slot @slotchange=${this.manageTextObservedSlot}></slot>
+                </span>
             `,
         ];
         if (this.hasIcon) {

diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css
@@ -107,7 +107,7 @@ governing permissions and limitations under the License.
     justify-self: center;
     text-align: center;
 }
-#label:empty {
+#label[hidden] {
     display: none; /* .spectrum-Button-label:empty */
 }
 :host {

diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js
@@ -127,6 +127,12 @@ const config = {
             excludeSourceSelector: [
                 /^(\.spectrum-Button.*),(\.spectrum-ClearButton.*),(\.spectrum-LogicButton.*)$/,
             ],
+            complexSelectors: [
+                {
+                    replacement: '#label[hidden]',
+                    selector: '.spectrum-Button-label:empty',
+                },
+            ],
         },
     ],
 };