fix: update PropTypes to align with the new spacing tokens

INSTUI-4501

Author: ToMESSKa

packages/__docs__/src/ContentWrap/props.ts

@@ -24,7 +24,6 @@
 
 import PropTypes from 'prop-types'
 import type { PropValidators } from '@instructure/shared-types'
-import { ThemeablePropTypes } from '@instructure/emotion'
 import type { Spacing } from '@instructure/emotion'
 
 type ContentWrapOwnProps = {
@@ -42,7 +41,7 @@ type ContentWrapProps = ContentWrapOwnProps
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
   maxWidth: PropTypes.string,
-  padding: ThemeablePropTypes.spacing
+  padding: PropTypes.string
 }
 
 const allowedProps: AllowedPropKeys = ['children', 'maxWidth', 'padding']

packages/emotion/src/styleUtils/ThemeablePropTypes.ts

@@ -40,8 +40,7 @@ const {
   BORDER_WIDTHS,
   BORDER_RADII,
   BACKGROUNDS,
-  SIZES,
-  SPACING
+  SIZES
 } = ThemeablePropValues
 
 /**
@@ -57,8 +56,7 @@ const ThemeablePropTypes = {
   borderWidth: shorthandPropType(Object.values(BORDER_WIDTHS)),
   borderRadius: shorthandPropType(Object.values(BORDER_RADII)),
   background: PropTypes.oneOf(Object.values(BACKGROUNDS)),
-  size: PropTypes.oneOf(Object.values(SIZES)),
-  spacing: shorthandPropType(Object.values(SPACING))
+  size: PropTypes.oneOf(Object.values(SIZES))
 }
 
 type ValueKeys =

packages/ui-alerts/src/Alert/props.ts

@@ -25,8 +25,6 @@
 import { ReactNode } from 'react'
 import PropTypes from 'prop-types'
 
-import { ThemeablePropTypes } from '@instructure/emotion'
-
 import type {
   Spacing,
   WithStyleProps,
@@ -122,7 +120,7 @@ type AlertStyle = ComponentStyle<'alert' | 'icon' | 'closeButton' | 'content'>
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
   variant: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
-  margin: ThemeablePropTypes.spacing,
+  margin: PropTypes.string,
   liveRegion: PropTypes.func,
   liveRegionPoliteness: PropTypes.oneOf(['polite', 'assertive']),
   isLiveRegionAtomic: PropTypes.bool,

packages/ui-avatar/src/Avatar/props.ts

@@ -25,8 +25,6 @@
 import { SyntheticEvent } from 'react'
 import PropTypes from 'prop-types'
 
-import { ThemeablePropTypes } from '@instructure/emotion'
-
 import type {
   Spacing,
   WithStyleProps,
@@ -146,7 +144,7 @@ const propTypes: PropValidators<PropKeys> = {
   hasInverseColor: PropTypes.bool,
   showBorder: PropTypes.oneOf(['auto', 'always', 'never']),
   shape: PropTypes.oneOf(['circle', 'rectangle']),
-  margin: ThemeablePropTypes.spacing,
+  margin: PropTypes.string,
   display: PropTypes.oneOf(['inline-block', 'block']),
   onImageLoaded: PropTypes.func,
   as: PropTypes.elementType,

packages/ui-badge/src/Badge/props.ts

@@ -25,7 +25,6 @@
 import PropTypes from 'prop-types'
 
 import { PositionPropTypes } from '@instructure/ui-position'
-import { ThemeablePropTypes } from '@instructure/emotion'
 
 import type {
   AsElementType,
@@ -110,7 +109,7 @@ const propTypes: PropValidators<PropKeys> = {
   variant: PropTypes.oneOf(['primary', 'success', 'danger', 'inverse']),
   placement: PositionPropTypes.placement,
   display: PropTypes.oneOf(['inline-block', 'block']),
-  margin: ThemeablePropTypes.spacing,
+  margin: PropTypes.string,
   elementRef: PropTypes.func,
   formatOverflowText: PropTypes.func,
   formatOutput: PropTypes.func,

packages/ui-billboard/src/Billboard/props.ts

@@ -24,8 +24,6 @@
 
 import PropTypes from 'prop-types'
 
-import { ThemeablePropTypes } from '@instructure/emotion'
-
 import type {
   Spacing,
   WithStyleProps,
@@ -127,7 +125,7 @@ const propTypes: PropValidators<PropKeys> = {
   href: PropTypes.string,
   disabled: PropTypes.bool,
   readOnly: PropTypes.bool,
-  margin: ThemeablePropTypes.spacing
+  margin: PropTypes.string
 }
 
 const allowedProps: AllowedPropKeys = [

packages/ui-breadcrumb/src/Breadcrumb/props.ts

@@ -25,7 +25,6 @@
 import PropTypes from 'prop-types'
 
 import { Children } from '@instructure/ui-prop-types'
-import { ThemeablePropTypes } from '@instructure/emotion'
 
 import { BreadcrumbLink } from './BreadcrumbLink'
 
@@ -70,7 +69,7 @@ const propTypes: PropValidators<PropKeys> = {
   children: Children.oneOf([BreadcrumbLink]),
   label: PropTypes.string.isRequired,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  margin: ThemeablePropTypes.spacing
+  margin: PropTypes.string
 }
 
 const allowedProps: AllowedPropKeys = ['children', 'label', 'margin', 'size']

packages/ui-buttons/src/BaseButton/props.ts

@@ -25,8 +25,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { ThemeablePropTypes } from '@instructure/emotion'
-
 import type { InteractionType } from '@instructure/ui-react-utils'
 import type {
   Spacing,
@@ -205,7 +203,7 @@ const propTypes: PropValidators<PropKeys> = {
   withBackground: PropTypes.bool,
   withBorder: PropTypes.bool,
   isCondensed: PropTypes.bool,
-  margin: ThemeablePropTypes.spacing,
+  margin: PropTypes.string,
   cursor: PropTypes.string,
   href: PropTypes.string,
   onClick: PropTypes.func,

packages/ui-buttons/src/Button/props.ts

@@ -25,8 +25,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { ThemeablePropTypes } from '@instructure/emotion'
-
 import type { Spacing, WithStyleProps } from '@instructure/emotion'
 import type {
   ToProp,
@@ -153,7 +151,7 @@ const propTypes: PropValidators<PropKeys> = {
   display: PropTypes.oneOf(['inline-block', 'block']),
   textAlign: PropTypes.oneOf(['start', 'center']),
   withBackground: PropTypes.bool,
-  margin: ThemeablePropTypes.spacing,
+  margin: PropTypes.string,
   cursor: PropTypes.string,
   href: PropTypes.string,
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

packages/ui-buttons/src/CloseButton/props.ts

@@ -25,8 +25,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { ThemeablePropTypes } from '@instructure/emotion'
-
 import type {
   Spacing,
   WithStyleProps,
@@ -141,7 +139,7 @@ const propTypes: PropValidators<PropKeys> = {
   elementRef: PropTypes.func,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   onClick: PropTypes.func,
-  margin: ThemeablePropTypes.spacing,
+  margin: PropTypes.string,
   placement: PropTypes.oneOf(['start', 'end', 'static']),
   offset: PropTypes.oneOf(['none', 'x-small', 'small', 'medium']),
   type: PropTypes.oneOf(['button', 'submit', 'reset']),