chore(Types): make lang not interfere with HTMLProps (#1590)

When we define `React.HTMLProps<HTMLElement>` to a component – because we allow forwarding HTML attributes to a HTML element, we interfere with the `lang` attribute, because both the `GetTranslationProps` type and the types of HTMLElement's have defined a lang attribute.
dnbexperience · Sep 30, 2022 · deff7c0 · deff7c0
1 parent be37918
commit deff7c0
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 15 deletions.
diff --git a/packages/dnb-eufemia/src/components/slider/Slider.tsx b/packages/dnb-eufemia/src/components/slider/Slider.tsx
@@ -8,13 +8,11 @@ import React from 'react'
 import { SliderProvider } from './SliderProvider'
 import { SliderInstance } from './SliderInstance'
 
-import { ISpacingProps } from '../../shared/interfaces'
-
-import type { SliderProps } from './types'
+import type { SliderAllProps } from './types'
 
 export * from './types'
 
-function Slider(localProps: SliderProps & ISpacingProps) {
+function Slider(localProps: SliderAllProps) {
   return (
     <SliderProvider {...localProps}>
       <SliderInstance />

diff --git a/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx b/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx
@@ -20,7 +20,7 @@ import {
 import type {
   ValueTypes,
   onChangeEventProps,
-  SliderProps,
+  SliderAllProps,
   SliderContextTypes,
   ThumbStateEnums,
 } from './types'
@@ -38,7 +38,7 @@ const defaultProps = {
 
 export const SliderContext = React.createContext<SliderContextTypes>(null)
 
-export function SliderProvider(localProps: SliderProps) {
+export function SliderProvider(localProps: SliderAllProps) {
   const context = React.useContext(Context)
   const allProps = convertSnakeCaseProps(
     extendPropsWithContext(

diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.test.tsx b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.test.tsx
@@ -8,11 +8,11 @@ import { axeComponent, loadScss } from '../../../core/jest/jestSetup'
 import { fireEvent, render } from '@testing-library/react'
 import Slider from '../Slider'
 
-import type { SliderProps, onChangeEventProps } from '../Slider'
+import type { SliderAllProps, onChangeEventProps } from '../Slider'
 import { format } from '../../number-format/NumberUtils'
 import { wait } from '@testing-library/user-event/dist/utils'
 
-const props: SliderProps = {
+const props: SliderAllProps = {
   id: 'slider',
   label: 'Label',
   min: 0,
@@ -29,7 +29,7 @@ describe('Slider component', () => {
   })
 
   it('supports snake_case props', () => {
-    const props: SliderProps = {
+    const props: SliderAllProps = {
       id: 'slider',
       label: 'Label',
       label_direction: 'vertical',
@@ -331,7 +331,7 @@ describe('Slider component', () => {
   })
 
   describe('multi thumb', () => {
-    const SliderWithStateUpdate = (props: SliderProps) => {
+    const SliderWithStateUpdate = (props: SliderAllProps) => {
       const [value, setValue] = React.useState(props.value)
       const onChangehandler = (event: onChangeEventProps) => {
         setValue(event.value)

diff --git a/packages/dnb-eufemia/src/components/slider/types.ts b/packages/dnb-eufemia/src/components/slider/types.ts
@@ -6,6 +6,7 @@ import type {
   formatOptionParams,
 } from '../number-format/NumberUtils'
 import { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps'
+import { ISpacingProps } from '../../shared/interfaces'
 
 export type ValueTypes = number | Array<number>
 export type NumberFormatTypes =
@@ -117,6 +118,10 @@ export type SliderProps = IncludeSnakeCase<{
   children?: React.ReactChild
 }>
 
+export type SliderAllProps = SliderProps &
+  ISpacingProps &
+  Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>
+
 export type ThumbStateEnums =
   | 'initial'
   | 'normal'

diff --git a/packages/dnb-eufemia/src/components/tooltip/Tooltip.tsx b/packages/dnb-eufemia/src/components/tooltip/Tooltip.tsx
@@ -20,11 +20,10 @@ import {
   getPropsFromTooltipProp,
   injectTooltipSemantic,
 } from './TooltipHelpers'
-import { ISpacingProps } from '../../shared/interfaces'
-import { TooltipProps } from './types'
+import { TooltipAllProps } from './types'
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'
 
-function Tooltip(localProps: TooltipProps & ISpacingProps) {
+function Tooltip(localProps: TooltipAllProps) {
   const context = React.useContext(Context)
 
   const inherited = getPropsFromTooltipProp(localProps)

diff --git a/packages/dnb-eufemia/src/components/tooltip/types.ts b/packages/dnb-eufemia/src/components/tooltip/types.ts
@@ -1,4 +1,5 @@
 import { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps'
+import { ISpacingProps } from '../../shared/interfaces'
 
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left'
 
@@ -33,3 +34,7 @@ export type TooltipProps = IncludeSnakeCase<{
   className?: string
   children?: React.ReactNode
 }>
+
+export type TooltipAllProps = TooltipProps &
+  ISpacingProps &
+  Omit<React.HTMLProps<HTMLElement>, keyof TooltipProps>
diff --git a/packages/dnb-eufemia/src/shared/Context.tsx b/packages/dnb-eufemia/src/shared/Context.tsx
@@ -121,10 +121,10 @@ export type ContextProps = {
   getTranslation?: (props: GetTranslationProps) => Translation
 }
 
-export type GetTranslationProps = {
+export type GetTranslationProps = Partial<{
   lang?: Locale
   locale?: Locale
-} & Record<string, unknown>
+}>
 
 export type Locale = string | 'nb-NO' | 'en-GB' | 'en-US'
 export type ComponentTranslationsName = string