fix(submenu): fix the 'active' property

snowball-tech · Mar 26, 2024 · 1d0219a · 1d0219a
1 parent 74896c4
commit 1d0219a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/packages/fractal/src/components/Menu/SubMenu.stories.tsx b/packages/fractal/src/components/Menu/SubMenu.stories.tsx
@@ -38,6 +38,7 @@ const meta: Meta<SubMenuProps> = {
  },
  },
  args: {
+ active: false,
  align: undefined,
  condensed: false,
  condensedItems: false,
@@ -65,6 +66,7 @@ type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
  render: ({
+ active = false,
  align,
  condensed = false,
  condensedItems = false,
@@ -82,6 +84,7 @@ export const Playground: Story = {
  <div className="h-[300px]">
  <Menu>
  <SubMenu
+ active={active}
  align={align}
  condensed={condensed}
  condensedItems={condensedItems}

diff --git a/packages/fractal/src/components/Menu/SubMenu.tsx b/packages/fractal/src/components/Menu/SubMenu.tsx
@@ -195,7 +195,6 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  : 'cursor-pointer text-dark',
  popup?.trigger?.className,
  )}
- data-highlighted={active || isOpen || undefined}
  element="div"
  role="menuitem"
  tabIndex={-1}
@@ -330,6 +329,7 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  props.className,
  popup?.className,
  )}
+ data-highlighted={active || isOpen || undefined}
  style={{
  ...(props.style ?? {}),
  ...(popup?.style ?? {}),
@@ -380,6 +380,7 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  'rounded-sm',
  props.className,
  )}
+ data-highlighted={active || isOpen || undefined}
  disabled={disabled}
  elevation={elevation}
  fullWidth

diff --git a/packages/fractal/src/styles/helpers.ts b/packages/fractal/src/styles/helpers.ts
@@ -330,29 +330,29 @@ export const alternatingBgColorLightClassNames = cj(
  '[&_.alternatee:nth-child(5n+1):hover]:bg-decorative-pink-90',
  '[&_.alternatee:nth-child(1):focus]:bg-decorative-pink-90',
  '[&_.alternatee:nth-child(5n+1):focus]:bg-decorative-pink-90',
- '[&_.alternatee:nth-child(5n+1)[data-highlighted]]:bg-decorative-pink-90',
+ '[&_.alternatee:nth-child(5n+1)[data-highlighted="true"]]:bg-decorative-pink-90',
 
  '[&_.alternatee:nth-child(2):hover]:bg-decorative-yellow-90',
  '[&_.alternatee:nth-child(5n+2):hover]:bg-decorative-yellow-90',
  '[&_.alternatee:nth-child(2):focus]:bg-decorative-yellow-90',
  '[&_.alternatee:nth-child(5n+2):focus]:bg-decorative-yellow-90',
- '[&_.alternatee:nth-child(5n+2)[data-highlighted]]:bg-decorative-yellow-90',
+ '[&_.alternatee:nth-child(5n+2)[data-highlighted="true"]]:bg-decorative-yellow-90',
 
  '[&_.alternatee:nth-child(3):hover]:bg-decorative-green-90',
  '[&_.alternatee:nth-child(5n+3):hover]:bg-decorative-green-90',
  '[&_.alternatee:nth-child(3):focus]:bg-decorative-green-90',
  '[&_.alternatee:nth-child(5n+3):focus]:bg-decorative-green-90',
- '[&_.alternatee:nth-child(5n+3)[data-highlighted]]:bg-decorative-green-90',
+ '[&_.alternatee:nth-child(5n+3)[data-highlighted="true"]]:bg-decorative-green-90',
 
  '[&_.alternatee:nth-child(4):hover]:bg-decorative-blue-90',
  '[&_.alternatee:nth-child(5n+4):hover]:bg-decorative-blue-90',
  '[&_.alternatee:nth-child(4):focus]:bg-decorative-blue-90',
  '[&_.alternatee:nth-child(5n+4):focus]:bg-decorative-blue-90',
- '[&_.alternatee:nth-child(5n+4)[data-highlighted]]:bg-decorative-blue-90',
+ '[&_.alternatee:nth-child(5n+4)[data-highlighted="true"]]:bg-decorative-blue-90',
 
  '[&_.alternatee:nth-child(5):hover]:bg-decorative-purple-90',
  '[&_.alternatee:nth-child(5n+5):hover]:bg-decorative-purple-90',
  '[&_.alternatee:nth-child(5):focus]:bg-decorative-purple-90',
  '[&_.alternatee:nth-child(5n+5):focus]:bg-decorative-purple-90',
- '[&_.alternatee:nth-child(5n+5)[data-highlighted]]:bg-decorative-purple-90',
+ '[&_.alternatee:nth-child(5n+5)[data-highlighted="true"]]:bg-decorative-purple-90',
 )