- {!hasError && (
-
- {helperText}
-
- )}
- {/* For the live region to work and announce validation errors in screen
- readers, it needs to be rendered prior to the validation error itself.
- The screen reader will only announce changes to the live region
- content, and not its initial value. We therefore use separate regions
- for showing helper text and error messages. */}
-
- {hasError && (
-
- {errorMessage}
-
- )}
-
-
- );
-};
-
-const HelperTextContainer = styled.div<{
- expanded?: boolean;
-}>`
- // Constrain the height to be able to animate it.
- height: ${props =>
- props.expanded
- ? `calc(${props.theme.space[1]}px + ${props.theme.typography.body3.lineHeight})`
- : '0'};
- opacity: ${props => (props.expanded ? 1 : 0)};
- transition:
- height 200ms ease-in,
- opacity 200ms ease-in;
-`;
-
-const HelperText = styled(Text)`
- white-space: nowrap;
-`;
+const LabelTip = ({ text }) => (
+