fix: correct specificity of webkit appearance work around

adobe · Jan 20, 2021 · f0d06bf · f0d06bf
1 parent 00b3507
commit f0d06bf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css
@@ -17,6 +17,14 @@ governing permissions and limitations under the License.
     flex-direction: row;
 }
 
+:host([dir]) {
+    /* spectrum-css uses "-webkit-appearance: button" to workaround an
+     * iOS and Safari issue. However, it results in incorrect styling
+     * when applied in :host
+     */
+    -webkit-appearance: none;
+}
+
 :host(.spectrum-Dropdown-trigger) #button {
     text-align: left;
 }

diff --git a/packages/button/src/button-base.css b/packages/button/src/button-base.css
@@ -15,7 +15,9 @@ governing permissions and limitations under the License.
 :host {
     display: inline-flex;
     vertical-align: top;
+}
 
+:host([dir]) {
     /* spectrum-css uses "-webkit-appearance: button" to workaround an
      * iOS and Safari issue. However, it results in incorrect styling
      * when applied in :host