fix(Button): unify all button styles into a single object (#271)

Author: tenphi

.changeset/warm-donkeys-joke.md

@@ -0,0 +1,7 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add new `special` theme for `Button` and `Select` components.
+Allow single input layout for `RangeSlider` component.
+Add `ellipsis` property to `Select` component to allow text overflow of selected value.

.storybook/main.js

@@ -50,7 +50,7 @@ const config = {
  },
  ],
  webpackFinal: (config) => {
- config.plugins.push(new webpack.DefinePlugin({ SC_DISABLE_SPEEDY: true }));
+ config.plugins.push(new webpack.DefinePlugin({ SC_DISABLE_SPEEDY: false }));
  config.performance.hints = false;
 
  return config;

jest.config.js

@@ -1,3 +1,5 @@
+process.env.SC_DISABLE_SPEEDY = 'false';
+
 /** @type {import('@jest/types').Config.InitialOptions} */
 const config = {
  coverageDirectory: './coverage/',

src/components/actions/Action.tsx

@@ -1,27 +1,22 @@
-import { forwardRef, MouseEventHandler, useCallback, useContext } from 'react';
-import { useHover } from '@react-aria/interactions';
-import { useButton } from '@react-aria/button';
+import { forwardRef, MouseEventHandler } from 'react';
 import { AriaButtonProps } from '@react-types/button';
-import { useFocusableRef } from '@react-spectrum/utils';
 import { FocusableRef } from '@react-types/shared';
 
-import { UIKitContext } from '../../provider';
-import { mergeProps } from '../../utils/react';
-import { useFocus } from '../../utils/react/interactions';
 import {
  BaseProps,
  BaseStyleProps,
  CONTAINER_STYLES,
  ContainerStyleProps,
  extractStyles,
- filterBaseProps,
  Styles,
  TagNameProps,
  TEXT_STYLES,
  TextStyleProps,
- Element,
+ tasty,
 } from '../../tasty';
 
+import { useAction } from './use-action';
+
 export interface CubeActionProps
  extends BaseProps,
  TagNameProps,
@@ -37,92 +32,11 @@ export interface CubeActionProps
  onMouseLeave?: MouseEventHandler;
 }
 
-const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
-
-/**
- * Helper to open link.
- * @param {String} href
- * @param {String|Boolean} [target]
- */
-export function openLink(href, target?) {
- const link = document.createElement('a');
-
- link.href = href;
-
- if (target) {
- link.target = target === true ? '_blank' : target;
- }
-
- document.body.appendChild(link);
-
- link.click();
-
- document.body.removeChild(link);
-}
-
-export function parseTo(to): {
- newTab: boolean;
- nativeRoute: boolean;
- href: string | undefined;
-} {
- const newTab = to && typeof to === 'string' && to.startsWith('!');
- const nativeRoute = to && typeof to === 'string' && to.startsWith('@');
- const href: string | undefined =
- to && typeof to === 'string'
- ? newTab || nativeRoute
- ? to.slice(1)
- : to
- : undefined;
-
- return {
- newTab,
- nativeRoute,
- href,
- };
-}
-
-export function performClickHandler(evt, router, to, onPress) {
- const { newTab, nativeRoute, href } = parseTo(to);
-
- onPress?.(evt);
-
- if (!to) return;
-
- if (evt.shiftKey || evt.metaKey || newTab) {
- openLink(href, true);
-
- return;
- }
-
- if (nativeRoute) {
- openLink(href || window.location.href);
- } else if (href && href.startsWith('#')) {
- const id = href.slice(1);
- const element = document.getElementById(id);
-
- if (element) {
- element.scrollIntoView({
- behavior: 'smooth',
- block: 'start',
- inline: 'nearest',
- });
-
- return;
- }
- }
-
- if (router) {
- router.push(href);
- } else if (href) {
- window.location.href = href;
- }
-}
-
-const DEFAULT_STYLES: Styles = {
+const DEFAULT_ACTION_STYLES: Styles = {
  reset: 'button',
  position: 'relative',
  margin: 0,
- fontFamily: 'var(--font)',
+ preset: 'inherit',
  border: 0,
  padding: 0,
  outline: {
@@ -131,74 +45,27 @@ const DEFAULT_STYLES: Styles = {
  },
  transition: 'theme',
  cursor: 'pointer',
+ textDecoration: 'none',
+ fill: '#clear',
 } as const;
 
+const ActionElement = tasty({
+ as: 'button',
+ styles: DEFAULT_ACTION_STYLES,
+});
+
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
 
 export const Action = forwardRef(function Action(
  { to, as, htmlType, label, theme, mods, onPress, ...props }: CubeActionProps,
  ref: FocusableRef<HTMLElement>,
 ) {
- as = to ? 'a' : as || 'button';
-
- const router = useContext(UIKitContext).router;
- const isDisabled = props.isDisabled;
- const { newTab, href } = parseTo(to);
- const target = newTab ? '_blank' : undefined;
- const domRef = useFocusableRef(ref);
- const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
-
- const customOnPress = useCallback(
- (evt) => {
- performClickHandler(evt, router, to, onPress);
- },
- [router, to, onPress],
+ const { actionProps } = useAction(
+ { to, as, htmlType, label, onPress, mods, ...props },
+ ref,
  );
 
- let { buttonProps, isPressed } = useButton(
- {
- ...props,
- onPress: customOnPress,
- },
- domRef,
- );
- let { hoverProps, isHovered } = useHover({ isDisabled });
- let { focusProps, isFocused } = useFocus({ isDisabled }, true);
-
- const customProps = to
- ? {
- onClick(evt) {
- evt.preventDefault();
- },
- }
- : {};
+ const styles = extractStyles(props, STYLE_PROPS);
 
- return (
- <Element
- mods={{
- hovered: isHovered && !isDisabled,
- pressed: isPressed && !isDisabled,
- focused: isFocused && !isDisabled,
- disabled: isDisabled,
- ...mods,
- }}
- aria-label={label}
- data-theme={theme}
- {...mergeProps(
- buttonProps,
- hoverProps,
- focusProps,
- customProps,
- filterBaseProps(props, FILTER_OPTIONS),
- )}
- ref={domRef}
- type={htmlType || 'button'}
- rel={as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined}
- as={as}
- isDisabled={isDisabled}
- styles={styles}
- target={target}
- href={href}
- />
- );
+ return <ActionElement data-theme={theme} {...actionProps} styles={styles} />;
 });