Skip to content

Commit

Permalink
Merge pull request #36 from internxt/fix_margin
Browse files Browse the repository at this point in the history 
parametrize menu margin
  • Loading branch information
@Jona-Internxt
Jona-Internxt authored Dec 17, 2024
2 parents b89f911 + 73d8151 commit 06fea79
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 104 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@internxt/ui",
"version": "0.0.8",
"version": "0.0.9",
"description": "Library of Internxt components",
"repository": {
"type": "git",
Expand Down
22 changes: 8 additions & 14 deletions src/components/breadcrumbs/__test__/__snapshots__/Breadcrumbs.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@ exports[`Breadcrumbs Component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
undefined
undefined
false
undefined
"
>
<div
Expand All @@ -102,9 +102,6 @@ exports[`Breadcrumbs Component > should match snapshot 1`] = `
</span>
</div>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand Down Expand Up @@ -248,10 +245,10 @@ exports[`Breadcrumbs Component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
undefined
undefined
false
undefined
"
>
<div
Expand All @@ -269,9 +266,6 @@ exports[`Breadcrumbs Component > should match snapshot 1`] = `
</span>
</div>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand Down
54 changes: 18 additions & 36 deletions src/components/contextMenu/__test__/__snapshots__/ContextMenu.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
undefined
undefined
false
text-gray-80
"
>
Expand All @@ -31,9 +31,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
Option 1
</span>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand All @@ -43,9 +40,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
false
undefined
false
text-gray-80
"
>
Expand All @@ -56,9 +53,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
Option 2
</span>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand All @@ -77,9 +71,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
undefined
undefined
false
text-gray-80
"
>
Expand All @@ -90,9 +84,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
Option 3
</span>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand All @@ -114,9 +105,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
undefined
undefined
false
text-gray-80
"
>
Expand All @@ -127,9 +118,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
Option 1
</span>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand All @@ -139,9 +127,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
false
undefined
false
text-gray-80
"
>
Expand All @@ -152,9 +140,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
Option 2
</span>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand All @@ -173,9 +158,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
undefined
undefined
false
text-gray-80
"
>
Expand All @@ -186,9 +171,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
Option 3
</span>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand Down
14 changes: 13 additions & 1 deletion src/components/dropdown/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,16 @@ export type DropdownProps<T> = {
* allowing customization of the dropdown's logic.
*/

const extractPaddingValues = (className: string) => {
const pxMatch = className.match(/px-(\d+(\.\d+)?)/);
const pyMatch = className.match(/py-(\d+(\.\d+)?)/);

const px = pxMatch ? pxMatch[1] : undefined;
const py = pyMatch ? pyMatch[1] : undefined;

return { px, py };
};

const Dropdown = <T,>({
children,
options,
Expand Down Expand Up @@ -94,6 +104,8 @@ const Dropdown = <T,>({
const toggleMenu = () => setIsOpen((prev) => !prev);
const closeMenu = () => setIsOpen(false);

const { px, py } = extractPaddingValues(classMenuItems);

return (
<div className="relative outline-none" ref={containerRef}>
<button
Expand All @@ -113,7 +125,7 @@ const Dropdown = <T,>({
data-testid="menu-dropdown"
>
<div className={`absolute ${classMenuItems}`}>
<Menu item={item} isOpen={isOpen} handleMenuClose={closeMenu} menu={allItems} />
<Menu item={item} isOpen={isOpen} handleMenuClose={closeMenu} menu={allItems} paddingX={px} paddingY={py} />
</div>
</div>
</div>
Expand Down
27 changes: 9 additions & 18 deletions src/components/dropdown/__test__/__snapshots__/Dropdown.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ exports[`Dropdown component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
undefined
undefined
false
text-gray-80
"
>
Expand All @@ -42,9 +42,6 @@ exports[`Dropdown component > should match snapshot 1`] = `
Option 1
</span>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand All @@ -54,9 +51,9 @@ exports[`Dropdown component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
undefined
undefined
false
text-gray-80
"
>
Expand All @@ -67,9 +64,6 @@ exports[`Dropdown component > should match snapshot 1`] = `
Option 2
</span>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand All @@ -79,9 +73,9 @@ exports[`Dropdown component > should match snapshot 1`] = `
>
<div
class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
undefined
undefined
false
text-gray-80
"
>
Expand All @@ -92,9 +86,6 @@ exports[`Dropdown component > should match snapshot 1`] = `
Action 1
</span>
</div>
<span
class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
/>
</div>
</div>
</div>
Expand Down
46 changes: 33 additions & 13 deletions src/components/menu/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ export interface MenuProps<T> {
menu?: MenuItemsType<T>;
handleMenuClose: () => void;
genericEnterKey?: () => void;
paddingX?: string;
paddingY?: string;
}

/**
Expand All @@ -50,6 +52,12 @@ export interface MenuProps<T> {
* @property {() => void} [genericEnterKey]
* - Optional callback for when the Enter key is pressed without selecting a menu item.
*
* @property {string} [paddingX='px-4']
* - Optional padding for the X axis (horizontal) of each menu item. Defaults to `px-4`.
*
* @property {string} [paddingY='py-1.5']
* - Optional padding for the Y axis (vertical) of each menu item. Defaults to `py-1.5`.
*
* @returns {JSX.Element}
* - The rendered Menu component.
*
Expand All @@ -62,7 +70,15 @@ export interface MenuProps<T> {
* It features a dynamic index for item selection, with keyboard and mouse-based navigation.
*/

const Menu = <T,>({ item, menu, isOpen, genericEnterKey, handleMenuClose }: MenuProps<T>): JSX.Element => {
const Menu = <T,>({
item,
menu,
isOpen,
genericEnterKey,
handleMenuClose,
paddingX = 'px-4',
paddingY = 'py-1.5',
}: MenuProps<T>): JSX.Element => {
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
const [enterPressed, setEnterPressed] = useState<boolean>(false);
const handleMouseEnter = (index: number) => {
Expand Down Expand Up @@ -150,7 +166,9 @@ const Menu = <T,>({ item, menu, isOpen, genericEnterKey, handleMenuClose }: Menu
);

return (
<div className="z-20 mt-0 flex flex-col rounded-lg bg-surface py-1.5 shadow-subtle-hard outline-none dark:bg-gray-5">
<div
className={`z-20 mt-0 flex flex-col rounded-lg bg-surface ${paddingY} shadow-subtle-hard outline-none dark:bg-gray-5`}
>
{menu?.map((option, i) => (
<div key={i}>
{option && option.separator ? (
Expand All @@ -172,11 +190,11 @@ const Menu = <T,>({ item, menu, isOpen, genericEnterKey, handleMenuClose }: Menu
onMouseEnter={() => handleMouseEnter(i)}
>
<div
className={`flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
${item && option.disabled?.(item) ? 'font-medium text-gray-50' : ''}
${item && option.isTitle?.(item) && !option.disabled?.(item) ? 'font-medium text-gray-100' : ''}
${selectedIndex === i && item && !option.disabled?.(item) ? 'bg-gray-5 text-gray-100 dark:bg-gray-10' : ''}
${item && !option.disabled?.(item) && !option.isTitle?.(item) && selectedIndex !== i ? 'text-gray-80' : ''}
className={`flex cursor-pointer flex-row whitespace-nowrap ${paddingX} ${paddingY} text-base
${item && option.disabled?.(item) && 'font-medium text-gray-50'}
${item && option.isTitle?.(item) && !option.disabled?.(item) && 'font-medium text-gray-100'}
${selectedIndex === i && item && !option.disabled?.(item) && 'bg-gray-5 text-gray-100 dark:bg-gray-10'}
${item && !option.disabled?.(item) && !option.isTitle?.(item) && selectedIndex !== i && 'text-gray-80'}
`}
>
{option.node ? (
Expand All @@ -187,12 +205,14 @@ const Menu = <T,>({ item, menu, isOpen, genericEnterKey, handleMenuClose }: Menu
<span>{option.name}</span>
</div>
)}
<span className="ml-5 flex grow items-center justify-end text-sm text-gray-40">
{option.keyboardShortcutOptions?.keyboardShortcutIcon && (
<option.keyboardShortcutOptions.keyboardShortcutIcon size={14} />
)}
{option.keyboardShortcutOptions?.keyboardShortcutText ?? ''}
</span>
{option.keyboardShortcutOptions && (
<span className="ml-5 flex grow items-center justify-end text-sm text-gray-40">
{option.keyboardShortcutOptions?.keyboardShortcutIcon && (
<option.keyboardShortcutOptions.keyboardShortcutIcon size={14} />
)}
{option.keyboardShortcutOptions?.keyboardShortcutText ?? ''}
</span>
)}
</div>
</div>
)
Expand Down
Loading

0 comments on commit 06fea79

Please sign in to comment.