fix: group classname clash #20

if an ancestor component uses group,
it won't trigger the tailwind group-hover classes

Author: Amelia Wattenberger

src/components/cell.tsx

@@ -102,7 +102,7 @@ export const Cell = React.memo(function (props: CellProps) {
 
   return (
     <div
-      className="cell group"
+      className="cell"
       css={[
         tw`flex border-b border-r`,
         status === 'new' && tw`border-green-200`,
@@ -197,7 +197,7 @@ const CellInner = React.memo(function CellInner({
         <div
           className="cell__long-value"
           css={[
-            tw` absolute p-4 py-2 bg-white opacity-0 group-hover:opacity-100 z-30 border border-gray-200 shadow-md pointer-events-none`,
+            tw` absolute p-4 py-2 bg-white opacity-0 z-30 border border-gray-200 shadow-md pointer-events-none`,
             isNearBottomEdge ? tw`bottom-0` : tw`top-0`,
             isNearRightEdge ? tw`right-0` : tw`left-0`,
           ]}

src/components/editable-cell.tsx

@@ -132,7 +132,7 @@ export const EditableCell = React.memo(function (props: EditableCellProps) {
     ]}>
       {isFirstColumn && (
         <button
-          css={[tw`absolute h-full text-red-500! opacity-0 group-hover:opacity-100 focus:opacity-100`]}
+          css={[tw`absolute h-full text-red-500! opacity-0 focus:opacity-100`]}
           className="delete-button"
           onClick={e => {
             e.stopPropagation();

src/components/header.tsx

@@ -155,9 +155,9 @@ const HeaderTop = memo(({
         tw="absolute top-0 left-0 bottom-0 z-10 bg-gray-50 text-gray-600 shadow-md flex items-center"
       >
         <button
-          className="pin"
+          className="header__icon header__pin"
           css={[
-            tw`h-full p-2 flex items-center border-indigo-100 focus:bg-indigo-100! hover:bg-indigo-100! appearance-none focus:opacity-100 group-hover:opacity-100 text-indigo-400! bg-indigo-50! focus:ring-indigo-300`,
+            tw`h-full p-2 flex items-center border-indigo-100 focus:bg-indigo-100! hover:bg-indigo-100! appearance-none focus:opacity-100 text-indigo-400! bg-indigo-50! focus:ring-indigo-300`,
             isSticky ? tw`opacity-100` : tw`opacity-0 -ml-6! shadow-md`,
           ]}
           onClick={() => onSticky()}
@@ -192,10 +192,10 @@ const HeaderTop = memo(({
           </EditableHeader>
           {isEditable && (
             <button
-              className="header__icon"
+              className="header__icon header__delete"
               css={[
                 tw`h-full flex items-center justify-center text-red-500!`,
-                tw`opacity-0 group-hover:opacity-100 w-0 group-hover:w-auto p-0 group-hover:pl-1 group-hover:pr-2`,
+                tw`opacity-0 w-0 p-0`,
               ]}
               onClick={() =>
                 onDelete?.()
@@ -210,7 +210,7 @@ const HeaderTop = memo(({
               tw`flex items-center justify-center pl-1 pr-1 -mr-2`,
               activeSortDirection
                 ? tw`opacity-100`
-                : tw`opacity-0 group-hover:opacity-40`,
+                : tw`opacity-0 text-gray-400!`,
             ]}
             onClick={() =>
               onSort(columnName, activeSortDirection == 'asc' ? 'desc' : 'asc')
@@ -224,7 +224,7 @@ const HeaderTop = memo(({
           </button>
         </div>
         {!!metadata && (
-          <div tw="text-sm absolute bottom-0 bg-white p-4 text-indigo-500 transform translate-y-full border border-indigo-300 py-3 shadow-md left-0 right-0 pointer-events-none opacity-0 group-hover:opacity-100">
+          <div className="header__icon" tw="text-sm absolute bottom-0 bg-white p-4 text-indigo-500 transform translate-y-full border border-indigo-300 py-3 shadow-md left-0 right-0 pointer-events-none opacity-0">
             <div tw="pr-2 inline-block text-indigo-200">
               <InfoIcon />
             </div>

src/index.css

@@ -292,6 +292,10 @@ html,
 
 .cell:hover .cell__long-value {
   pointer-events: all;
+  opacity: 1;
+}
+.cell:hover .delete-button {
+  opacity: 1;
 }
 
 .header__title {
@@ -310,8 +314,14 @@ html,
   opacity: 0;
 }
 
-.header:hover .header__pin {
+.header:hover .header__icon {
+  opacity: 1;
+}
+.header:hover .header__delete {
   opacity: 1;
+  width: auto;
+  padding-left: 0.25em;
+  padding-right: 0.5em;
 }
 
 .sticky-grid__header:hover {