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

RocketChat · Feb 20, 2020 · cd0122b · cd0122b
1 parent b80647c
commit cd0122b
Show file tree

Hide file tree

Showing 15 changed files with 17 additions and 17 deletions.
diff --git a/...me_iphone7_Misc_Loading_Default_Story.png → ...e_iphone7_Misc_Throbber_Default_Story.png b/...me_iphone7_Misc_Loading_Default_Story.png → ...e_iphone7_Misc_Throbber_Default_Story.png
diff --git a/.../chrome_iphone7_Misc_Loading_Disabled.png → ...chrome_iphone7_Misc_Throbber_Disabled.png b/.../chrome_iphone7_Misc_Loading_Disabled.png → ...chrome_iphone7_Misc_Throbber_Disabled.png
diff --git a/...me_iphone7_Misc_Loading_Inside_Button.png → ...e_iphone7_Misc_Throbber_Inside_Button.png b/...me_iphone7_Misc_Loading_Inside_Button.png → ...e_iphone7_Misc_Throbber_Inside_Button.png
diff --git a/...c_Loading_Inside_Button_Inherit_Color.png → ..._Throbber_Inside_Button_Inherit_Color.png b/...c_Loading_Inside_Button_Inherit_Color.png → ..._Throbber_Inside_Button_Inherit_Color.png
diff --git a/...ce/chrome_iphone7_Misc_Loading_States.png → ...e/chrome_iphone7_Misc_Throbber_States.png b/...ce/chrome_iphone7_Misc_Loading_States.png → ...e/chrome_iphone7_Misc_Throbber_States.png
diff --git a/...ome_laptop_Misc_Loading_Default_Story.png → ...me_laptop_Misc_Throbber_Default_Story.png b/...ome_laptop_Misc_Loading_Default_Story.png → ...me_laptop_Misc_Throbber_Default_Story.png
diff --git a/...e/chrome_laptop_Misc_Loading_Disabled.png → .../chrome_laptop_Misc_Throbber_Disabled.png b/...e/chrome_laptop_Misc_Loading_Disabled.png → .../chrome_laptop_Misc_Throbber_Disabled.png
diff --git a/...ome_laptop_Misc_Loading_Inside_Button.png → ...me_laptop_Misc_Throbber_Inside_Button.png b/...ome_laptop_Misc_Loading_Inside_Button.png → ...me_laptop_Misc_Throbber_Inside_Button.png
diff --git a/...c_Loading_Inside_Button_Inherit_Color.png → ..._Throbber_Inside_Button_Inherit_Color.png b/...c_Loading_Inside_Button_Inherit_Color.png → ..._Throbber_Inside_Button_Inherit_Color.png
diff --git a/...nce/chrome_laptop_Misc_Loading_States.png → ...ce/chrome_laptop_Misc_Throbber_States.png b/...nce/chrome_laptop_Misc_Loading_States.png → ...ce/chrome_laptop_Misc_Throbber_States.png
diff --git a/.../fuselage/src/components/Loading/index.js → ...fuselage/src/components/Throbber/index.js b/.../fuselage/src/components/Loading/index.js → ...fuselage/src/components/Throbber/index.js
@@ -3,17 +3,17 @@ 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}
   >
     {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,
 };
diff --git a/...selage/src/components/Loading/stories.mdx → ...elage/src/components/Throbber/stories.mdx b/...selage/src/components/Loading/stories.mdx → ...elage/src/components/Throbber/stories.mdx
@@ -2,25 +2,25 @@ 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>
 
 ### Disabled
 
 <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': {},

diff --git a/...selage/src/components/Loading/styles.scss → ...elage/src/components/Throbber/styles.scss b/...selage/src/components/Loading/styles.scss → ...elage/src/components/Throbber/styles.scss
@@ -1,4 +1,4 @@
-.rcx-loading {
+.rcx-throbber {
   display: flex;
 
   margin-block: calc(-1 * #{ $spaces-x1 });

diff --git a/packages/fuselage/src/components/index.js b/packages/fuselage/src/components/index.js
@@ -37,4 +37,4 @@ export * from './AutoComplete';
 export * from './Options';
 export * from './Select';
 export * from './Modal';
-export * from './Loading';
+export * from './Throbber';
diff --git a/packages/fuselage/src/components/index.scss b/packages/fuselage/src/components/index.scss
@@ -29,4 +29,4 @@
 @import './Options/styles.scss';
 @import './Select/styles.scss';
 @import './Modal/styles.scss';
-@import './Loading/styles.scss';
+@import './Throbber/styles.scss';