Merge pull request #658 from buildo/BEN-99-improvements

Author: gabro

packages/bento-design-system/src/List/ListItem.css.ts

@@ -7,14 +7,16 @@ export const listItemRecipe = strictRecipe({
       true: bentoSprinkles({
         cursor: { default: "pointer", disabled: "notAllowed" },
         background: {
-          hover: "primaryTransparentHoverBackground",
-          focus: "primaryTransparentFocusBackground",
+          default: "secondaryTransparentEnabledBackground",
+          hover: "secondaryTransparentHoverBackground",
+          focus: "secondaryTransparentFocusBackground",
+          disabled: "disabledTransparentBackground",
         },
       }),
     },
     focused: {
       true: bentoSprinkles({
-        background: "primaryTransparentFocusBackground",
+        background: "secondaryTransparentFocusBackground",
       }),
     },
     selected: {

packages/bento-design-system/src/Navigation/Config.ts

@@ -22,4 +22,5 @@ type ActiveVisualElementConfig = {
   lineWidth: SizeConfig<number | "100%">;
   lineHeight: SizeConfig<number>;
   lineColor: BentoSprinkles["decoration"];
+  lineOffset: SizeConfig<Exclude<BentoSprinkles["height"], "full">>;
 };

packages/bento-design-system/src/Navigation/Navigation.css.ts

@@ -4,9 +4,14 @@ import { bentoSprinkles } from "../internal";
 export const destinationRecipe = strictRecipe({
   base: bentoSprinkles({
     position: "relative",
+    background: {
+      default: "primaryTransparentEnabledBackground",
+      hover: "primaryTransparentHoverBackground",
+      focus: "primaryTransparentFocusBackground",
+    },
     color: { disabled: "disabledTransparentForeground" },
     fill: { disabled: "disabledTransparentForeground" },
-    cursor: { disabled: "notAllowed" },
+    cursor: { default: "pointer", disabled: "notAllowed" },
     outline: "none",
   }),
   variants: {
@@ -17,15 +22,8 @@ export const destinationRecipe = strictRecipe({
           hover: "secondaryTransparentHoverForeground",
           focus: "secondaryTransparentFocusForeground",
         },
-        background: {
-          default: "secondaryTransparentEnabledBackground",
-          hover: "secondaryTransparentHoverBackground",
-          focus: "secondaryTransparentFocusBackground",
-        },
-        cursor: "pointer",
       }),
       true: bentoSprinkles({
-        background: "secondaryTransparentEnabledBackground",
         color: "textPrimary",
       }),
     },

packages/bento-design-system/src/Navigation/Navigation.tsx

@@ -72,7 +72,7 @@ function Destination({
         position="absolute"
         left={0}
         right={0}
-        bottom={0}
+        bottom={config.activeVisualElement.lineOffset[size]}
         background="currentColor"
         color={config.activeVisualElement.lineColor}
         style={{

packages/bento-design-system/src/Pagination/Config.ts

@@ -1,11 +1,13 @@
-import { ButtonProps, PaginationItemsPerPage } from "..";
+import { ButtonProps, IconButtonProps, PaginationItemsPerPage } from "..";
 import { BentoSprinkles } from "../internal";
 
 export type PaginationConfig = {
   paddingY: BentoSprinkles["paddingY"];
   itemsPerPageOptions: PaginationItemsPerPage;
   dropdownButtonKind: ButtonProps["kind"];
+  dropdownButtonSize: ButtonProps["size"];
   navigationButtonKind: ButtonProps["kind"];
+  navigationButtonSize: IconButtonProps["size"];
   navigationButtonSpacing: BentoSprinkles["gap"];
   showDivider: boolean;
 };

packages/bento-design-system/src/Pagination/Pagination.tsx

@@ -50,6 +50,7 @@ function DropdownButton({ label, onPress, isDisabled }: DropdownButtonProps) {
     <Button
       kind={config.dropdownButtonKind}
       hierarchy="secondary"
+      size={config.dropdownButtonSize}
       label={label}
       icon={IconChevronDown}
       iconPosition="trailing"
@@ -158,7 +159,7 @@ export function Pagination(props: Props) {
                   hierarchy="secondary"
                   icon={IconChevronLeft}
                   label={messages.previousPageButtonLabel}
-                  size={24}
+                  size={config.navigationButtonSize}
                   onPress={() => onPageChange(page - 1)}
                   isDisabled={page === 1}
                 />
@@ -167,7 +168,7 @@ export function Pagination(props: Props) {
                   hierarchy="secondary"
                   icon={IconChevronRight}
                   label={messages.nextPageButtonLabel}
-                  size={24}
+                  size={config.navigationButtonSize}
                   onPress={() => onPageChange(page + 1)}
                   isDisabled={page === pageCount}
                 />

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -421,6 +421,10 @@ export const navigation: NavigationConfig = {
       medium: 16,
       large: 16,
     },
+    lineOffset: {
+      medium: 0,
+      large: 0,
+    },
   },
   uppercaseLabel: false,
   radius: {
@@ -433,7 +437,9 @@ export const pagination: PaginationConfig = {
   paddingY: 12,
   itemsPerPageOptions: [10, 25, 50, 100],
   dropdownButtonKind: "transparent",
+  dropdownButtonSize: "medium",
   navigationButtonKind: "transparent",
+  navigationButtonSize: 24,
   navigationButtonSpacing: 24,
   showDivider: true,
 };

packages/storybook/stories/Components/Pagination.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { PaginationItemsPerPage as ItemsPerPage, Pagination } from "../";
+import { BentoConfigProvider, PaginationItemsPerPage as ItemsPerPage, Pagination } from "..";
 import { action } from "@storybook/addon-actions";
 
 const meta = {
@@ -40,3 +40,20 @@ export const SinglePage = {
     pageCount: 1,
   },
 } satisfies Story;
+
+export const SmallButtons = {
+  decorators: [
+    (Story) => (
+      <BentoConfigProvider
+        value={{
+          pagination: {
+            dropdownButtonSize: "small",
+            navigationButtonSize: 16,
+          },
+        }}
+      >
+        <Story />
+      </BentoConfigProvider>
+    ),
+  ],
+} satisfies Story;