feat(FieldContainer): add tooltip next to label with tooltipLabel prop

kronostechnologies · Jan 4, 2022 · c7d924a · c7d924a
1 parent f36373e
commit c7d924a
Show file tree

Hide file tree

Showing 11 changed files with 229 additions and 30 deletions.
diff --git a/packages/react/src/components/datepicker/datepicker.test.tsx.snap b/packages/react/src/components/datepicker/datepicker.test.tsx.snap
@@ -2,8 +2,15 @@
 
 exports[`Datepicker has startDate 1`] = `
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.875rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -288,8 +295,15 @@ label + .c3 {
 
 exports[`Datepicker matches snapshot (desktop) 1`] = `
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -574,8 +588,15 @@ label + .c3 {
 
 exports[`Datepicker matches snapshot (disabled) 1`] = `
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -890,8 +911,15 @@ exports[`Datepicker matches snapshot (invalid) 1`] = `
 }
 
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -1198,8 +1226,15 @@ label + .c6 {
 
 exports[`Datepicker matches snapshot (mobile) 1`] = `
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.875rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -1484,8 +1519,15 @@ label + .c3 {
 
 exports[`Datepicker matches snapshot (open, desktop) 1`] = `
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -2609,8 +2651,15 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
 }
 
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -3667,8 +3716,15 @@ label + .c3 {
 
 exports[`Datepicker matches snapshot (open, mobile) 1`] = `
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.875rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;

diff --git a/packages/react/src/components/field-container/field-container.test.tsx b/packages/react/src/components/field-container/field-container.test.tsx
@@ -1,5 +1,7 @@
-import { renderWithProviders } from '../../test-utils/renderer';
+import { mountWithTheme, renderWithProviders } from '../../test-utils/renderer';
 import { FieldContainer } from './field-container';
+import { Tooltip } from '../tooltip/tooltip';
+import { getByTestId } from '../../test-utils/enzyme-selectors';
 
 const defaultProps = {
     fieldId: 'test-id',
@@ -8,6 +10,16 @@ const defaultProps = {
 };
 
 describe('Field Container', () => {
+    test('label has tooltip when tooltipLabel prop is defined', () => {
+        const wrapper = mountWithTheme(
+            <FieldContainer tooltipLabel="test" valid {...defaultProps}>
+                Children
+            </FieldContainer>,
+        );
+
+        expect(getByTestId(wrapper, 'field-label').find(Tooltip).exists()).toBe(true);
+    });
+
     test('matches snapshot', () => {
         const tree = renderWithProviders(
             <FieldContainer valid {...defaultProps}>

diff --git a/packages/react/src/components/field-container/field-container.test.tsx.snap b/packages/react/src/components/field-container/field-container.test.tsx.snap
@@ -2,8 +2,15 @@
 
 exports[`Field Container matches snapshot 1`] = `
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -84,8 +91,15 @@ exports[`Field Container should have invalid styles given valid prop is set to f
 }
 
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -158,8 +172,15 @@ input + .c1 {
 
 exports[`Field Container should not have margins given noMargin prop is set to true 1`] = `
 .c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;

diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx
@@ -49,6 +49,7 @@ export interface FieldContainerProps {
     valid: boolean;
     validationErrorMessage: string;
     hint?: string;
+    tooltipLabel?: string;
 }
 
 export function FieldContainer({
@@ -60,6 +61,7 @@ export function FieldContainer({
     validationErrorMessage,
     hint,
     noMargin,
+    tooltipLabel,
     ...props
 }: FieldContainerProps): ReactElement {
     const { isMobile } = useDeviceContext();
@@ -73,8 +75,8 @@ export function FieldContainer({
             valid={valid}
             {...props /* eslint-disable-line react/jsx-props-no-spreading */}
         >
-            {label && <Label data-testid="text-input-label" forId={fieldId}>{label}</Label>}
-            {hint && <StyledHint data-testid="text-input-hint" isMobile={isMobile}>{hint}</StyledHint>}
+            {label && <Label data-testid="field-label" forId={fieldId} tooltipLabel={tooltipLabel}>{label}</Label>}
+            {hint && <StyledHint isMobile={isMobile}>{hint}</StyledHint>}
             {!valid && (
                 <InvalidField
                     data-testid="text-input-error-msg"

diff --git a/packages/react/src/components/label/label.test.tsx.snap b/packages/react/src/components/label/label.test.tsx.snap
@@ -2,8 +2,15 @@
 
 exports[`Label Matches the snapshot 1`] = `
 .c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;

diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/label/label.tsx
@@ -1,10 +1,12 @@
 import { ReactElement, ReactNode } from 'react';
 import styled from 'styled-components';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { Tooltip } from '../tooltip/tooltip';
 
 const StyledLabel = styled.label<{isMobile: boolean}>`
+    align-items: center;
     color: ${(props) => props.theme.greys.black};
-    display: block;
+    display: flex;
     font-size: ${({ isMobile }) => (isMobile ? '0.875rem' : '0.75rem')};
     font-weight: var(--font-normal);
     letter-spacing: 0.02rem;
@@ -17,18 +19,26 @@ const StyledLabel = styled.label<{isMobile: boolean}>`
     }
 `;
 
+const StyledTooltip = styled(Tooltip)`
+    margin-left: calc(var(--spacing-1x) * 1.5);
+`;
+
 interface LabelProps {
     className?: string;
     children: ReactNode;
     forId: string;
+    tooltipLabel?: string;
 }
 
-function Label({ className, children, forId }: LabelProps): ReactElement {
+function Label({
+    className, children, forId, tooltipLabel,
+}: LabelProps): ReactElement {
     const { isMobile } = useDeviceContext();
 
     return (
         <StyledLabel className={className} htmlFor={forId} isMobile={isMobile}>
             {children}
+            {tooltipLabel && <StyledTooltip label={tooltipLabel} />}
         </StyledLabel>
     );
 }

diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -60,8 +60,15 @@ exports[`SearchInput should match the snapshot 1`] = `
 }
 
 .c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;

diff --git a/packages/react/src/components/select/select.test.tsx.snap b/packages/react/src/components/select/select.test.tsx.snap
@@ -2,8 +2,15 @@
 
 exports[`Select disabled select has a different style 1`] = `
 .c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -405,8 +412,15 @@ Array [
 }
 
 .c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;
@@ -892,8 +906,15 @@ input[type="radio"]:disabled + .c1 {
 exports[`Select matches the snapshot 1`] = `
 Array [
   .c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #000000;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 0.75rem;
   font-weight: var(--font-normal);
   -webkit-letter-spacing: 0.02rem;