chore(form-field): post master merge

kronostechnologies · Dec 3, 2024 · 5d9fccb · 5d9fccb
1 parent b86c8ee
commit 5d9fccb
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 34 deletions.
diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
@@ -77,7 +77,6 @@ const Textbox = styled.input<TextboxProps>`
     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
@@ -19,7 +19,7 @@ const StyledIcon = styled(Icon)`
     margin-right: var(--spacing-base);
 `;
 
-const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldMessageProps>> = ({
+export const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldMessageProps>> = ({
     children, id, noInvalidFieldIcon,
 }) => {
     const { isMobile } = useDeviceContext();
@@ -37,5 +37,3 @@ const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldM
         </StyledValidationMessage>
     );
 };
-
-export { InvalidFieldMessage };
diff --git 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<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
-    | 'id' | 'className'
->;
-
 type CommonFieldContainerProps = Pick<FieldContainerProps, 'noInvalidFieldIcon'>;
 
-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
@@ -78,7 +78,7 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
                 {label && (
                     <Label
                         id={slotIds.label}
-                        htmlFor={fieldId}
+                        forId={fieldId}
                         tooltip={tooltip}
                         required={required}
                     >

diff --git 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<PropsWithChildren<HintProps>> = ({
+export const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
     children, id,
 }) => {
     const { isMobile } = useDeviceContext();
@@ -27,5 +27,3 @@ const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
         </StyledHint>
     );
 };
-
-export { Hint };
diff --git 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<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, 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
@@ -45,21 +45,19 @@ const RequiredLabel: FunctionComponent<RequiredLabelProps> = ({ type }) => {
     }
 };
 
-const Label: FunctionComponent<PropsWithChildren<LabelProps>> = ({
-    className, children, htmlFor, id, tooltip, required, requiredLabelType = 'text',
+export const Label: FunctionComponent<PropsWithChildren<LabelProps>> = ({
+    className, children, forId, id, tooltip, required, requiredLabelType = 'text',
 }) => {
     const WrapperComponent = tooltip ? StyledWrapper : Fragment;
     const { isMobile } = useDeviceContext();
 
     return (
         <WrapperComponent>
-            <StyledLabel className={className} htmlFor={htmlFor} id={id} $isMobile={isMobile}>
+            <StyledLabel className={className} htmlFor={forId} id={id} $isMobile={isMobile}>
                 {children}
                 {required && <RequiredLabel type={requiredLabelType} />}
             </StyledLabel>
             {tooltip && <StyledTooltip {...tooltip} /* eslint-disable-line react/jsx-props-no-spreading */ />}
         </WrapperComponent>
     );
 };
-
-export { Label };
diff --git 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<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
-    | 'id' | 'className' | 'htmlFor'
->;
-
 type CommonFieldContainerProps = Pick<FieldContainerProps, 'required' | 'tooltip'>;
 
-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
@@ -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
@@ -310,7 +310,7 @@ input:valid + .c8 {
         >
           <Label
             data-testid="search-icon"
-            htmlFor="search-input"
+            forId="search-input"
           >
             <styled.label
               $isMobile={false}

diff --git a/packages/react/src/components/search/search-input.tsx b/packages/react/src/components/search/search-input.tsx
@@ -185,7 +185,7 @@ export const SearchInput: VoidFunctionComponent<SearchInputProps> = ({
         <SearchWrapper className={className}>
             <InnerWrapper>
                 {hasIcon && (
-                    <Label htmlFor={id} data-testid="search-icon">
+                    <Label forId={id} data-testid="search-icon">
                         <IcoSearch disabled={disabled} />
                         <VisuallyHidden>{label || t('label')}</VisuallyHidden>
                     </Label>

diff --git a/packages/react/src/types/native-props.ts b/packages/react/src/types/native-props.ts
@@ -0,0 +1,7 @@
+import { DetailedHTMLProps, HTMLAttributes, InputHTMLAttributes } from 'react';
+
+export type NativeInputProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+export type NativeSpanProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+
+export type NativeLabelProps = DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;