diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx index 2bdc426d1..2aa03a1c6 100644 --- a/packages/react/src/components/combobox/combobox.tsx +++ b/packages/react/src/components/combobox/combobox.tsx @@ -77,7 +77,6 @@ const Textbox = styled.input` width: 100%; ${focus}; - &::placeholder { color: ${({ theme }) => theme.component['combobox-placeholder-text-color']}; font-style: italic; diff --git a/packages/react/src/components/feedbacks/invalid-field-message.tsx b/packages/react/src/components/feedbacks/invalid-field-message.tsx index 7afe6fb29..027f8468e 100644 --- a/packages/react/src/components/feedbacks/invalid-field-message.tsx +++ b/packages/react/src/components/feedbacks/invalid-field-message.tsx @@ -19,7 +19,7 @@ const StyledIcon = styled(Icon)` margin-right: var(--spacing-base); `; -const InvalidFieldMessage: VoidFunctionComponent> = ({ +export const InvalidFieldMessage: VoidFunctionComponent> = ({ children, id, noInvalidFieldIcon, }) => { const { isMobile } = useDeviceContext(); @@ -37,5 +37,3 @@ const InvalidFieldMessage: VoidFunctionComponent ); }; - -export { InvalidFieldMessage }; diff --git a/packages/react/src/components/feedbacks/types.ts b/packages/react/src/components/feedbacks/types.ts index 0801a36ed..882faefe2 100644 --- a/packages/react/src/components/feedbacks/types.ts +++ b/packages/react/src/components/feedbacks/types.ts @@ -1,10 +1,6 @@ -import { DetailedHTMLProps, HTMLAttributes } from 'react'; +import { NativeSpanProps } from '../../types/native-props'; import { FieldContainerProps } from '../field-container/types'; -export type BaseSpanProps = Pick, HTMLSpanElement>, - | 'id' | 'className' ->; - type CommonFieldContainerProps = Pick; -export interface InvalidFieldMessageProps extends BaseSpanProps, CommonFieldContainerProps {} +export interface InvalidFieldMessageProps extends NativeSpanProps, CommonFieldContainerProps {} diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx index ded9411cb..14ccf2ae2 100644 --- a/packages/react/src/components/field-container/field-container.tsx +++ b/packages/react/src/components/field-container/field-container.tsx @@ -78,7 +78,7 @@ export const FieldContainer: FunctionComponent diff --git a/packages/react/src/components/hint/hint.tsx b/packages/react/src/components/hint/hint.tsx index 77f07acdd..53e703375 100644 --- a/packages/react/src/components/hint/hint.tsx +++ b/packages/react/src/components/hint/hint.tsx @@ -12,7 +12,7 @@ const StyledHint = styled.span<{ $isMobile: boolean }>` line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')}; `; -const Hint: VoidFunctionComponent> = ({ +export const Hint: VoidFunctionComponent> = ({ children, id, }) => { const { isMobile } = useDeviceContext(); @@ -27,5 +27,3 @@ const Hint: VoidFunctionComponent> = ({ ); }; - -export { Hint }; diff --git a/packages/react/src/components/hint/types.ts b/packages/react/src/components/hint/types.ts index 1c2d2f662..7b539f205 100644 --- a/packages/react/src/components/hint/types.ts +++ b/packages/react/src/components/hint/types.ts @@ -1,7 +1,3 @@ -import { DetailedHTMLProps, HTMLAttributes } from 'react'; +import { NativeSpanProps } from '../../types/native-props'; -export type BaseSpanProps = Pick, HTMLSpanElement>, - | 'id' | 'className' ->; - -export interface HintProps extends BaseSpanProps {} +export interface HintProps extends NativeSpanProps {} diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/label/label.tsx index f86294e13..c4a4dba18 100644 --- a/packages/react/src/components/label/label.tsx +++ b/packages/react/src/components/label/label.tsx @@ -45,15 +45,15 @@ const RequiredLabel: FunctionComponent = ({ type }) => { } }; -const Label: FunctionComponent> = ({ - className, children, htmlFor, id, tooltip, required, requiredLabelType = 'text', +export const Label: FunctionComponent> = ({ + className, children, forId, id, tooltip, required, requiredLabelType = 'text', }) => { const WrapperComponent = tooltip ? StyledWrapper : Fragment; const { isMobile } = useDeviceContext(); return ( - + {children} {required && } @@ -61,5 +61,3 @@ const Label: FunctionComponent> = ({ ); }; - -export { Label }; diff --git a/packages/react/src/components/label/types.ts b/packages/react/src/components/label/types.ts index 290386f12..1ee856c64 100644 --- a/packages/react/src/components/label/types.ts +++ b/packages/react/src/components/label/types.ts @@ -1,13 +1,10 @@ -import { DetailedHTMLProps, LabelHTMLAttributes } from 'react'; +import { NativeLabelProps } from '../../types/native-props'; import { FieldContainerProps } from '../field-container/types'; -export type BaseLabelProps = Pick, HTMLLabelElement>, - | 'id' | 'className' | 'htmlFor' ->; - type CommonFieldContainerProps = Pick; -export interface LabelProps extends BaseLabelProps, CommonFieldContainerProps { +export interface LabelProps extends NativeLabelProps, CommonFieldContainerProps { + forId: string; requiredLabelType?: 'text'; } diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx index b4673bc08..86bcb8e33 100644 --- a/packages/react/src/components/password-creation-input/password-creation-input.tsx +++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx @@ -2,8 +2,8 @@ import { ChangeEvent, useState, VoidFunctionComponent, useMemo } from 'react'; import styled from 'styled-components'; import { useDeviceContext } from '../device-context-provider/device-context-provider'; import { IconButton } from '../buttons/icon-button'; -import { useTranslation } from '../../i18n/use-translation'; import { FieldContainer } from '../field-container/field-container'; +import { useTranslation } from '../../i18n/use-translation'; import { Tooltip } from '../tooltip/tooltip'; import { getPasswordStrength } from './password-strength'; import { PasswordRule } from './password-rule'; diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap index e78f5e02d..214f18a9c 100644 --- a/packages/react/src/components/search/search-input.test.tsx.snap +++ b/packages/react/src/components/search/search-input.test.tsx.snap @@ -310,7 +310,7 @@ input:valid + .c8 { >