@hyphen/hyphen-components 2.11.3 → 2.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.11.3",
+  "version": "2.11.5",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/FormLabel/FormLabel.module.scss

@@ -11,9 +11,4 @@
   &.disabled {
     color: var(--color-base-grey-300);
   }
-
-  .help-text {
-    margin-top: var(--INTERNAL_form-control-help-margin);
-    font-weight: var(--INTERNAL_form-control-help-font-weight);
-  }
 }

package/src/components/FormLabel/FormLabel.tsx

@@ -2,6 +2,7 @@ import React, { FC, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Box, BoxProps } from '../Box/Box';
 import styles from './FormLabel.module.scss';
+import { HelpText } from '../HelpText/HelpText';
 
 export interface FormLabelProps extends BoxProps {
   /**
@@ -80,17 +81,7 @@ export const FormLabel: FC<FormLabelProps> = ({
     >
       {children}
       {isFieldRequired && requiredIndicator && <span>{requiredIndicator}</span>}
-      {helpText && (
-        <Box
-          as="p"
-          display="block"
-          fontSize="sm"
-          color="secondary"
-          className={styles['help-text']}
-        >
-          {helpText}
-        </Box>
-      )}
+      {helpText && <HelpText>{helpText}</HelpText>}
     </Box>
   );
 };

package/src/components/HelpText/HelpText.module.scss

@@ -3,10 +3,7 @@
     --form-control-font-family,
     var(--INTERNAL_form-control-font-family)
   );
-  margin-top: var(
-    --form-control-help-margin,
-    var(--INTERNAL_form-control-help-margin)
-  );
+  margin-top: var(--size-spacing-xs);
   font-weight: var(
     --form-control-help-text-font-weight,
     var(--INTERNAL_form-control-help-text-font-weight)

package/src/components/InputValidationMessage/InputValidationMessage.tsx

@@ -20,7 +20,7 @@ export const InputValidationMessage: FC<InputValidationMessageProps> = ({
     styles['input-validation-message'],
     'font-color-danger',
     `font-size-${size}`,
-    'm-top-xs'
+    'm-top-sm'
   );
 
   return <div className={classes}>{children}</div>;

package/src/components/Pagination/Pagination.tsx

@@ -99,7 +99,6 @@ export const Pagination: FC<PaginationProps> = ({
       direction="row"
       alignItems="center"
       justifyContent="space-between"
-      padding="lg"
       className={classNames(className)}
     >
       <Box

package/src/styles/variables/forms.scss

@@ -2,7 +2,6 @@
   // ----GLOBALS----
   --INTERNAL_form-control-box-shadow-focus: 0 0 0 3px var(--color-border-subtle);
   --INTERNAL_form-control-label-margin: var(--size-spacing-xs);
-  --INTERNAL_form-control-help-margin: var(--size-spacing-2xs);
   --INTERNAL_form-control-line-height: var(--size-line-height-input);
   --INTERNAL_form-control-label-font-weight: var(--size-font-weight-medium);
   --INTERNAL_form-control-legend-font-weight: var(--size-font-weight-medium);