@primer/react/lib-esm/Button/Button.js

An implementation of GitHub's Primer Design System using React

import { forwardRef } from 'react';
import { ButtonBase } from './ButtonBase.js';
import { defaultSxProp } from '../utils/defaultSxProp.js';
import { jsx } from 'react/jsx-runtime';

const ButtonComponent = /*#__PURE__*/forwardRef(({
  children,
  sx: sxProp = defaultSxProp,
  ...props
}, forwardedRef) => {
  const {
    block,
    size = 'medium',
    leadingVisual,
    trailingVisual,
    trailingAction
  } = props;
  let sxStyles = sxProp;
  const style = {};
  if (sxProp !== null && Object.keys(sxProp).length > 0) {
    sxStyles = generateCustomSxProp({
      block,
      size,
      leadingVisual,
      trailingVisual,
      trailingAction
    }, sxProp);

    // @ts-ignore sxProp can have color attribute
    const {
      color
    } = sxProp;
    if (color) style['--button-color'] = color;
  }
  return /*#__PURE__*/jsx(ButtonBase, {
    ref: forwardedRef,
    as: "button",
    sx: sxStyles,
    style: style,
    type: "button",
    ...props,
    children: children
  });
});

// This function is used to generate a custom cssSelector for the sxProp

// The usual sx prop can like this:
// sx={{
//   [`@media (max-width: 768px)`]: {
//     '& > ul': {
//       backgroundColor: 'deeppink',
//     },
//     '&:hover': {
//       backgroundColor: 'yellow',
//     },
//   },
//  '&:hover': {
//     backgroundColor: 'yellow',
//   },
//  '&': {
//  width : 320px
// }
// }}
//*
/* What we want for Button styles is this:
sx={{
//   [`@media (max-width: 768px)`]: {
//     '&[data-attribute="something"] > ul': {
//       backgroundColor: 'deeppink',
//     },
//     '&[data-attribute="something"]:hover': {
//       backgroundColor: 'yellow',
//     },
//   },
//  '&[data-attribute="something"]:hover': {
//     backgroundColor: 'yellow',
//   },
//  '&[data-attribute="something"]': {
//     width : 320px
//  }
// }}

// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
*/
function generateCustomSxProp(props, providedSx) {
  // Possible data attributes: data-size, data-block, data-no-visuals
  const size = `[data-size="${props.size}"]`;
  const block = props.block ? `[data-block="block"]` : '';
  const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]';

  // this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
  const cssSelector = `&${size}${block}${noVisuals}`; // &[data-size="small"][data-block="block"][data-no-visuals]

  const customSxProp = {};
  if (!providedSx) return customSxProp;else {
    customSxProp[cssSelector] = providedSx;
    return customSxProp;
  }
}
ButtonComponent.displayName = 'Button';

export { ButtonComponent, generateCustomSxProp };