fix: Removed animation by default, Sidebar padding, and Radio RTL (#336)

packages/fuselage/src/components/Accordion/Item.js

@@ -84,6 +84,7 @@ export function Item({
     <Box is='section' rcx-accordion-item className={className} {...props}>
       {title && (
         <Box
+          animated
           rcx-accordion-item__bar
           rcx-accordion-item__bar--disabled={disabled}
           {...barProps}
@@ -108,6 +109,7 @@ export function Item({
         </Box>
       )}
       <Box
+        animated
         rcx-accordion-item__panel
         rcx-accordion-item__panel--expanded={panelExpanded}
         id={panelId}

packages/fuselage/src/components/Accordion/index.js

@@ -5,7 +5,7 @@ import { Box } from '../Box';
 import { Item } from './Item';
 
 export function Accordion(props) {
-  return <Box rcx-accordion {...props} />;
+  return <Box animated rcx-accordion {...props} />;
 }
 
 Accordion.propTypes = {

packages/fuselage/src/components/Box/index.js

@@ -52,7 +52,7 @@ export const useBoxOnlyProps = (props) => {
 };
 
 export const Box = memo(
-  forwardRef(function Box({ is = 'div', children, ...props }, ref) {
+  forwardRef(function Box({ is = 'div', children, animated, ...props }, ref) {
     useStyleSheet();
 
     if (ref) {
@@ -69,6 +69,9 @@ export const Box = memo(
     props = useBoxOnlyProps(props);
     props = useStylingProps(props);
 
+    if (animated) {
+      props.className = prependClassName(props.className, 'rcx-box--animated');
+    }
     const element = createElement(is, props, children);
 
     if (transformFn) {

packages/fuselage/src/components/Box/styles.scss

@@ -1,14 +1,21 @@
 .rcx-box {
   @extend %box;
 
-  &--full {
+  &--animated {
     @extend %box--animated;
+
+    &::before,
+    &::after {
+      @extend %box--animated;
+    }
+  }
+
+  &--full {
     @extend %box--full;
 
     &::before,
     &::after {
       @extend %box;
-      @extend %box--animated;
       @extend %box--full;
     }
   }

packages/fuselage/src/components/Button/index.js

@@ -32,6 +32,7 @@ export const Button = forwardRef(function Button(
 
   return (
     <Box
+      animated
       is={is}
       rcx-button
       rcx-button--danger={!primary && danger && !ghost}

packages/fuselage/src/components/CheckBox/styles.scss

@@ -13,20 +13,21 @@
 
   &__fake {
     @extend %selection-button__fake;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     border-radius: lengths.border-radius(2);
     inline-size: lengths.size(20);
 
     &::before,
     &::after {
       position: absolute;
-      inset-block-start: 50%;
-      inset-inline-start: 50%;
 
       display: block;
       visibility: hidden;
 
       content: '';
-      transform: translate(-50%, -50%);
 
       opacity: 0;
 
@@ -59,7 +60,6 @@
       height: $icon-thickness;
 
       transform:
-        translate(-50%, -50%)
         translate($icon-size * lengths.size(20) / -3, $icon-size * lengths.size(20) / 6)
         rotate(-45deg)
         translate($icon-size * lengths.size(20) / 2, $icon-size * lengths.size(20) / 6);
@@ -70,7 +70,6 @@
       height: 0.5 * $icon-size * lengths.size(20);
 
       transform:
-        translate(-50%, -50%)
         translate($icon-size * lengths.size(20) / -3, $icon-size * lengths.size(20) / 6)
         rotate(-45deg);
     }

packages/fuselage/src/components/InputBox/index.js

@@ -9,10 +9,12 @@ import { Skeleton } from '../Skeleton';
 import { Option } from './Option';
 import { Placeholder } from './Placeholder';
 
-const Wrapper = (props) => <Box is={Label} rcx-input-box__wrapper {...props} />;
+const Wrapper = (props) => (
+  <Box animated is={Label} rcx-input-box__wrapper {...props} />
+);
 
 const Input = forwardRef((props, ref) => (
-  <Box is='input' rcx-input-box ref={ref} {...props} />
+  <Box is='input' animated rcx-input-box ref={ref} {...props} />
 ));
 
 const Addon = forwardRef((props, ref) => (

packages/fuselage/src/components/RadioButton/styles.scss

@@ -9,24 +9,22 @@
 
   &__fake {
     @extend %selection-button__fake;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     border-radius: lengths.border-radius(full);
     inline-size: lengths.size(20);
   }
 
   &__input:checked + &__fake::before {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-
     display: block;
 
     width: 0.3 * lengths.size(20);
     height: 0.3 * lengths.size(20);
 
     content: '';
 
-    transform: translate(-50%, -50%);
-
     border-radius: lengths.border-radius(full);
 
     background-color: currentColor;

packages/fuselage/src/components/Sidebar/Item.js

@@ -37,7 +37,7 @@ const Container = (props) => (
 
 const Menu = (props) => (
   <div
-    className='rc-box rcx-box--full rcx-sidebar-item__menu-wraper '
+    className='rc-box rcx-box--full rcx-box--animated rcx-sidebar-item__menu-wraper '
     {...props}
   />
 );

packages/fuselage/src/components/Sidebar/styles.scss

@@ -60,8 +60,7 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
   &-item {
     @extend %sidebar-base;
     padding-block: lengths.padding(4);
-    padding-inline-start: lengths.padding(16);
-    padding-inline-end: lengths.padding(8);
+    padding-inline: lengths.padding(16);
 
     color: $sidebar-item-color;
 

packages/fuselage/src/styles/primitives/box.scss

@@ -32,7 +32,6 @@
   outline: none;
 
   font-family: typography.font-family('sans');
-  font-variant-numeric: tabular-nums;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }