fix(ui-motion): use elementRef instead of ref in BaseTransition renderChildren

[Gazuru]

Summary

• Silences the React 18 Alert: 'ref' is not a prop warning that appears when wrapping <Alert> (or any InstUI class component) in <Transition>.
• BaseTransition now routes refs by child kind: host elements get ref, forwardRef components get ref + elementRef, anything else gets only elementRef. No more passing ref to non-forwardRef components.
• Alert.handleRef chains the consumer-supplied elementRef so the DOM node still reaches the wrapping Transition and the fade in/out works end-to-end.

Fixes LX-4024.

[CLAassistant]

All committers have signed the CLA.

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2514/
Built to branch gh-pages at 2026-05-20 09:12 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[ToMESSKa]

@Gazuru The ref is not a prop warning disappears but the smooth fade in and fade out effect do not work with the same code example we received from you (see below) on this branch as it does on the master.
(Also I see a lot merge conflicts. I think it is easier to just reapply your changes than trying to resolve the conflicts.)

master vs LX-4014-fix-ref-is-not-a-prop

Screen.Recording.2026-05-19.at.13.13.42.mov

Screen.Recording.2026-05-19.at.13.17.31.mov

const Example = () => {
   const [alerts, setAlerts] = useState([])
   const nextId = useRef(0)

   const trigger = () => {
     const id = nextId.current++
     setAlerts((prev) => [...prev, id])
   }

   const remove = (id) =>
     setAlerts((prev) => prev.filter((x) => x !== id))

   return (
     <div>
       <Button onClick={trigger}>Trigger flash alert</Button>
       <View as="div" margin="small 0 0">
         {alerts.map((id) => (
           <FlashAlert
             key={id}
             message="Module access updated successfully"
             variant="success"
             timeout={4000}
             onClose={() => remove(id)}
           />
         ))}
       </View>
     </div>
   )
 }

 const FlashAlert = ({ onClose, message, variant, timeout }) => {
   const [isOpen, setIsOpen] = useState(true)

   const closeAlert = () => {
     setIsOpen(false)
     setTimeout(onClose, 500)
   }

   return (
     <Transition transitionOnMount in={isOpen} type="fade">
       <Alert
         variant={variant}
         renderCloseButtonLabel="Close"
         onDismiss={closeAlert}
         margin="small auto"
         timeout={timeout}
       >
         <div>{message}</div>
       </Alert>
     </Transition>
   )
 }

 render(<Example />)

[ToMESSKa]

see my comment

[github-actions]

Visual regression report

✅ No changes.

Status	Count
Unchanged	32
Changed	0
New	0
Removed	0

📊 View full report

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}

[ToMESSKa]

Looks good now:

• no ref is not a prop warning
• the fade-in fade-out transition works

The only issue might be that as findDOMNode has been removed, non-InstUI class components wrapped in <Transition> will now silently fail to expose the DOM node (and the animation breaks too). But as this pattern could be rare so it's not an issue? What do you think @balzss @joyenjoyer?

check this example in the master vs this PR

class PlainClassChild extends React.Component {
  render() {
    return (
      <div style={{ padding: '0.5rem', background: '#e0e7ff' }}>
        Plain class component (no elementRef, no forwardRef)
      </div>
    )
  }
}

const Example = () => {
  const [captured, setCaptured] = React.useState('(none)')
  const [isIn, setIsIn] = React.useState(true)

  return (
    <View as="div" padding="medium">
      <button onClick={() => setIsIn((v) => !v)} style={{ marginBottom: '1rem' }}>
        Toggle in: currently {String(isIn)}
      </button>

      <Transition
        type="fade"
        in={isIn}
        transitionOnMount={true}
        elementRef={(el) => {
          setCaptured(el instanceof Element ? el.tagName : String(el))
        }}
      >
        <PlainClassChild />
      </Transition>

      <p>elementRef received: <code>{captured}</code></p>
    </View>
  )
}

render(<Example />)

[ToMESSKa]

see my comment