feat(HelpText): add shorthand sizes (#2014)

digdir · May 16, 2024 · ad97311 · ad97311
1 parent 50cbb8e
commit ad97311
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/packages/css/helptext.css b/packages/css/helptext.css
@@ -41,17 +41,17 @@
     max-width: 700px;
   }
 
-  .fds-helptext--small .fds-helptext__icon {
+  .fds-helptext--sm .fds-helptext__icon {
     width: var(--fds-sizing-6);
     height: var(--fds-sizing-6);
   }
 
-  .fds-helptext--medium .fds-helptext__icon {
+  .fds-helptext--md .fds-helptext__icon {
     width: var(--fds-sizing-7);
     height: var(--fds-sizing-7);
   }
 
-  .fds-helptext--large .fds-helptext__icon {
+  .fds-helptext--lg .fds-helptext__icon {
     width: var(--fds-sizing-8);
     height: var(--fds-sizing-8);
   }

diff --git a/packages/react/src/components/HelpText/HelpText.stories.tsx b/packages/react/src/components/HelpText/HelpText.stories.tsx
@@ -21,7 +21,7 @@ export const Preview: Story = {
   args: {
     title: 'Help text title',
     children: 'Help text content',
-    size: 'medium',
+    size: 'md',
   },
   decorators,
 };
@@ -30,7 +30,7 @@ export const Portal: Story = {
   args: {
     title: 'Help text title',
     children: 'Help text content',
-    size: 'medium',
+    size: 'md',
     portal: true,
     placement: 'top',
   },

diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
@@ -6,6 +6,7 @@ import type { Placement } from '@floating-ui/utils';
 import { Popover } from '../Popover';
 import type { PopoverProps } from '../Popover/Popover';
 import type { PortalProps } from '../../types/Portal';
+import { getSize } from '../../utilities/getSize';
 
 import { HelpTextIcon } from './HelpTextIcon';
 
@@ -15,8 +16,9 @@ export type HelpTextProps = {
    **/
   title: string;
   /**
-   * Size of the icon.
-   * @default medium
+   * Size of the helptext
+   * @default md
+   * @note `small`, `medium`, `large` is deprecated
    */
   size?: PopoverProps['size'];
   /**
@@ -30,12 +32,13 @@ export type HelpTextProps = {
 const HelpText = ({
   title,
   placement = 'right',
-  size = 'md',
   portal,
   className,
   children,
   ...rest
 }: HelpTextProps) => {
+  const size = getSize(rest.size || 'md') as PopoverProps['size'];
+
   const [open, setOpen] = useState(false);
 
   return (