Merge 10c60a6 into a78ed77

primer · Oct 14, 2024 · 4f097cc · 4f097cc
2 parents a78ed77 + 10c60a6
commit 4f097cc
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 49 deletions.
diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
@@ -1,5 +1,5 @@
 /* Base styles */
-:where(.ButtonBase) {
+.ButtonBase {
   display: flex;
   min-width: max-content;
   height: var(--control-medium-size);
@@ -41,7 +41,7 @@
     box-shadow: none;
 
     & .Visual,
-    & .CounterLabel {
+    & .ButtonCounterLabel {
       color: inherit;
     }
   }
@@ -270,7 +270,7 @@
       box-shadow: none;
     }
 
-    & .CounterLabel {
+    & .ButtonCounterLabel {
       background-color: var(--buttonCounter-default-bgColor-rest) !important; /* temporarily override our own sx prop */
     }
 
@@ -313,7 +313,7 @@
       box-shadow: none;
     }
 
-    & .CounterLabel {
+    & .ButtonCounterLabel {
       color: var(--button-primary-fgColor-rest) !important; /* temporarily override our own sx prop */
       background-color: var(--buttonCounter-primary-bgColor-rest) !important; /* temporarily override our own sx prop */
     }
@@ -348,7 +348,7 @@
       border-color: var(--button-danger-borderColor-hover);
       box-shadow: var(--shadow-resting-small);
 
-      & .CounterLabel {
+      & .ButtonCounterLabel {
         color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */
         background-color: var(--buttonCounter-danger-bgColor-hover) !important;
       }
@@ -364,7 +364,7 @@
       border-color: var(--button-danger-borderColor-active);
       box-shadow: var(--button-danger-shadow-selected);
 
-      & .CounterLabel {
+      & .ButtonCounterLabel {
         color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */
         background-color: var(--buttonCounter-danger-bgColor-hover) !important;
       }
@@ -380,13 +380,13 @@
       border-color: var(--button-default-borderColor-disabled);
       box-shadow: none;
 
-      & .CounterLabel {
+      & .ButtonCounterLabel {
         color: var(--buttonCounter-danger-fgColor-disabled) !important; /* temporarily override our own sx prop */
         background-color: var(--buttonCounter-danger-bgColor-disabled) !important;
       }
     }
 
-    & .CounterLabel {
+    & .ButtonCounterLabel {
       color: var(--buttonCounter-danger-fgColor-rest) !important; /* temporarily override our own sx prop */
       background-color: var(--buttonCounter-danger-bgColor-rest) !important;
     }
@@ -434,7 +434,7 @@
       color: var(--button-invisible-iconColor-rest);
     }
 
-    & .CounterLabel {
+    & .ButtonCounterLabel {
       background-color: var(--buttonCounter-invisible-bgColor-rest) !important;
     }
 
@@ -491,11 +491,10 @@
     color: var(--button-inactive-fgColor);
     cursor: auto;
     background-color: var(--button-inactive-bgColor);
-    /* stylelint-disable-next-line primer/colors */
     border-color: var(--button-inactive-bgColor);
 
     & .Visual,
-    & .CounterLabel {
+    & .ButtonCounterLabel {
       color: inherit !important;
     }
   }

diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
@@ -189,7 +189,7 @@ const ButtonBase = forwardRef(
                       count !== undefined && !TrailingVisual
                         ? renderModuleVisual(
                             () => (
-                              <CounterLabel className={classes.CounterLabel} data-component="ButtonCounter">
+                              <CounterLabel className={classes.ButtonCounterLabel} data-component="ButtonCounter">
                                 {count}
                               </CounterLabel>
                             ),
@@ -305,7 +305,7 @@ const ButtonBase = forwardRef(
                     count !== undefined && !TrailingVisual
                       ? renderModuleVisual(
                           () => (
-                            <CounterLabel className={classes.CounterLabel} data-component="ButtonCounter">
+                            <CounterLabel className={classes.ButtonCounterLabel} data-component="ButtonCounter">
                               {count}
                             </CounterLabel>
                           ),

diff --git a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import ButtonGroup from './ButtonGroup'
+import {Button, IconButton} from '../Button'
+import {PlusIcon, DashIcon, CopilotIcon} from '@primer/octicons-react'
+import {Box, Tooltip, ThemeProvider, BaseStyles} from '..'
+
+const meta: Meta<typeof ButtonGroup> = {
+  title: 'Components/ButtonGroup/DevOnly',
+  component: ButtonGroup,
+  decorators: [
+    Story => {
+      // Add some padding to the wrapper box to make sure tooltip v1 is always in the viewport
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Box padding={5}>{Story()}</Box>
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    },
+  ],
+}
+
+export default meta
+
+export const LinkAndButtonWithTooltip2 = () => (
+  <ButtonGroup sx={{pl: 2}}>
+    <Tooltip text="Additional info about the link">
+      <Button as="a" href="https://primer.style">
+        Link
+      </Button>
+    </Tooltip>
+    <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
+  </ButtonGroup>
+)
+
+export const ButtonAndLinkWithTooltip2 = () => (
+  <ButtonGroup sx={{pl: 2}}>
+    <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
+    <Tooltip text="Additional info about the link">
+      <Button as="a" href="https://primer.style">
+        Link
+      </Button>
+    </Tooltip>
+  </ButtonGroup>
+)
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx
@@ -2,6 +2,9 @@ import React, {useState} from 'react'
 import type {Meta} from '@storybook/react'
 import ButtonGroup from './ButtonGroup'
 import {IconButton, Button} from '../Button'
+import {ActionMenu} from '../ActionMenu'
+import {ActionList} from '../ActionList'
+import {Tooltip} from '../next'
 import {PlusIcon, DashIcon} from '@primer/octicons-react'
 
 export default {
@@ -12,10 +15,8 @@ export default {
 export const IconButtons = () => (
   <ButtonGroup>
     {/* We can remove these unsafe props after we resolve https://github.com/primer/react/issues/4129 */}
-    {/* eslint-disable-next-line primer-react/a11y-remove-disable-tooltip */}
-    <IconButton unsafeDisableTooltip={true} icon={PlusIcon} aria-label="Add" />
-    {/* eslint-disable-next-line primer-react/a11y-remove-disable-tooltip */}
-    <IconButton unsafeDisableTooltip={true} icon={DashIcon} aria-label="Subtract" />
+    <IconButton icon={PlusIcon} aria-label="Add" />
+    <IconButton icon={DashIcon} aria-label="Subtract" />
   </ButtonGroup>
 )
 
@@ -35,3 +36,65 @@ export const LoadingButtons = () => {
     </ButtonGroup>
   )
 }
+
+export const IconButtonsWithTooltip = () => (
+  <ButtonGroup>
+    <IconButton icon={PlusIcon} aria-label="Add" />
+    <IconButton icon={DashIcon} aria-label="Subtract" />
+  </ButtonGroup>
+)
+export const ButtonAndLink = () => (
+  <ButtonGroup>
+    <Button>Button</Button>
+    <Button as="a" href="https://primer.style">
+      Link
+    </Button>
+  </ButtonGroup>
+)
+
+export const LinksWithTooltip = () => (
+  <ButtonGroup>
+    <Tooltip text="Additonal text for link 1" direction="s">
+      <Button as="a" href="https://primer.style">
+        Sample Link 1
+      </Button>
+    </Tooltip>
+    <Tooltip text="Additonal text for link 2" direction="s">
+      <Button as="a" href="https://primer.style">
+        Sample Link 2
+      </Button>
+    </Tooltip>
+  </ButtonGroup>
+)
+
+export const InactiveButtonsGroup = () => {
+  const primaryButton = (
+    <Button inactive={true} aria-disabled={true} onClick={() => {}}>
+      Primary Button
+    </Button>
+  )
+
+  const secondaryButton = (
+    <IconButton aria-label="Secondary Button Aria Label" aria-disabled={true} inactive={true} icon={DashIcon} />
+  )
+
+  return (
+    <ButtonGroup>
+      <Tooltip text="This button is inactive" direction="ne">
+        {primaryButton}
+      </Tooltip>
+
+      <ActionMenu open={false} onOpenChange={() => {}}>
+        <ActionMenu.Anchor>
+          <Tooltip text="this button is inactive" direction="ne" type="label">
+            {secondaryButton}
+          </Tooltip>
+        </ActionMenu.Anchor>
+        <ActionMenu.Overlay align="end">
+          <ActionList.Item>Item 1</ActionList.Item>
+          <ActionList.Item>Item 2</ActionList.Item>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </ButtonGroup>
+  )
+}
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.module.css b/packages/react/src/ButtonGroup/ButtonGroup.module.css
@@ -3,20 +3,31 @@
   vertical-align: middle;
   isolation: isolate;
 
-  & > *:not([data-loading-wrapper]) {
+  & * {
     /* stylelint-disable-next-line primer/spacing */
     margin-inline-end: -1px;
     position: relative;
-    border-radius: 0;
+
+    /* reset border-radius */
+    button,
+    a {
+      border-radius: 0;
+    }
 
     &:first-child {
-      border-top-left-radius: var(--borderRadius-medium);
-      border-bottom-left-radius: var(--borderRadius-medium);
+      button,
+      a {
+        border-top-left-radius: var(--borderRadius-medium);
+        border-bottom-left-radius: var(--borderRadius-medium);
+      }
     }
 
     &:last-child {
-      border-top-right-radius: var(--borderRadius-medium);
-      border-bottom-right-radius: var(--borderRadius-medium);
+      button,
+      a {
+        border-top-right-radius: var(--borderRadius-medium);
+        border-bottom-right-radius: var(--borderRadius-medium);
+      }
     }
 
     &:focus,
@@ -26,13 +37,27 @@
     }
   }
 
+  &:has([data-loading-wrapper]) {
+    outline: solid 1px deeppink;
+
+    /* &:first-child {
+      button,
+      a {
+        border-top-left-radius: var(--borderRadius-medium);
+        border-bottom-left-radius: var(--borderRadius-medium);
+      }
+    } */
+  }
+
   /* if child is loading button */
-  [data-loading-wrapper] {
+
+  /* [data-loading-wrapper] {
     &:first-child {
       button,
       a {
         border-top-left-radius: var(--borderRadius-medium);
         border-bottom-left-radius: var(--borderRadius-medium);
+        outline: solid 1px red;
       }
     }
 
@@ -43,18 +68,19 @@
         border-bottom-right-radius: var(--borderRadius-medium);
       }
     }
-  }
+  } */
 
   [data-loading-wrapper] > * {
     /* stylelint-disable-next-line primer/spacing */
-    margin-inline-end: -1px;
+
+    /* margin-inline-end: -1px;
     position: relative;
     border-radius: 0;
 
     &:focus,
     &:active,
     &:hover {
       z-index: 1;
-    }
+    } */
   }
 }