add new components

packages/opub-ui/package.json

@@ -28,12 +28,14 @@
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-progress": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@react-spectrum/utils": "^3.8.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "ariakit": "^2.0.0-next.43",
     "downshift": "^7.4.1",
     "react": "^18.2.0",
     "react-aria": "^3.22.0",

packages/opub-ui/src/components/ActionList/ActionList.module.scss

@@ -47,7 +47,8 @@
     color: inherit;
   }
 
-  &.active {
+  &.active,
+  &[aria-selected='true'] {
     background-color: var(--surface-selected);
 
     svg {

packages/opub-ui/src/components/ActionList/ActionList.test.tsx

@@ -1,13 +1,21 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import { ActionList } from "./ActionList";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { ActionList } from './ActionList';
 
-describe("ActionList Tests", () => {
+describe('ActionList Tests', () => {
   beforeEach(() => {
-    render(<ActionList>Component</ActionList>);
+    render(
+      <ActionList
+        actionRole="menuitem"
+        items={[
+          { content: 'Create Organisation' },
+          { content: 'Create Dataset' },
+        ]}
+      />
+    );
   });
 
-  test("should show Component text all the time", () => {
-    expect(screen.getByText(/Component/i)).toBeInTheDocument();
+  test('should show action list', () => {
+    expect(screen.getByText(/Action List/i)).toBeInTheDocument();
   });
 });

packages/opub-ui/src/components/ActionList/ActionList.tsx

@@ -1,4 +1,3 @@
-import { useRef } from 'react';
 import type {
   ActionListItemDescriptor,
   ActionListSection,
@@ -8,6 +7,7 @@ import {
   wrapFocusNextFocusableMenuItem,
   wrapFocusPreviousFocusableMenuItem,
 } from '@ui/utils/focus';
+import { useRef } from 'react';
 import { Box } from '../Box';
 import { KeypressListener } from '../KeypressListener';
 import { Item, ItemProps } from './components/Item';
@@ -60,26 +60,13 @@ export function ActionList({
     ) : null;
   });
 
-  const handleFocusPreviousItem = (evt: KeyboardEvent) => {
-    evt.preventDefault();
-    if (actionListRef.current && evt.target) {
-      if (actionListRef.current.contains(evt.target as HTMLElement)) {
-        wrapFocusPreviousFocusableMenuItem(
-          actionListRef.current,
-          evt.target as HTMLElement
-        );
-      }
-    }
-  };
-
-  const handleFocusNextItem = (evt: KeyboardEvent) => {
-    evt.preventDefault();
+  const handleFocusChange = (
+    evt: KeyboardEvent,
+    focusFn: (a: any, b: any) => void
+  ) => {
     if (actionListRef.current && evt.target) {
       if (actionListRef.current.contains(evt.target as HTMLElement)) {
-        wrapFocusNextFocusableMenuItem(
-          actionListRef.current,
-          evt.target as HTMLElement
-        );
+        focusFn(actionListRef.current, evt.target as HTMLElement);
       }
     }
   };
@@ -89,23 +76,31 @@ export function ActionList({
       <>
         <KeypressListener
           keyEvent="keydown"
-          keyCode={Key.DownArrow}
-          handler={handleFocusNextItem}
+          keyCode={Key.ArrowDown}
+          handler={(e: KeyboardEvent) =>
+            handleFocusChange(e, wrapFocusNextFocusableMenuItem)
+          }
         />
         <KeypressListener
           keyEvent="keydown"
-          keyCode={Key.RightArrow}
-          handler={handleFocusNextItem}
+          keyCode={Key.ArrowRight}
+          handler={(e: KeyboardEvent) =>
+            handleFocusChange(e, wrapFocusNextFocusableMenuItem)
+          }
         />
         <KeypressListener
           keyEvent="keydown"
-          keyCode={Key.UpArrow}
-          handler={handleFocusPreviousItem}
+          keyCode={Key.ArrowUp}
+          handler={(e: KeyboardEvent) =>
+            handleFocusChange(e, wrapFocusPreviousFocusableMenuItem)
+          }
         />
         <KeypressListener
           keyEvent="keydown"
-          keyCode={Key.LeftArrow}
-          handler={handleFocusPreviousItem}
+          keyCode={Key.ArrowLeft}
+          handler={(e: KeyboardEvent) =>
+            handleFocusChange(e, wrapFocusPreviousFocusableMenuItem)
+          }
         />
       </>
     ) : null;

packages/opub-ui/src/components/ActionList/components/Item/Item.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-import cx from 'classnames';
-import { Text } from '../../../Text';
-import styles from '../../ActionList.module.scss';
-import { Box } from '../../../Box';
-import type { ActionListItemDescriptor } from '@ui/types/actionlist';
 import { Flex } from '@ui/components/Flex';
 import { UnstyledLink } from '@ui/components/Link/BaseLink';
+import type { ActionListItemDescriptor } from '@ui/types/actionlist';
 import { handleMouseUpByBlurring } from '@ui/utils/focus';
-import { ScrollTo } from '../ScrollTo';
+import cx from 'classnames';
+import React from 'react';
+import { Box } from '../../../Box';
+import { Text } from '../../../Text';
+import styles from '../../ActionList.module.scss';
 
 export type ItemProps = ActionListItemDescriptor;
 

packages/opub-ui/src/components/Box/Box.module.scss

@@ -9,6 +9,7 @@
 }
 
 .Box {
+  @include responsive-props('box', 'padding', 'padding');
   @include responsive-props('box', 'padding-block-end', 'padding-block-end');
   @include responsive-props(
     'box',

packages/opub-ui/src/components/Box/Box.tsx

@@ -108,6 +108,12 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       '--op-box-outline': outline ? `var(--border-${outline})` : undefined,
       '--op-box-overflow-x': overflowX,
       '--op-box-overflow-y': overflowY,
+      ...getResponsiveProps(
+        'box',
+        'padding',
+        'space',
+        paddingBlockEnd || padding
+      ),
       ...getResponsiveProps(
         'box',
         'padding-block-end',

packages/opub-ui/src/components/Button/Button.test.tsx

@@ -11,17 +11,24 @@ describe('Button Tests', () => {
     expect(screen.getByText(/Button/i)).toBeInTheDocument();
   });
 
-  test('Primary Button should have btn-primary class', () => {
-    const btn = screen.getByText(/Button/i);
-    expect(btn).toHaveClass('btn-primary');
-    fireEvent.click(btn);
+  test('should show button text on hover', () => {
+    fireEvent.mouseOver(screen.getByText(/Button/i));
+    expect(screen.getByText(/Button/i)).toBeInTheDocument();
   });
 
-  test('Secondary Button has btn-secondary class', () => {
-    const { container } = render(
-      <Button variant="secondary">Secondary</Button>
-    );
+  test('should show button text on focus', () => {
+    fireEvent.focus(screen.getByText(/Button/i));
+    expect(screen.getByText(/Button/i)).toBeInTheDocument();
+  });
 
-    expect(container.firstChild).toHaveClass('btn-secondary');
+  test('should show button text on active', () => {
+    fireEvent.mouseDown(screen.getByText(/Button/i));
+    expect(screen.getByText(/Button/i)).toBeInTheDocument();
+  });
+
+  test('should show button text on disabled', () => {
+    render(<Button disabled>Button</Button>);
+    fireEvent.mouseDown(screen.getByText(/Button/i));
+    expect(screen.getByText(/Button/i)).toBeInTheDocument();
   });
 });

packages/opub-ui/src/components/Combobox/Combobox.module.scss

@@ -11,103 +11,33 @@
   }
 }
 
-.List {
+.Popover {
+  --combobox-popover-height: 300px;
+  --popover-padding: var(--space-2);
+  position: relative;
+  z-index: 50;
+  display: flex;
+  gap: var(--space-05);
+  max-height: min(
+    var(--popover-available-height, 300px),
+    var(--combobox-popover-height)
+  );
+  flex-direction: column;
+  overflow: auto;
+  padding: var(--popover-padding);
+
+  max-width: calc(100vw - var(--space-8));
   box-shadow: var(--shadow-xl);
   border-radius: var(--border-radius-2);
   background-color: var(--surface);
-  // position: absolute;
-  max-width: calc(100vw - var(--space-8));
-  // transform-origin: var(--radix-popover-content-transform-origin);
-  // animation: scaleIn 100ms ease-out;
 
-  &--open {
-    padding: var(--space-2);
-  }
+  transform-origin: 50% 0px;
+  animation: scaleIn 100ms ease-out;
 }
 
-.Item {
-  --op-action-list-image-size: 20px;
-  --op-action-list-item-min-height: var(--space-10);
-  --op-action-list-item-vertical-padding: calc(
-    (var(--op-action-list-item-min-height) - var(--font-line-height-2)) / 2
-  );
-  @include unstyled-button;
-  @include focus-ring;
-  display: block;
-  // width: 100%;
-  // min-height: var(--op-action-list-item-min-height);
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  padding: var(--op-action-list-item-vertical-padding) var(--space-2);
-  border-radius: var(--border-radius-1);
-  border-top: var(--border-width-1) solid transparent;
-  color: inherit;
-  font-size: var(--font-size-100);
-
-  @media (forced-colors: active) {
-    border: var(--border-width-1) solid transparent;
-  }
-
-  &:hover {
-    background-color: var(--surface-hovered);
-    text-decoration: none;
-    outline: var(--border-width-3) solid transparent;
-  }
-
-  &:active {
-    background-color: var(--surface-pressed);
-
-    svg {
-      fill: var(--interactive);
-    }
-  }
-
-  &:focus-visible:not(:active) {
-    @include focus-ring($style: 'focused');
-    outline: var(--border-width-3) solid transparent;
-  }
-
-  &:visited {
-    color: inherit;
-  }
-
-  &.active {
-    background-color: var(--surface-selected);
-
-    svg {
-      fill: var(--interactive);
-    }
-
-    &::before {
-      @include list-selected-indicator;
-    }
-  }
-
-  &.destructive {
-    color: var(--interactive-critical);
-
-    svg {
-      fill: var(--icon-critical);
-    }
-
-    &:hover {
-      background-color: var(--surface-critical-subdued-hovered);
-    }
-
-    &:active,
-    &.active {
-      background-color: var(--surface-critical-subdued-pressed);
-    }
-  }
-
-  &.disabled {
-    background-image: none;
-    color: var(--text-disabled);
-
-    .Prefix svg,
-    .Suffix svg {
-      fill: var(--icon-disabled);
-    }
-  }
+.NoResult {
+  gap: 0.5rem;
+  padding: 0.5rem;
+  text-align: center;
+  width: 100%;
 }