fix(emotion,ui-link): fall back to defaultProps when a prop is explicitly undefined

packages/emotion/src/__tests__/withStyleNew.test.tsx

@@ -0,0 +1,72 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react'
+import { describe, it, expect } from 'vitest'
+import { render } from 'vitest-browser-react'
+
+import { withStyleNew } from '../index.js'
+
+type Props = {
+  color?: string
+  styles?: { label: string }
+}
+
+const received: Props[] = []
+
+const generateStyle = (_theme: unknown, props: Props) => {
+  received.push(props)
+  return { label: props.color ?? 'unset' }
+}
+
+@withStyleNew(generateStyle)
+class Example extends Component<Props> {
+  static componentId = 'ExampleForDefaults'
+  static defaultProps = { color: 'primary' }
+
+  render() {
+    return <span data-testid="example">{this.props.styles?.label}</span>
+  }
+}
+
+describe('withStyleNew', () => {
+  // React 19 does not resolve defaultProps on forwardRef components, so the
+  // wrapper's render function is called directly to get the same behavior
+  const Wrapper = (props: Props) => (Example as any).render(props, null)
+
+  it('should fall back to the default prop when the prop is undefined', async () => {
+    received.length = 0
+    const { container } = await render(<Wrapper color={undefined} />)
+
+    expect(received[0].color).toBe('primary')
+    expect(container.textContent).toBe('primary')
+  })
+
+  it('should let an explicit prop override the default', async () => {
+    received.length = 0
+    await render(<Wrapper color="secondary" />)
+
+    expect(received[0].color).toBe('secondary')
+  })
+})

packages/emotion/src/mergeProps.ts

@@ -0,0 +1,42 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Merges the `defaultProps` into `props`.
+ * It does not overwrite defaultProps if the prop's value is `undefined`
+ */
+const mergeProps = <T extends Record<string, any>>(
+  defaultProps: Record<string, any> | undefined,
+  props: T
+): T => {
+  const merged: Record<string, any> = { ...defaultProps }
+  for (const key of Object.keys(props)) {
+    if (props[key] !== undefined) {
+      merged[key] = props[key]
+    }
+  }
+  return merged as T
+}
+
+export { mergeProps }

packages/emotion/src/withStyle.tsx

@@ -37,6 +37,7 @@ import { decorator } from '@instructure/ui-decorator'
 
 import { getComponentThemeOverride } from './getComponentThemeOverride.js'
 import { useTheme } from './useTheme.js'
+import { mergeProps } from './mergeProps.js'
 
 import type {
   BaseTheme,
@@ -135,8 +136,10 @@ const withStyle = decorator(
       }
 
       const componentProps: Props = {
-        ...ComposedComponent.defaultProps,
-        ...props,
+        // workaround for React 19: if a prop's vaule is `undefined` and it has
+        // a default value, `undefined` will override the default.
+        // (in React 18, the default value wins, we keep this behaviour)
+        ...mergeProps(ComposedComponent.defaultProps, props),
         ...defaultValues
       }
 
@@ -190,6 +193,9 @@ const withStyle = decorator(
     // more info: https://github.com/facebook/react/issues/13455
     WithStyle.originalType = ComposedComponent.originalType || ComposedComponent
 
+    // Note: This is ignored in React 19 because WithStyle is a functional
+    // component, and React 19 removed defaultProps for them
+    // https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops
     WithStyle.defaultProps = ComposedComponent.defaultProps
     // These static fields exist on InstUI components
     WithStyle.allowedProps = ComposedComponent.allowedProps

packages/emotion/src/withStyleNew.tsx

@@ -36,6 +36,7 @@ import { warn } from '@instructure/console'
 import { decorator } from '@instructure/ui-decorator'
 
 import { useTheme } from './useTheme.js'
+import { mergeProps } from './mergeProps.js'
 import { applyColorModifiers } from './styleUtils/applyColorModifiers.js'
 
 import type { ComponentTheme, InstUIComponent } from '@instructure/shared-types'
@@ -181,8 +182,10 @@ const withStyleNew = decorator(
       }
 
       const componentProps: Props = {
-        ...ComposedComponent.defaultProps,
-        ...props,
+        // workaround for React 19: if a prop's vaule is `undefined` and it has
+        // a default value, `undefined` will override the default.
+        // (in React 18, the default value wins, we keep this behaviour)
+        ...mergeProps(ComposedComponent.defaultProps, props),
         ...defaultValues
       }
       // resolving the theming functions and applying the overrides
@@ -282,6 +285,9 @@ const withStyleNew = decorator(
     // more info: https://github.com/facebook/react/issues/13455
     WithStyle.originalType = ComposedComponent.originalType || ComposedComponent
 
+    // Note: This is ignored in React 19 because WithStyle is a functional
+    // component, and React 19 removed defaultProps for them
+    // https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops
     WithStyle.defaultProps = ComposedComponent.defaultProps
     // These static fields exist on InstUI components
     WithStyle.allowedProps = ComposedComponent.allowedProps

packages/ui-link/src/Link/v1/styles.ts

@@ -40,13 +40,7 @@ const generateStyle = (
   props: LinkProps,
   state: LinkStyleProps
 ): LinkStyle => {
-  const {
-    isWithinText,
-    renderIcon,
-    iconPlacement = 'start', // TODO workaround needed for react 19 where defaultprops doesn't apply for some reasong
-    color,
-    variant
-  } = props
+  const { isWithinText, renderIcon, iconPlacement, color, variant } = props
 
   const { containsTruncateText, hasVisibleChildren } = state
   const inverseStyle = color === 'link-inverse'

packages/ui-link/src/Link/v2/styles.ts

@@ -44,14 +44,7 @@ const generateStyle = (
   props: LinkProps,
   sharedTokens: SharedTokens
 ): LinkStyle => {
-  const {
-    renderIcon,
-    iconPlacement = 'start', // TODO workaround needed for react 19 where defaultprops doesn't apply for some reasong
-    color,
-    margin,
-    variant,
-    children
-  } = props
+  const { renderIcon, iconPlacement, color, margin, variant, children } = props
 
   const size =
     !props.size && (variant === 'inline' || variant === 'standalone')

regression-test/src/app/view/page.tsx

@@ -30,15 +30,20 @@ export default function ViewPage() {
   return (
     <main className="flex gap-12 p-8 flex-col items-start axe-test">
       <section>
-        <View
-          as="div"
-          margin="small"
-          padding="large"
-          textAlign="center"
-          background="secondary"
-        >
-          Basic View content
-        </View>
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+          <View
+            as="div"
+            margin="small"
+            padding="large"
+            textAlign="center"
+            background="secondary"
+          >
+            Basic View content
+          </View>
+          <View borderWidth="large" padding="small" borderColor={undefined}>
+            undefined prop
+          </View>
+        </div>
       </section>
 
       {/* Backgrounds */}