fix(ui-view,ui-buttons): clarify typing of elementRefs

INSTUI-4696

Author: HerrTopi

packages/ui-buttons/src/BaseButton/index.tsx

@@ -76,7 +76,7 @@ class BaseButton extends Component<BaseButtonProps> {
     cursor: 'pointer'
   } as const
 
-  ref: Element | null = null
+  ref: HTMLElement | null = null
 
   componentDidMount() {
     this.props.makeStyles?.(this.makeStylesVariables)
@@ -143,10 +143,10 @@ class BaseButton extends Component<BaseButtonProps> {
   }
 
   focus() {
-    this.ref && (this.ref as HTMLElement).focus()
+    this.ref && this.ref.focus()
   }
 
-  handleElementRef = (el: Element | null) => {
+  handleElementRef = (el: HTMLElement | null) => {
     const { elementRef } = this.props
 
     this.ref = el

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

@@ -61,7 +61,7 @@ type BaseButtonOwnProps = {
   /**
    * Provides a reference to the `Button`'s underlying html element.
    */
-  elementRef?: (element: Element | null) => void
+  elementRef?: (element: HTMLElement | null) => void
 
   /**
    * The element to render as the component root, `Button` by default.

packages/ui-view/src/View/index.tsx

@@ -185,7 +185,7 @@ class View extends Component<ViewProps> {
 
   ref: Element | null = null
 
-  handleElementRef = (el: Element | null) => {
+  handleElementRef = (el: HTMLElement | null) => {
     if (typeof this.props.elementRef === 'function') {
       this.props.elementRef(el)
     }

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

@@ -67,7 +67,7 @@ type ViewOwnProps = {
   /**
    * provides a reference to the underlying html element
    */
-  elementRef?: (element: Element | null) => void
+  elementRef?: (element: HTMLElement | null) => void
   /**
    * By default the display prop is 'auto', meaning it takes on the
    * display rules of the html element it's rendered as (see `as` prop).