@indico-data/design-system 2.20.0 → 2.21.1

package/lib/src/components/button/Button.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { ButtonProps } from './types';
-export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.20.0",
+  "version": "2.21.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/Button.tsx

@@ -1,10 +1,10 @@
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import React from 'react';
 import { Icon } from '@/components';
 
 import { ButtonProps } from './types';
 
-export const Button = (props: ButtonProps) => {
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     ariaLabel,
     children,
@@ -37,13 +37,14 @@ export const Button = (props: ButtonProps) => {
   );
 
   const handleOnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (!isLoading && props.onClick) {
-      props.onClick(event);
+    if (!isLoading && onClick) {
+      onClick(event);
     }
   };
 
   return (
     <button
+      ref={ref}
       disabled={isLoading || isDisabled}
       className={buttonClasses}
       role="button"
@@ -84,4 +85,4 @@ export const Button = (props: ButtonProps) => {
       )}
     </button>
   );
-};
+});

package/src/components/popper/Popper.stories.tsx

@@ -111,17 +111,16 @@ type Story = StoryObj<PopperProps>;
 export const Default: Story = {
   render: (args) => {
     const [isOpen, setIsOpen] = useState(false);
-    const buttonRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
 
     return (
-      <div>
-        <div ref={buttonRef}>
-          <Button
-            onClick={() => setIsOpen((prev) => !prev)}
-            iconName="kabob"
-            ariaLabel="Toggle Popper"
-          />
-        </div>
+      <>
+        <Button
+          ref={buttonRef}
+          onClick={() => setIsOpen((prev) => !prev)}
+          iconName="kabob"
+          ariaLabel="Toggle Popper"
+        />
         <Popper
           {...args}
           referenceElement={buttonRef.current}
@@ -155,7 +154,7 @@ export const Default: Story = {
             </Button>
           </Menu>
         </Popper>
-      </div>
+      </>
     );
   },
 };

package/src/styles/_typography.scss

@@ -45,7 +45,7 @@ html {
   font-size: var(--pf-font-size-caption);
 }
 .text-overline {
-  font-size: var(--pf-font-size-overine);
+  font-size: var(--pf-font-size-overline);
 }
 
 // Transform

package/src/styles/variables/_typography.scss

@@ -4,7 +4,6 @@
   // Family
   --pf-font-family-base: 'Mulish', sans-serif;
 
-
   // Sizes
   --pf-font-size-base: 1rem;
   --pf-font-size-h1: calc(1.5 * var(--pf-font-size-base));
@@ -18,7 +17,7 @@
   --pf-font-size-subtitle: var(--pf-font-size-base);
   --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
   --pf-font-size-button: var(--pf-font-size-base);
-  --pf-font-size-overine: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-size-overline: calc(0.75 * var(--pf-font-size-base));
 
   // Weights
   --pf-font-weight-thin: 100;
@@ -27,5 +26,4 @@
   --pf-font-weight-medium: 500;
   --pf-font-weight-bold: 700;
   --pf-font-weight-heavy: 900;
-
-}
+}