fix(icon): update size values in Icon

CHANGELOG.md

@@ -18,6 +18,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ## [Unreleased]
 
 ### BREAKING CHANGES
+- Change available `size` prop values in `Icon` component @codepretty ([#640](https://github.com/stardust-ui/react/pull/640))
 - renamed Teams theme menu variables the contains props names as prefixes @mnajdova ([#539](https://github.com/stardust-ui/react/pull/539))
 
 ### Fixes

docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx

@@ -3,14 +3,11 @@ import { Grid, Icon } from '@stardust-ui/react'
 
 const IconExampleSize = () => (
   <Grid rows={2} style={{ textAlign: 'center' }}>
-    <Icon name="home" size="micro" />
-    <Icon name="call-video" size="micro" />
+    <Icon name="home" size="smallest" />
+    <Icon name="call-video" size="smallest" />
 
-    <Icon name="home" size="mini" />
-    <Icon name="call-video" size="mini" />
-
-    <Icon name="home" size="tiny" />
-    <Icon name="call-video" size="tiny" />
+    <Icon name="home" size="smaller" />
+    <Icon name="call-video" size="smaller" />
 
     <Icon name="home" size="small" />
     <Icon name="call-video" size="small" />
@@ -21,14 +18,11 @@ const IconExampleSize = () => (
     <Icon name="home" size="large" />
     <Icon name="call-video" size="large" />
 
-    <Icon name="home" size="big" />
-    <Icon name="call-video" size="big" />
-
-    <Icon name="home" size="huge" />
-    <Icon name="call-video" size="huge" />
+    <Icon name="home" size="larger" />
+    <Icon name="call-video" size="larger" />
 
-    <Icon name="home" size="massive" />
-    <Icon name="call-video" size="massive" />
+    <Icon name="home" size="largest" />
+    <Icon name="call-video" size="largest" />
   </Grid>
 )
 

docs/src/prototypes/chatPane/chatPaneHeader.tsx

@@ -24,7 +24,6 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
       <Segment
         content={
           <Icon
-            size="big"
             name="team-create"
             variables={siteVars => ({ color: siteVars.white, margin: 'auto 8px' })}
           />
@@ -70,14 +69,13 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
             key: `${index}-${name}`,
             icon: {
               name,
-              size: 'big',
               variables: siteVars => ({ color: siteVars.white, margin: 'auto 8px' }),
             },
             primary: true,
           }))}
           styles={{ marginRight: '20px' }}
         />
-        {['user plus', 'ellipsis horizontal'].map((name, index) => (
+        {['team-create', 'more'].map((name, index) => (
           <Icon
             key={`${index}-${name}`}
             name={name}
@@ -87,7 +85,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
               margin: 'auto',
               ...(!index && { margin: 'auto 1.6rem auto auto' }),
             }}
-            variables={siteVars => ({ color: siteVars.gray04 })}
+            variables={siteVars => ({ color: siteVars.gray04, outline: true })}
           />
         ))}
       </div>

docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx

@@ -19,7 +19,7 @@ class MSTeamsLogo extends React.Component<LogoProps, any> {
               {Icon.create(icon, {
                 defaultProps: {
                   variables: { color: siteVariables.brand },
-                  size: 'large',
+                  size: 'largest',
                   xSpacing: 'after',
                   styles: { verticalAlign: 'middle' },
                 },

docs/src/views/ThemingExamples.tsx

@@ -52,7 +52,7 @@ export default () => (
             <Button content="Button" />
             <Button icon="plus" iconOnly primary />
             <Button icon="at" content="Send email" secondary />
-            <Icon name="chess rook" size="big" />
+            <Icon name="chess rook" size="larger" />
             <Label content="Label with icon" icon="close" />
           </>
          </Provider>
@@ -62,7 +62,7 @@ export default () => (
           <Button content="Button" />
           <Button icon="plus" iconOnly primary />
           <Button icon="at" content="Send email" secondary />
-          <Icon name="chess rook" size="big" />
+          <Icon name="chess rook" size="larger" />
           <Label content="Label with icon" icon="close" />
         </>
       )}
@@ -218,7 +218,7 @@ export default () => (
               <Button content="Button" />
               <Button icon="plus" iconOnly primary />
               <Button icon="at" content="Send email" secondary />
-              <Icon name="chess rook" size="big" />
+              <Icon name="chess rook" size="larger" />
               <Label content="Label with icon" icon="close" />
             </div>
           </Provider>
@@ -262,7 +262,7 @@ export default () => (
               <Button content="Button" />
               <Button icon="plus" iconOnly primary />
               <Button icon="at" content="Send email" secondary />
-              <Icon name="chess rook" size="big" />
+              <Icon name="chess rook" size="larger" />
               <Label content="Label with icon" icon="close" />
             </div>
           </Provider>
@@ -294,7 +294,7 @@ export default () => (
               <Button content="Button" />
               <Button icon="plus" iconOnly primary />
               <Button icon="at" content="Send email" secondary />
-              <Icon name="chess rook" size="big" />
+              <Icon name="chess rook" size="larger" />
               <Label content="Label with icon" icon="close" />
 
               /* Second nested theming */
@@ -313,7 +313,7 @@ export default () => (
                   <Button content="Button" />
                   <Button icon="plus" iconOnly primary />
                   <Button icon="at" content="Send email" secondary />
-                  <Icon name="chess rook" size="big" />
+                  <Icon name="chess rook" size="larger" />
                   <Label content="Label with icon" icon="close" />
                 </div>
               </Provider>
@@ -327,7 +327,7 @@ export default () => (
           <Button content="Button" />
           <Button icon="plus" iconOnly primary />
           <Button icon="at" content="Send email" secondary />
-          <Icon name="chess rook" size="big" />
+          <Icon name="chess rook" size="larger" />
           <Label content="Label with icon" icon="close" />
 
           <Provider
@@ -341,7 +341,7 @@ export default () => (
               <Button content="Button" />
               <Button icon="plus" iconOnly primary />
               <Button icon="at" content="Send email" secondary />
-              <Icon name="chess rook" size="big" />
+              <Icon name="chess rook" size="larger" />
               <Label content="Label with icon" icon="close" />
 
               <Provider
@@ -359,7 +359,7 @@ export default () => (
                   <Button content="Button" />
                   <Button icon="plus" iconOnly primary />
                   <Button icon="at" content="Send email" secondary />
-                  <Icon name="chess rook" size="big" />
+                  <Icon name="chess rook" size="larger" />
                   <Label content="Label with icon" icon="close" />
                 </>
               </Provider>

src/components/Attachment/Attachment.tsx

@@ -65,7 +65,7 @@ class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
         {icon && (
           <div className={classes.icon}>
             {Icon.create(icon, {
-              defaultProps: { size: 'big' },
+              defaultProps: { size: 'larger' },
             })}
           </div>
         )}

src/components/Icon/Icon.tsx

@@ -14,16 +14,8 @@ import { SvgIconSpec } from '../../themes/types'
 import { Extendable } from '../../../types/utils'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
-export type IconSize =
-  | 'micro'
-  | 'mini'
-  | 'tiny'
-  | 'small'
-  | 'normal'
-  | 'large'
-  | 'big'
-  | 'huge'
-  | 'massive'
+
+export type IconSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest'
 
 export interface IconProps extends UIComponentProps {
   /**
@@ -71,23 +63,13 @@ class Icon extends UIComponent<Extendable<IconProps>, any> {
     circular: PropTypes.bool,
     disabled: PropTypes.bool,
     name: PropTypes.string,
-    size: PropTypes.oneOf([
-      'micro',
-      'mini',
-      'tiny',
-      'small',
-      'normal',
-      'large',
-      'big',
-      'huge',
-      'massive',
-    ]),
+    size: PropTypes.oneOf(['smallest', 'smaller', 'small', 'medium', 'large', 'larger', 'largest']),
     xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']),
   }
 
   static defaultProps = {
     as: 'span',
-    size: 'normal',
+    size: 'medium',
     accessibility: iconBehavior,
   }
 

src/components/RadioGroup/RadioGroupItem.tsx

@@ -159,7 +159,7 @@ class RadioGroupItem extends AutoControlledComponent<
           {Icon.create(icon || '', {
             defaultProps: {
               circular: true,
-              size: 'mini',
+              size: 'smaller',
               variables: variables.icon,
               styles: styles.icon,
             },

src/components/Status/Status.tsx

@@ -58,7 +58,7 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
       <ElementType {...rest} className={classes.root}>
         {Icon.create(icon, {
           defaultProps: {
-            size: 'micro',
+            size: 'smallest',
             styles: styles.icon,
             variables: variables.icon,
             xSpacing: 'none',

src/themes/teams/components/Icon/iconStyles.ts

@@ -8,15 +8,13 @@ import { pxToRem } from '../../utils'
 import { getStyle as getSvgStyle } from './svg'
 
 const sizes = new Map([
-  ['micro', 7],
-  ['mini', 10],
-  ['tiny', 12],
-  ['small', 14],
-  ['normal', 16],
+  ['smallest', 7],
+  ['smaller', 10],
+  ['small', 12],
+  ['medium', 16],
   ['large', 20],
-  ['big', 32],
-  ['huge', 40],
-  ['massive', 64],
+  ['larger', 32],
+  ['largest', 40],
 ])
 
 const getDefaultFontIcon = (iconName: string) => {