feat(many): add prop most shared tokens to prop options in view

INSTUI-4945

Author: HerrTopi

packages/emotion/src/index.ts

@@ -61,8 +61,6 @@ export type {
   Shadow,
   Stacking,
   Background,
-  BorderRadiiValues,
-  BorderRadii,
   BorderWidthValues,
   BorderWidth
 } from './styleUtils'

packages/emotion/src/styleUtils/ThemeablePropValues.ts

@@ -29,7 +29,11 @@ const ThemeablePropValues = {
     resting: 'resting',
     above: 'above',
     topmost: 'topmost',
-    none: 'none'
+    none: 'none',
+    elevation1: 'elevation1',
+    elevation2: 'elevation2',
+    elevation3: 'elevation3',
+    elevation4: 'elevation4'
   },
 
   STACKING_TYPES: {
@@ -178,12 +182,6 @@ type Stacking = (typeof ThemeablePropValues.STACKING_TYPES)[StackingKeys]
 type BackgroundKeys = keyof typeof ThemeablePropValues.BACKGROUNDS
 type Background = (typeof ThemeablePropValues.BACKGROUNDS)[BackgroundKeys]
 
-// BORDER_RADII
-type BorderRadiiKeys = keyof typeof ThemeablePropValues.BORDER_RADII
-type BorderRadiiValues =
-  (typeof ThemeablePropValues.BORDER_RADII)[BorderRadiiKeys]
-type BorderRadii = CSSShorthandValue<BorderRadiiValues | string> // TODO type better for actual values like '12px'
-
 // BORDER_WIDTHS
 type BorderWidthKeys = keyof typeof ThemeablePropValues.BORDER_WIDTHS
 type BorderWidthValues =
@@ -199,8 +197,6 @@ export type {
   Shadow,
   Stacking,
   Background,
-  BorderRadiiValues,
-  BorderRadii,
   BorderWidthValues,
   BorderWidth
 }

packages/emotion/src/styleUtils/index.ts

@@ -36,8 +36,6 @@ export type {
   Shadow,
   Stacking,
   Background,
-  BorderRadiiValues,
-  BorderRadii,
   BorderWidthValues,
   BorderWidth
 } from './ThemeablePropValues'

packages/ui-expandable/src/Expandable/v1/props.ts

@@ -24,19 +24,14 @@
 
 import { JSX } from 'react'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
-import type { ViewProps } from '@instructure/ui-view/latest'
 
 type ExpandableToggleProps = (props?: {
-  onClick?: (
-    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
-  ) => void
+  onClick?: (event: React.KeyboardEvent<any> | React.MouseEvent<any>) => void
   [key: string]: unknown
 }) => {
   'aria-controls': string
   'aria-expanded': boolean
-  onClick: (
-    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
-  ) => void
+  onClick: (event: React.KeyboardEvent<any> | React.MouseEvent<any>) => void
   [key: string]: unknown
 }
 
@@ -70,7 +65,7 @@ type ExpandableOwnProps = {
    * Function invoked when this component is expanded/collapsed
    */
   onToggle?: (
-    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>,
+    event: React.KeyboardEvent<any> | React.MouseEvent<any>,
     expanded: boolean
   ) => void
 

packages/ui-popover/src/Popover/v1/props.ts

@@ -24,7 +24,7 @@
 import React from 'react'
 import { BorderWidth } from '@instructure/emotion'
 
-import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion'
+import type { Stacking, WithStyleProps } from '@instructure/emotion'
 
 import type {
   PlacementPropValues,
@@ -70,7 +70,7 @@ type PopoverOwnProps = {
   /**
    * Controls the shadow depth for the `<Popover />`
    */
-  shadow?: Shadow
+  shadow?: 'resting' | 'above' | 'topmost' | 'none'
 
   /**
    * Controls the z-index depth for the `<Popover />` content

packages/ui-view/src/ContextView/v1/props.ts

@@ -30,7 +30,6 @@ import type {
 } from '@instructure/shared-types'
 import type { PlacementPropValues } from '@instructure/ui-position'
 import type {
-  Shadow,
   Spacing,
   Stacking,
   WithStyleProps,
@@ -52,7 +51,7 @@ type ContextViewOwnProps = {
   debug?: boolean
   margin?: Spacing
   padding?: Spacing
-  shadow?: Shadow
+  shadow?: 'resting' | 'above' | 'topmost' | 'none'
   stacking?: Stacking
   placement?: PlacementPropValues
   borderColor?: string

packages/ui-view/src/View/v1/props.ts

@@ -33,8 +33,6 @@ import type {
   WithStyleProps,
   Spacing,
   BorderWidth,
-  BorderRadii,
-  Shadow,
   Stacking,
   ComponentStyle,
   StyleObject
@@ -182,11 +180,11 @@ type ViewOwnProps = {
    * assigned to individual corners in CSS shorthand style (e.g., `"medium large none pill"`).
    * Also accepts valid CSS length values like `1rem` or `12px`
    */
-  borderRadius?: BorderRadii
+  borderRadius?: string
   /**
    * Controls the shadow depth for the `<View />`
    */
-  shadow?: Shadow
+  shadow?: 'resting' | 'above' | 'topmost' | 'none'
 
   /**
    * Controls the z-index depth for the `<View />`