Unverified Commit cd0122be authored by Tasso Evangelista's avatar Tasso Evangelista Committed by GitHub
Browse files

fix: Display name and prop types of Throbber component (#148)

parent b80647c9
......@@ -3,9 +3,9 @@ import React, { forwardRef } from 'react';
import { Box } from '../Box';
export const Loading = forwardRef(function TabsItem({ disabled, size = 'x16', circleCount = 3, inheritColor, ...props }, ref) {
export const Throbber = forwardRef(function Throbber({ disabled, size = 'x16', circleCount = 3, inheritColor, ...props }, ref) {
return <Box
componentClassName='rcx-loading'
componentClassName='rcx-throbber'
is='div'
ref={ref}
{...props}
......@@ -13,7 +13,7 @@ export const Loading = forwardRef(function TabsItem({ disabled, size = 'x16', ci
{Array.from(
{ length: circleCount || 3 },
(_, iteration) => <Box
componentClassName='rcx-loading__circle'
componentClassName='rcx-throbber__circle'
is='span'
mod-disabled={!!disabled}
mod-size={size}
......@@ -25,7 +25,7 @@ export const Loading = forwardRef(function TabsItem({ disabled, size = 'x16', ci
</Box>;
});
Loading.propTypes = {
Throbber.propTypes = {
disabled: PropTypes.bool,
size: PropTypes.oneOf(['x2', 'x4', 'x8', 'x12', 'x16',
'x20', 'x24', 'x28', 'x32', 'x36', 'x40', 'x80', 'x120',
......@@ -35,6 +35,6 @@ Loading.propTypes = {
'x1000', 'x1040', 'x1080', 'x1120', 'x1160', 'x1200',
'x1240', 'x1280', 'x1320', 'x1360', 'x1400', 'x1440',
'x1480', 'x1520', 'x1560', 'x1600']),
circleCount: PropTypes.integer,
circleCount: PropTypes.number,
inheritColor: PropTypes.bool,
};
......@@ -2,17 +2,17 @@ import { action } from '@storybook/addon-actions';
import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
import { PropsVariationSection } from '../../../.storybook/helpers';
import { Loading, Button, Box } from '../..';
import { Throbber, Button, Box } from '../..';
<Meta title='Misc|Loading' parameters={{ jest: ['Loading/spec'] }} />
<Meta title='Misc|Throbber' parameters={{ jest: ['Throbber/spec'] }} />
# Loading
# Throbber
Indicates content that has not loaded yet.
<Preview>
<Story name='Default'>
<Loading/>
<Throbber/>
</Story>
</Preview>
......@@ -20,7 +20,7 @@ Indicates content that has not loaded yet.
<Preview>
<Story name='Disabled'>
<Loading disabled/>
<Throbber disabled/>
</Story>
</Preview>
......@@ -29,7 +29,7 @@ Indicates content that has not loaded yet.
<Preview>
<Story name='Inside Button'>
<Button style={{minHeight:'40px'}}>
<Loading size='x12'/>
<Throbber size='x12'/>
</Button>
</Story>
</Preview>
......@@ -40,10 +40,10 @@ Indicates content that has not loaded yet.
<Story name='Inside Button, inherit color'>
<Box>
<Button primary danger style={{minHeight:'40px', marginInlineEnd: '5px'}}>
<Loading size='x12' inheritColor/>
<Throbber size='x12' inheritColor/>
</Button>
<Button primary style={{minHeight:'40px'}}>
<Loading size='x12' inheritColor/>
<Throbber size='x12' inheritColor/>
</Button>
</Box>
</Story>
......@@ -54,7 +54,7 @@ Indicates content that has not loaded yet.
<Story name='States'>
<PropsVariationSection
component={Loading}
component={Throbber}
common={{ onClick: action('click') }}
yAxis={{
'default': {},
......
.rcx-loading {
.rcx-throbber {
display: flex;
margin-block: calc(-1 * #{ $spaces-x1 });
......
......@@ -37,4 +37,4 @@ export * from './AutoComplete';
export * from './Options';
export * from './Select';
export * from './Modal';
export * from './Loading';
export * from './Throbber';
......@@ -29,4 +29,4 @@
@import './Options/styles.scss';
@import './Select/styles.scss';
@import './Modal/styles.scss';
@import './Loading/styles.scss';
@import './Throbber/styles.scss';
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