@atlaskit/button

Version:
A button triggers an event or action. They let users know what will happen next.
65 lines (59 loc) • 1.66 kB
JavaScript
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

import { getCss } from '../shared/get-css';
const stateToSelectorMap = {
  focus: '&:focus',
  focusSelected: '&:focus',
  hover: '&:hover',
  active: '&:active',
  disabled: '&[disabled]'
};

// Mapping the new clean css back to the legacy theme format.
// The legacy theme format has all styles at the top level (no nested selectors)
// and uses `getSpecifiers()` to apply the style to all pseudo states
export function getCustomCss({
  appearance = 'default',
  spacing = 'default',
  isSelected = false,
  shouldFitContainer = false,
  iconIsOnlyChild = false,
  isLoading = false,
  state
}) {
  let result = getCss({
    appearance,
    spacing,
    isSelected,
    shouldFitContainer,
    isOnlySingleIcon: iconIsOnlyChild
  });

  // we need to disable the default browser focus styles always
  // this is because we are not expressing that we can have two pseudo states at a time
  result.outline = 'none';

  // Pulling relevant styles up to the top level
  const selector = stateToSelectorMap[state];
  if (selector) {
    result = {
      ...result,
      ...result[selector]
    };
  }
  if (isLoading) {
    result = {
      ...result,
      // Pull overlay styles up to the top
      ...result['&[data-has-overlay="true"]']
    };
  }

  // Delete all selectors and just keep root styles
  Object.keys(result).forEach(key => {
    // want to keep this one
    if (key === '&::-moz-focus-inner') {
      return;
    }

    // Not using .startsWith for ie11
    if (key.indexOf('&') === 0) {
      delete result[key];
    }
  });
  return result;
}