fix selector order

RocketChat · Aug 17, 2023 · 89a656b · 89a656b
1 parent 12fd783
commit 89a656b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/packages/fuselage/src/components/Button/Button.styles.scss b/packages/fuselage/src/components/Button/Button.styles.scss
@@ -34,10 +34,14 @@
 
   @mixin click-animation() {
     @include on-active {
-      transform: translateY(1px);
+      > * {
+        transform: translateY(1px);
+      }
     }
     @include on-pressed {
-      transform: translateY(1px);
+      > * {
+        transform: translateY(1px);
+      }
     }
   }
 
@@ -47,9 +51,10 @@
   white-space: nowrap;
   text-decoration: none;
 
+  @include click-animation();
+
   .rcx-button--content {
     display: inline-block;
-    @include click-animation();
   }
 
   @include clickable;
@@ -104,10 +109,8 @@
 
   &--icon {
     @include button.kind-variant(colors.$icon);
+    @include click-animation();
 
-    :only-child {
-      @include click-animation();
-    }
     padding: 0;
 
     line-height: 0;

diff --git a/packages/fuselage/src/components/Button/Button.tsx b/packages/fuselage/src/components/Button/Button.tsx
@@ -92,10 +92,10 @@ export const Button = forwardRef(function Button(
       {...extraProps}
       {...props}
     >
-      <Box is='span' rcx-button--content>
+      <span className='rcx-button--content'>
         {icon && <Icon size='x16' name={icon} mie={4} />}
         {children}
-      </Box>
+      </span>
     </Box>
   );
 });