add icon-only variant for Button (#3460)

Author: jluyau

packages/@adobe/spectrum-css-temp/components/button/index.css

@@ -170,6 +170,11 @@ governing permissions and limitations under the License.
   .spectrum-Button-label + .spectrum-Icon {
     margin-inline-end: var(--spectrum-button-primary-text-gap);
   }
+
+  &.spectrum-Button--iconOnly {
+    min-inline-size: unset;
+    padding: var(--spectrum-global-dimension-size-65);
+  }
 }
 
 a.spectrum-Button,

packages/@react-spectrum/button/chromatic/Button.chromatic.tsx

@@ -121,6 +121,11 @@ function render(props: any = {}) {
         {...props}>
         默認
       </Button>
+      <Button
+        aria-label="Icon only"
+        {...props}>
+        <Bell />
+      </Button>
     </Flex>
   );
 }

packages/@react-spectrum/button/src/Button.tsx

@@ -10,7 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {
+  classNames,
+  SlotProvider,
+  useFocusableRef,
+  useHasChild,
+  useSlotProps,
+  useStyleProps
+} from '@react-spectrum/utils';
 import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
@@ -43,6 +50,7 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
   let {buttonProps, isPressed} = useButton(props, domRef);
   let {hoverProps, isHovered} = useHover({isDisabled});
   let {styleProps} = useStyleProps(otherProps);
+  let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);
 
   let buttonVariant = variant;
   if (VARIANT_MAPPING[variant]) {
@@ -62,6 +70,7 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
             `spectrum-Button--${buttonVariant}`,
             {
               'spectrum-Button--quiet': isQuiet,
+              'spectrum-Button--iconOnly': !hasLabel,
               'is-disabled': isDisabled,
               'is-active': isPressed,
               'is-hovered': isHovered

packages/@react-spectrum/button/stories/Button.stories.tsx

@@ -58,6 +58,11 @@ storiesOf('Button', module)
       </Flex>
     )
   )
+  .add('icon only', () => (
+    <Button variant="cta">
+      <Bell />
+    </Button>
+  ))
   .add(
     'variant: overBackground',
     () => (