Unverified Commit 63bcc183 authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

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

parent 56c2eb73
......@@ -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}
......
......@@ -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 = {
......
......@@ -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) {
......
.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;
}
}
......
......@@ -32,6 +32,7 @@ export const Button = forwardRef(function Button(
return (
<Box
animated
is={is}
rcx-button
rcx-button--danger={!primary && danger && !ghost}
......
......@@ -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);
}
......
......@@ -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) => (
......
......@@ -9,15 +9,15 @@
&__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);
......@@ -25,8 +25,6 @@
content: '';
transform: translate(-50%, -50%);
border-radius: lengths.border-radius(full);
background-color: currentColor;
......
......@@ -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}
/>
);
......
......@@ -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;
......
......@@ -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;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment