fix: Deprecation warnings (#227)

* Remove textStyle prop usage

* Remove textColor prop usage

Author: tassoevan

packages/fuselage-ui-kit/src/Section.js

@@ -38,7 +38,7 @@ const Fields = ({ fields, parser }) => (
 export const Section = ({ blockId, appId, text, fields, accessory, parser }) => <Block>
   <Grid>
     <Grid.Item>
-      {text && <Box is='span' textStyle='p1' color='default'>{parser.text(text)}</Box>}
+      {text && <Box is='span' fontScale='p1' color='default'>{parser.text(text)}</Box>}
       {fields && <Fields fields={fields} parser={parser} />}
     </Grid.Item>
     { accessory && < Flex.Item grow={0}>

packages/fuselage-ui-kit/src/index.js

@@ -124,7 +124,7 @@ class MessageParser extends UiKitParserMessage {
                         ELEMENT_TYPES.PLAIN_TEXT,
                         ELEMENT_TYPES.MARKDOWN,
                       ].includes(element.type) ? (
-                          <Box is='span' textStyle='c1' color='info'>
+                          <Box is='span' fontScale='c1' color='info'>
                             {this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)}
                           </Box>
                         )

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

@@ -23,7 +23,7 @@ export const Chip = ({
       </Margins>}
       {children && <Flex.Item shrink={1}>
         <Margins all='x4'>
-          <Box is='span' textStyle='p1' color='default' className='rcx-chip__text'>{children}</Box>
+          <Box is='span' fontScale='p1' color='default' rcx-chip__text>{children}</Box>
         </Margins>
       </Flex.Item>}
       {Remove && (onClick || onMouseDown) && <Margins all='x4'>

packages/fuselage/src/components/Icon/stories.mdx

@@ -9,7 +9,7 @@ import { Box, Hint, Icon } from '../..';
 # Icon
 
 <Story name='Default'>
-  <Box color='default' textStyle='p1'>
+  <Box color='default'>
     {Object.keys(namesToCharactersMapping).map((name) => <Icon key={name} name={name} size='x40' /> )}
   </Box>
 </Story>

packages/fuselage/src/components/Menu/stories.mdx

@@ -9,7 +9,7 @@ const options = {
         action: () => console.log('[...] is now admin'),
     },
     'delete': {
-        label: <Box display='flex' alignItems='center' textColor='danger'><Icon mie='x4' name='trash' size='x16'/>Delete</Box>,
+        label: <Box display='flex' alignItems='center' color='danger'><Icon mie='x4' name='trash' size='x16'/>Delete</Box>,
         action: () => console.log('[...] no longer exists'),
     }
 }

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

@@ -39,7 +39,7 @@ export const ModalThumb = (props) => <Avatar size='x32' {...props} />;
 
 export const ModalTitle = ({ children, ...props }) =>
   <Flex.Item grow={1} shrink={1}>
-    <Box rcx-modal__title color='default' textStyle='h1' {...props}>
+    <Box rcx-modal__title color='default' fontScale='h1' {...props}>
       {children}
     </Box>
   </Flex.Item>;

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

@@ -25,17 +25,17 @@ const Li = forwardRef(function Li(props, ref) {
   return <Box is='li' rcx-option ref={ref} {...props} />;
 });
 
-export const Empty = React.memo(() => <Box is='span' textStyle='p1' color='hint'>Empty</Box>);
+export const Empty = React.memo(() => <Box is='span' fontScale='p1' color='hint'>Empty</Box>);
 
 export const Option = React.memo(({ id, children: label, focus, selected, ...options }) => <Li key={id} rcx-option--focus={focus} id={id} rcx-option--selected={selected} aria-selected={selected} {...options}>{label}</Li>);
 
-export const CheckOption = React.memo(({ id, children: label, focus, selected, ...options }) => <Li key={id} rcx-option--focus={focus} id={id} aria-selected={selected} {...options}><Margins inline='x4'><CheckBox checked={selected} /></Margins><Margins inline='x4'><Box is='span' textStyle='p1' color='default'>{label}</Box></Margins></Li>);
+export const CheckOption = React.memo(({ id, children: label, focus, selected, ...options }) => <Li key={id} rcx-option--focus={focus} id={id} aria-selected={selected} {...options}><Margins inline='x4'><CheckBox checked={selected} /></Margins><Margins inline='x4'><Box is='span' fontScale='p1' color='default'>{label}</Box></Margins></Li>);
 
 export const OptionAvatar = React.memo(({ id, value, children: label, focus, selected, ...options }) => (
   <Flex.Container>
     <Li key={id} rcx-option--focus={focus} id={id} rcx-option--selected={selected} aria-selected={selected} {...options}>
       <Margins inline='x4'><Avatar size='x20' url={value} tile={label}/></Margins>
-      <Margins inline='x4'><Box is='span' textStyle='p1' color='default'>{label}</Box></Margins>
+      <Margins inline='x4'><Box is='span' fontScale='p1' color='default'>{label}</Box></Margins>
     </Li>
   </Flex.Container>
 ));

packages/fuselage/src/components/Select/Select.js

@@ -9,7 +9,7 @@ export const Addon = forwardRef((props, ref) => <Box is='div' rcx-select__addon
 
 const Wrapper = forwardRef((props, ref) => <Box is='div' rcx-select__wrapper ref={ref} {...props} />);
 
-export const Focus = React.forwardRef((props, ref) => <Box ref={ref} textStyle='p2' color='hint' rcx-select__focus is='button' type='button' {...props}/>);
+export const Focus = React.forwardRef((props, ref) => <Box ref={ref} fontScale='p2' color='hint' rcx-select__focus is='button' type='button' {...props}/>);
 
 export const Select = ({
   value,
@@ -80,7 +80,7 @@ export const Select = ({
             <Wrapper rcx-select__wrapper--hidden={!!visibleText}>
               { visibleText && <Flex.Item grow={1} shrink={1}>
                 <Margins inline='x4'>
-                  <Box is='span' rcx-select__item textStyle='p2' color={valueLabel ? 'default' : 'hint'}>{visibleText}</Box>
+                  <Box is='span' rcx-select__item fontScale='p2' color={valueLabel ? 'default' : 'hint'}>{visibleText}</Box>
                 </Margins>
               </Flex.Item>}
               <Anchor disabled={disabled} rcx-input-box--undecorated filter={filter} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} />

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

@@ -10,8 +10,8 @@ const style = {
 
 export function Selection({ children, text, ...props }) {
   return <Box color='alternative' rcx-table__selection display='flex' alignItems='center' justifyContent='space-between' {...props} pi='x24'>
-    <Box textStyle='p2' mb='x16' flexShrink={1} style={style}>{text}</Box>
-    { children && <Box mi='neg-x8' textStyle='p2' flexShrink={0} ><Margins inline='x4'>{children}</Margins></Box> }
+    <Box fontScale='p2' mb='x16' flexShrink={1} style={style}>{text}</Box>
+    { children && <Box mi='neg-x8' fontScale='p2' flexShrink={0} ><Margins inline='x4'>{children}</Margins></Box> }
   </Box>;
 }