♻️ Conform element types (#829)

* ♻️ Accordion element types conformed

* ♻️ Avatar element types conformed

* ♻️ Some renaming of prop types in Banner

Rename from Props to BannerIconProps etc..

* ♻️ Breadcrumbs element types conformed

* ♻️ Card element types conformed

* ♻️ Rename function to Chip

Should match with component

* ♻️ Divider element types conformed

Also changed Avatar's element type to HTMLDiElement, HTMLHRElement is for hr elements only

* ♻️ Paper props conformed and exported

* ♻️ Popover story TS error fix

Controls popover only by button click

* 🔥 Removed useless code in Popover story

The control gets the props automatically

* ♻️ Popover element types conformed

* ♻️ Progress indicators element types conformed

* ♻️ Selection controls element types conformed

Also refactor arrow functions to named functions as agreed with team

* ♻️ Slider element types conformed

* 🔥 Removed useless FunctionComponent

* ♻️ Renamed prop in Dialog

from Props to TitleProps

* ♻️ Table element types conformed

* 🔥 Removed PropTypes and defaultProps

Useless after TS migration

* ♻️ Paper index js to ts

Got import error in Menu and found this js file...

* ♻️ Tooltip element types conformed

apps/storybook-react/stories/Divider.stories.tsx

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import React from 'react'
 import styled from 'styled-components'
 import { Divider, DividerProps } from '@equinor/eds-core-react'

apps/storybook-react/stories/Popover.stories.tsx

@@ -37,27 +37,6 @@ export default {
     PopoverContent,
     CardActions,
   },
-  argTypes: {
-    placement: {
-      control: {
-        type: 'select',
-        options: [
-          'topLeft',
-          'top',
-          'topRight',
-          'rightTop',
-          'right',
-          'rightBottom',
-          'bottomLeft',
-          'bottom',
-          'bottomRight',
-          'leftTop',
-          'left',
-          'leftBottom',
-        ],
-      },
-    },
-  },
 } as Meta
 
 export const Default: Story<PopoverProps> = (args) => {
@@ -67,7 +46,7 @@ export const Default: Story<PopoverProps> = (args) => {
   }
   return (
     <div style={{ margin: '10em' }}>
-      <Popover {...args} onClose={handleToggle} open={active || args.open}>
+      <Popover {...args} onClose={handleToggle} open={active}>
         <PopoverAnchor>
           <Button id="1" onClick={handleToggle}>
             Click me!

libraries/core-react/src/Accordion/Accordion.tsx

@@ -1,11 +1,11 @@
-import React, { forwardRef, useMemo, ReactElement } from 'react'
+import React, { forwardRef, useMemo, ReactElement, HTMLAttributes } from 'react'
 import createId from 'lodash/uniqueId'
 import type { AccordionProps } from './Accordion.types'
 
 const Accordion = forwardRef<
   HTMLDivElement,
-  AccordionProps & JSX.IntrinsicElements['div']
->(function EdsAccordion(
+  AccordionProps & HTMLAttributes<HTMLDivElement>
+>(function Accordion(
   { headerLevel = 'h2', chevronPosition = 'left', children, ...props },
   ref,
 ) {

libraries/core-react/src/Accordion/AccordionHeader.tsx

@@ -1,4 +1,9 @@
-import React, { forwardRef, isValidElement, ReactElement } from 'react'
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  isValidElement,
+  ReactElement,
+} from 'react'
 import styled from 'styled-components'
 import type { CSSObject } from 'styled-components'
 // eslint-disable-next-line camelcase
@@ -90,94 +95,94 @@ type AccordionHeaderProps = {
   disabled?: boolean
   /** @ignore */
   toggleExpanded?: () => void
-} & AccordionProps
+} & AccordionProps &
+  HTMLAttributes<HTMLDivElement>
 
 type AccordionChild = {
   type: { displayName: string }
 } & ReactElement
 
-const AccordionHeader = forwardRef<
-  HTMLDivElement,
-  AccordionHeaderProps & JSX.IntrinsicElements['div']
->(function AccordionHeader(
-  {
-    parentIndex,
-    headerLevel,
-    chevronPosition,
-    panelId,
-    id,
-    isExpanded = false,
-    children,
-    toggleExpanded,
-    disabled,
-    ...props
-  },
-  ref,
-) {
-  const handleClick = () => {
-    if (!disabled) {
-      toggleExpanded()
-    }
-  }
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    const { key } = event
-    if (key === 'Enter' || key === ' ') {
-      toggleExpanded()
-      event.preventDefault()
-    }
-  }
-
-  const chevron = (
-    <StyledIcon
-      key={`${id}-icon`}
-      name={isExpanded ? 'chevron_up' : 'chevron_down'}
-      size={16}
-      chevronPosition={chevronPosition}
-      color={disabled ? chevronDisabledColor : chevronDefaultColor}
-    />
-  )
-
-  const headerChildren = React.Children.map(
-    children,
-    (child: AccordionChild) => {
-      if (typeof child === 'string') {
-        return (
-          <AccordionHeaderTitle isExpanded={isExpanded} disabled={disabled}>
-            {child}
-          </AccordionHeaderTitle>
-        )
+const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
+  function AccordionHeader(
+    {
+      parentIndex,
+      headerLevel,
+      chevronPosition,
+      panelId,
+      id,
+      isExpanded = false,
+      children,
+      toggleExpanded,
+      disabled,
+      ...props
+    },
+    ref,
+  ) {
+    const handleClick = () => {
+      if (!disabled) {
+        toggleExpanded()
       }
+    }
 
-      if (isValidElement(child) && child.type === AccordionHeaderTitle) {
-        return React.cloneElement(child, {
-          isExpanded,
-          disabled,
-        })
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      const { key } = event
+      if (key === 'Enter' || key === ' ') {
+        toggleExpanded()
+        event.preventDefault()
       }
+    }
 
-      return child
-    },
-  )
-
-  const newChildren = [chevron, headerChildren]
-
-  return (
-    <StyledAccordionHeader
-      isExpanded={isExpanded}
-      parentIndex={parentIndex}
-      as={headerLevel}
-      disabled={disabled}
-      {...props}
-      panelId={panelId}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      ref={ref}
-    >
-      {chevronPosition === 'left' ? newChildren : newChildren.reverse()}
-    </StyledAccordionHeader>
-  )
-})
+    const chevron = (
+      <StyledIcon
+        key={`${id}-icon`}
+        name={isExpanded ? 'chevron_up' : 'chevron_down'}
+        size={16}
+        chevronPosition={chevronPosition}
+        color={disabled ? chevronDisabledColor : chevronDefaultColor}
+      />
+    )
+
+    const headerChildren = React.Children.map(
+      children,
+      (child: AccordionChild) => {
+        if (typeof child === 'string') {
+          return (
+            <AccordionHeaderTitle isExpanded={isExpanded} disabled={disabled}>
+              {child}
+            </AccordionHeaderTitle>
+          )
+        }
+
+        if (isValidElement(child) && child.type === AccordionHeaderTitle) {
+          return React.cloneElement(child, {
+            isExpanded,
+            disabled,
+          })
+        }
+
+        return child
+      },
+    )
+
+    const newChildren = [chevron, headerChildren]
+
+    return (
+      <StyledAccordionHeader
+        isExpanded={isExpanded}
+        parentIndex={parentIndex}
+        as={headerLevel}
+        disabled={disabled}
+        {...props}
+        panelId={panelId}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        ref={ref}
+      >
+        {chevronPosition === 'left' ? newChildren : newChildren.reverse()}
+      </StyledAccordionHeader>
+    )
+  },
+)
 
 // AccordionHeader.displayName = 'EdsAccordionHeader'
 

libraries/core-react/src/Accordion/AccordionHeaderTitle.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { accordion as tokens } from './Accordion.tokens'
 
@@ -7,7 +7,7 @@ type AccordionHeaderTitleProps = {
   isExpanded?: boolean
   /** Accordion item is disabled */
   disabled?: boolean
-} & JSX.IntrinsicElements['span']
+} & HTMLAttributes<HTMLSpanElement>
 
 const StyledAccordionHeaderTitle = styled.span<AccordionHeaderTitleProps>`
   flex: 1;

libraries/core-react/src/Accordion/AccordionItem.tsx

@@ -1,4 +1,10 @@
-import React, { forwardRef, useState, useEffect, ReactElement } from 'react'
+import React, {
+  forwardRef,
+  useState,
+  useEffect,
+  ReactElement,
+  HTMLAttributes,
+} from 'react'
 import type { AccordionProps } from './Accordion.types'
 
 type Props = {
@@ -8,7 +14,7 @@ type Props = {
   isExpanded?: boolean
   /** accordion item is disabled */
   disabled?: boolean
-} & JSX.IntrinsicElements['div'] &
+} & HTMLAttributes<HTMLDivElement> &
   AccordionProps
 
 const AccordionItem = forwardRef<HTMLDivElement, Props>(function AccordionItem(

libraries/core-react/src/Accordion/AccordionPanel.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { accordion as tokens } from './Accordion.tokens'
 
@@ -16,7 +16,7 @@ type AccordionPanelProps = {
   id?: string
   /** If `true`, the panel will be hidden. */
   hidden?: boolean
-} & JSX.IntrinsicElements['div']
+} & HTMLAttributes<HTMLDivElement>
 
 type StyledAccordionPanelProps = Pick<AccordionPanelProps, 'headerId'>
 

libraries/core-react/src/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { avatar as tokens } from './Avatar.tokens'
 
@@ -55,9 +55,9 @@ export type AvatarProps = {
   size?: 16 | 24 | 32 | 40 | 48
   /** @default false */
   disabled?: boolean
-}
+} & HTMLAttributes<HTMLDivElement>
 
-export const Avatar = forwardRef<HTMLHRElement, AvatarProps>(function Avatar(
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
   { src = null, alt, size = 24, disabled = false, ...rest },
   ref,
 ) {

libraries/core-react/src/Banner/BannerActions.tsx

@@ -21,12 +21,12 @@ const StyledBannerActions = styled.div<StyledBannerActionsProps>`
     }}
 `
 
-type Props = {
+type BannerActionProps = {
   children: ReactNode
   placement?: BannerActionsPlacement
 } & HTMLAttributes<HTMLDivElement>
 
-export const BannerActions: FC<Props> = ({
+export const BannerActions: FC<BannerActionProps> = ({
   children,
   placement = 'left',
   className,

libraries/core-react/src/Banner/BannerIcon.tsx

@@ -26,14 +26,14 @@ const StyledBannerIcon = styled.span<StyledBannerIconProps>`
   margin-right: ${enabled.spacings};
 `
 
-type Props = {
+type BannerIconProps = {
   /** Which icon background and fill color to use. Info = green, warning = red */
   variant?: BannerIconVariant
   /** @ignore */
   children: ReactNode
 } & HTMLAttributes<HTMLSpanElement>
 
-export const BannerIcon: FC<Props> = ({
+export const BannerIcon: FC<BannerIconProps> = ({
   children,
   variant = 'info',
   ...props

libraries/core-react/src/Breadcrumbs/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { Typography } from '../Typography'
 import { Tooltip } from '../Tooltip'
@@ -35,7 +35,7 @@ type BreadcrumbProps = {
   onClick?: (e: MouseEvent | KeyboardEvent) => void
   /** Children is breadcrumb text */
   children: string
-} & JSX.IntrinsicElements['div']
+} & HTMLAttributes<HTMLDivElement>
 
 export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
   function Breadcrumb({ children, maxWidth, ...other }, ref) {

libraries/core-react/src/Card/Card.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { card as tokens } from './Card.tokens'
 import { spacingsTemplate } from '../_common/templates'
@@ -8,12 +8,12 @@ const { spacings, shape } = tokens
 type StyledCardProps = {
   background: string
   cursor: string
-} & React.HTMLAttributes<HTMLDivElement>
+} & HTMLAttributes<HTMLDivElement>
 
 export type CardProps = {
   /** Variant */
   variant?: 'default' | 'info' | 'warning' | 'danger'
-} & JSX.IntrinsicElements['div']
+} & HTMLAttributes<HTMLDivElement>
 
 const StyledCard = styled.div<StyledCardProps>`
   height: fit-content;

libraries/core-react/src/Card/CardActions.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { Typography } from '../Typography'
 
@@ -7,7 +7,7 @@ export type CardActionProps = {
   alignRight?: boolean
   /** Meta information */
   meta?: string
-} & JSX.IntrinsicElements['div']
+} & HTMLAttributes<HTMLDivElement>
 
 const StyledCardActions = styled.div<React.CSSProperties>`
   display: grid;