How to use @shopify/css-utilities - 10 common examples

if (process.env.NODE_ENV === 'development') {
      // eslint-disable-next-line no-console
      console.warn(
        intl.translate('Polaris.Spinner.warningMessage', {
          color,
          size,
          colors: COLORS_FOR_LARGE_SPINNER.join(', '),
        }),
      );
    }

    // eslint-disable-next-line no-param-reassign
    size = 'small';
  }

  const className = classNames(
    styles.Spinner,
    color && styles[variationName('color', color)],
    size && styles[variationName('size', size)],
  );

  const spinnerSVG = size === 'large' ? spinnerLarge : spinnerSmall;

  return (
    <img aria-label="{accessibilityLabel}" role="status" draggable="{false}" alt="">

console.warn(
        intl.translate('Polaris.Spinner.warningMessage', {
          color,
          size,
          colors: COLORS_FOR_LARGE_SPINNER.join(', '),
        }),
      );
    }

    // eslint-disable-next-line no-param-reassign
    size = 'small';
  }

  const className = classNames(
    styles.Spinner,
    color && styles[variationName('color', color)],
    size && styles[variationName('size', size)],
  );

  const spinnerSVG = size === 'large' ? spinnerLarge : spinnerSmall;

  return (
    <img aria-label="{accessibilityLabel}" role="status" draggable="{false}" alt="">
  );
}

intl.translate('Polaris.Spinner.warningMessage', {
          color,
          size,
          colors: COLORS_FOR_LARGE_SPINNER.join(', '),
        }),
      );
    }

    // eslint-disable-next-line no-param-reassign
    size = 'small';
  }

  const className = classNames(
    styles.Spinner,
    color && styles[variationName('color', color)],
    size && styles[variationName('size', size)],
  );

  const spinnerSVG = size === 'large' ? spinnerLarge : spinnerSmall;

  return (
    <img aria-label="{accessibilityLabel}" role="status" draggable="{false}" alt="">
  );
}

) : null;

    const tabsMarkup = visibleTabs
      .sort((tabA, tabB) => tabA - tabB)
      .map((tabIndex) => this.renderTabMarkup(tabs[tabIndex], tabIndex));

    const disclosureActivatorVisible = visibleTabs.length < tabs.length;

    const classname = classNames(
      styles.Tabs,
      fitted && styles.fitted,
      disclosureActivatorVisible && styles.fillSpace,
    );

    const disclosureTabClassName = classNames(
      styles.DisclosureTab,
      disclosureActivatorVisible && styles['DisclosureTab-visible'],
    );

    const activator = (
      <button tabindex="{-1}">
        
      </button>
    );

    return (
      <div></div>

collapsed,
      columnVisibilityData,
      heights,
      sortedColumnIndex = initialSortColumnIndex,
      sortDirection = defaultSortDirection,
      isScrolledFarthestLeft,
      isScrolledFarthestRight,
    } = this.state;

    const className = classNames(
      styles.DataTable,
      collapsed && styles.collapsed,
      footerContent && styles.hasFooter,
    );

    const wrapperClassName = classNames(
      styles.TableWrapper,
      collapsed && styles.collapsed,
    );

    const footerClassName = classNames(footerContent && styles.TableFoot);

    const footerMarkup = footerContent ? (
      
        {this.renderFooter()}
      
    ) : null;

    const totalsMarkup = totals ? (
      {totals.map(this.renderTotals)}
    ) : null;

isScrolledFarthestLeft,
      isScrolledFarthestRight,
    } = this.state;

    const className = classNames(
      styles.DataTable,
      collapsed && styles.collapsed,
      footerContent && styles.hasFooter,
    );

    const wrapperClassName = classNames(
      styles.TableWrapper,
      collapsed && styles.collapsed,
    );

    const footerClassName = classNames(footerContent && styles.TableFoot);

    const footerMarkup = footerContent ? (
      
        {this.renderFooter()}
      
    ) : null;

    const totalsMarkup = totals ? (
      {totals.map(this.renderTotals)}
    ) : null;

    const headingMarkup = (
      
        {headings.map((heading, headingIndex) => {
          let sortableHeadingProps;
          const id = `heading-cell-${headingIndex}`;

function Badge({
  children,
  status,
  progress,
  size = DEFAULT_SIZE,
  polaris: {intl},
}: CombinedProps) {
  const className = classNames(
    styles.Badge,
    status && styles[variationName('status', status)],
    progress && styles[variationName('progress', progress)],
    size && size !== DEFAULT_SIZE && styles[variationName('size', size)],
  );

  let progressMarkup;
  switch (progress) {
    case PROGRESS_LABELS.incomplete:
      progressMarkup = intl.translate(
        'Polaris.Badge.PROGRESS_LABELS.incomplete',
      );
      break;
    case PROGRESS_LABELS.partiallyComplete:
      progressMarkup = intl.translate(
        'Polaris.Badge.PROGRESS_LABELS.partiallyComplete',

render() {
    const {
      children,
      heading,
      image,
      largeImage,
      imageContained,
      action,
      secondaryAction,
      footerContent,
    } = this.props;

    const className = classNames(
      styles.EmptyState,
      imageContained && styles.imageContained,
    );

    const imageMarkup = largeImage ? (
      <img sizes="(max-width: 568px) 60vw" role="presentation" alt="">

const {
      id,
      focused,
      siblingTabHasFocus,
      children,
      onClick,
      selected,
      url,
      panelID,
      measuring,
      accessibilityLabel,
    } = this.props;

    const handleClick = onClick && onClick.bind(null, id);

    const className = classNames(
      styles.Tab,
      selected && styles['Tab-selected'],
    );

    let tabIndex: 0 | -1;

    if (selected && !siblingTabHasFocus && !measuring) {
      tabIndex = 0;
    } else if (focused && !measuring) {
      tabIndex = 0;
    } else {
      tabIndex = -1;
    }

    const markup = url ? (

sortable,
      defaultSortDirection = 'ascending',
      initialSortColumnIndex = 0,
    } = this.props;

    const {
      collapsed,
      columnVisibilityData,
      heights,
      sortedColumnIndex = initialSortColumnIndex,
      sortDirection = defaultSortDirection,
      isScrolledFarthestLeft,
      isScrolledFarthestRight,
    } = this.state;

    const className = classNames(
      styles.DataTable,
      collapsed && styles.collapsed,
      footerContent && styles.hasFooter,
    );

    const wrapperClassName = classNames(
      styles.TableWrapper,
      collapsed && styles.collapsed,
    );

    const footerClassName = classNames(footerContent && styles.TableFoot);

    const footerMarkup = footerContent ? (
      
        {this.renderFooter()}