Fixup prop types and use constants (#10306)

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

ui/app/components/app/dropdowns/network-dropdown.js

@@ -15,7 +15,7 @@ import { isPrefixedFormattedHexString } from '../../../../../shared/modules/util
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 
 import ColorIndicator from '../../ui/color-indicator'
-import { COLORS } from '../../../helpers/constants/design-system'
+import { COLORS, SIZES } from '../../../helpers/constants/design-system'
 import { Dropdown, DropdownMenuItem } from './components/dropdown'
 
 // classes from nodes of the toggle element.
@@ -149,7 +149,7 @@ class NetworkDropdown extends Component {
           )}
           <ColorIndicator
             color={COLORS.UI2}
-            size={ColorIndicator.SIZES.LARGE}
+            size={SIZES.LG}
             type={ColorIndicator.TYPES.FILLED}
             borderColor={isCurrentRpcTarget ? COLORS.WHITE : COLORS.UI2}
           />
@@ -219,7 +219,7 @@ class NetworkDropdown extends Component {
         )}
         <ColorIndicator
           color={network}
-          size={ColorIndicator.SIZES.LARGE}
+          size={SIZES.LG}
           type={ColorIndicator.TYPES.FILLED}
           borderColor={providerType === network ? COLORS.WHITE : network}
         />
@@ -309,7 +309,7 @@ class NetworkDropdown extends Component {
             type={ColorIndicator.TYPES.FILLED}
             color={COLORS.TRANSPARENT}
             borderColor={COLORS.UI2}
-            size={ColorIndicator.SIZES.LARGE}
+            size={SIZES.LG}
           />
           <span
             className="network-name-item"

ui/app/components/app/network-display/network-display.js

@@ -6,7 +6,11 @@ import { NETWORK_TYPE_RPC } from '../../../../../shared/constants/network'
 
 import LoadingIndicator from '../../ui/loading-indicator'
 import ColorIndicator from '../../ui/color-indicator'
-import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'
+import {
+  COLORS,
+  SIZES,
+  TYPOGRAPHY,
+} from '../../../helpers/constants/design-system'
 import Chip from '../../ui/chip/chip'
 import { useI18nContext } from '../../../hooks/useI18nContext'
 
@@ -14,7 +18,9 @@ export default function NetworkDisplay({
   colored,
   outline,
   iconClassName,
+  indicatorSize,
   disabled,
+  labelProps,
   onClick,
 }) {
   const { network, networkNickname, networkType } = useSelector((state) => ({
@@ -36,7 +42,7 @@ export default function NetworkDisplay({
         >
           <ColorIndicator
             color={networkType === NETWORK_TYPE_RPC ? COLORS.UI4 : networkType}
-            size={ColorIndicator.SIZES.LARGE}
+            size={indicatorSize}
             type={ColorIndicator.TYPES.FILLED}
             iconClassName={
               networkType === NETWORK_TYPE_RPC ? 'fa fa-question' : undefined
@@ -61,12 +67,17 @@ export default function NetworkDisplay({
       })}
       labelProps={{
         variant: TYPOGRAPHY.H7,
+        ...labelProps,
       }}
     />
   )
 }
 NetworkDisplay.propTypes = {
   colored: PropTypes.bool,
+  indicatorSize: PropTypes.oneOf(Object.values(SIZES)),
+  labelProps: PropTypes.shape({
+    ...Chip.propTypes.labelProps,
+  }),
   outline: PropTypes.bool,
   disabled: PropTypes.bool,
   iconClassName: PropTypes.string,
@@ -75,4 +86,5 @@ NetworkDisplay.propTypes = {
 
 NetworkDisplay.defaultProps = {
   colored: true,
+  indicatorSize: SIZES.LG,
 }

ui/app/components/ui/color-indicator/color-indicator.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
-import { COLORS } from '../../../helpers/constants/design-system'
+import { COLORS, SIZES } from '../../../helpers/constants/design-system'
 
 export default function ColorIndicator({
   size = 'small',
@@ -29,12 +29,6 @@ export default function ColorIndicator({
   )
 }
 
-ColorIndicator.SIZES = {
-  LARGE: 'large',
-  MEDIUM: 'medium',
-  SMALL: 'small,',
-}
-
 ColorIndicator.TYPES = {
   FILLED: 'filled',
   PARTIAL: 'partial-filled',
@@ -44,7 +38,7 @@ ColorIndicator.TYPES = {
 ColorIndicator.propTypes = {
   color: PropTypes.oneOf(Object.values(COLORS)),
   borderColor: PropTypes.oneOf(Object.values(COLORS)),
-  size: PropTypes.oneOf(Object.values(ColorIndicator.SIZES)),
+  size: PropTypes.oneOf(Object.values(SIZES)),
   iconClassName: PropTypes.string,
   type: PropTypes.oneOf(Object.values(ColorIndicator.TYPES)),
 }

ui/app/components/ui/color-indicator/color-indicator.scss

@@ -2,9 +2,11 @@
 @use "design-system";
 
 $sizes: (
-  'large': 6,
+  'xl': 8,
-  'medium': 5,
+  'lg': 6,
-  'small': 4,
+  'md': 5,
+  'sm': 4,
+  'xs': 2.5,
 );
 
 .color-indicator {

ui/app/components/ui/color-indicator/color-indicator.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { select } from '@storybook/addon-knobs'
-import { COLORS } from '../../../helpers/constants/design-system'
+import { COLORS, SIZES } from '../../../helpers/constants/design-system'
 import ColorIndicator from './color-indicator'
 
 export default {
@@ -9,7 +9,7 @@ export default {
 
 export const colorIndicator = () => (
   <ColorIndicator
-    size={select('size', ColorIndicator.SIZES, ColorIndicator.SIZES.LARGE)}
+    size={select('size', SIZES, SIZES.LG)}
     type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)}
     color={select('color', COLORS, COLORS.PRIMARY1)}
     borderColor={select('borderColor', { NONE: undefined, ...COLORS })}
@@ -18,7 +18,7 @@ export const colorIndicator = () => (
 
 export const withIcon = () => (
   <ColorIndicator
-    size={select('size', ColorIndicator.SIZES, ColorIndicator.SIZES.LARGE)}
+    size={select('size', SIZES, SIZES.LG)}
     type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)}
     color={select('color', COLORS, COLORS.PRIMARY1)}
     iconClassName="fa fa-question"

ui/app/components/ui/definition-list/definition-list.js

@@ -72,7 +72,9 @@ export default function DefinitionList({
 
 DefinitionList.propTypes = {
   gapSize: PropTypes.oneOf(Object.values(SIZES)),
-  dictionary: PropTypes.objectOf(PropTypes.string),
+  dictionary: PropTypes.objectOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ),
   tooltips: PropTypes.objectOf(PropTypes.string),
   termTypography: PropTypes.shape({
     ...omit(Typography.propTypes, ['tag', 'className', 'boxProps']),

ui/app/pages/settings/networks-tab/networks-tab.component.js

@@ -9,7 +9,7 @@ import {
   NETWORKS_FORM_ROUTE,
 } from '../../../helpers/constants/routes'
 import ColorIndicator from '../../../components/ui/color-indicator'
-import { COLORS } from '../../../helpers/constants/design-system'
+import { COLORS, SIZES } from '../../../helpers/constants/design-system'
 import NetworkForm from './network-form'
 
 export default class NetworksTab extends PureComponent {
@@ -113,7 +113,7 @@ export default class NetworksTab extends PureComponent {
         <ColorIndicator
           color={labelKey}
           type={ColorIndicator.TYPES.FILLED}
-          size={ColorIndicator.SIZES.LARGE}
+          size={SIZES.LG}
         />
         <div
           className={classnames('networks-tab__networks-list-name', {
@@ -159,7 +159,7 @@ export default class NetworksTab extends PureComponent {
               type={ColorIndicator.TYPES.FILLED}
               color={COLORS.WHITE}
               borderColor={COLORS.UI4}
-              size={ColorIndicator.SIZES.LARGE}
+              size={SIZES.LG}
             />
             <div className="networks-tab__networks-list-name networks-tab__networks-list-name--selected">
               {this.context.t('newNetwork')}