How can you name a group

[joceqo]

How can we do that https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups in pandacss ?

[anubra266]

Keeping list code for future playaround

import { css, cx } from 'styled-system/css';
import { circle, flex } from 'styled-system/patterns';

export const App = () => {
  return (
    <ul className={css({ p: '6' })}>
      {people.map((person) => (
        <li
          className={cx(
            'group item',
            flex({
              pos: 'relative',
              align: 'center',
              justify: 'space-between',
              rounded: 'xl',
              p: '4',
              _hover: { bg: 'slate.100' },
            })
          )}
        >
          <div className={flex({ gap: '4' })}>
            <div className={css({ flexShrink: '0' })}>
              <img
                className={circle({ size: '12' })}
                src={person.imageUrl}
                alt=""
              />
            </div>
            <div
              className={css({ w: 'full', textStyle: 'sm', lineHeight: '1.7' })}
            >
              <a
                href="#"
                className={css({ fontWeight: 'semibold', color: 'slate.900' })}
              >
                <span
                  className={css({
                    pos: 'absolute',
                    inset: '0',
                    rounded: 'xl',
                  })}
                  aria-hidden="true"
                ></span>
                {person.name}
              </a>
              <div
                className={css({
                  color: 'slate.500',
                })}
              >
                {person.title}
              </div>
            </div>
          </div>
          <a
            href="#"
            className={cx(
              'group edit',
              flex({
                visibility: 'hidden',
                pos: 'relative',
                align: 'center',
                whiteSpace: 'nowrap',
                rounded: 'full',
                py: '1',
                pl: '4',
                pr: '3',
                textStyle: 'sm',
                color: 'slate.500',
                transition: 'all',
                '.group:is(:hover, [data-hover]) &':{
                   visibility: 'visible'
                }
                // group-hover/item:visible
              })
            )}
          >
            <span
              className={css({
                fontWeight: 'semibold',
                transition: 'all',
                // group-hover/edit:text-gray-700
              })}
            >
              Call
            </span>
            <svg
              className={css({
                mt: '1px',
                h: '5',
                w: '5',
                color: 'slate.400',
                transition: 'all',
                // group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500
              })}
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                clip-rule="evenodd"
              ></path>
            </svg>
          </a>
        </li>
      ))}
    </ul>
  );
};

const people = [
  {
    name: 'Leslie Abcott',
    title: 'Co Founder / CEO',
    imageUrl:
      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
  },
  {
    name: 'Hector Adams',
    title: 'VP, Marketing',
    imageUrl:
      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80',
  },
  {
    name: 'Blake Alexander',
    title: 'Account Coordinator',
    imageUrl:
      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80',
  },
];

[FranciscoKloganB]

@anubra266 Need your help figuring this out. What does the & ampersand do at the end of the snippet you provided?

// snippet of original code above
cx(
  'group edit',
  flex({
    '.group:is(:hover, [data-hover]) &': {
            visibility: 'visible'
        }
    })
)

Allegedly the two following HTML/Tailwind code should generate the CSS selectors below.

<div class="group-has-[[data-sidebar=menu-action]]/edit:m-2 group-data-[collapsible=icon]:p-2">

.group[data-collapsible="icon"] {
  margin: 8rem;
}

.group.edit:has([data-sidebar=menu-action]) {
  padding: 8rem;
}

[anubra266]

@FranciscoKloganB & is a placeholder for the current element. i.e. the owner of the className where you're currently defining a style. E.g. If I say .man & it means apply the styles if this element is a child of .man
If I do .man > & it means apply them if it's a direct child of .man
.man + & apply if it's a sibling following .man

Basically in a normal css file, you do stuff like .woman > .daughter, here .daughter is the styling target. But now that we're within className of some element, & becomes a placeholder for that element, meaning it becomes .woman > &

[FranciscoKloganB]

@anubra266 Thank you for the explanation, I think I understand. Basically & would be some like this of some sort and would the & would be the highlighted part on the screenshot below.

Thanks for clarifying. I'm trying to create some functions to help me do some "selectors" that I was not able to create using static conditions.