How to use the @shopify/css-utilities.variationName function in @shopify/css-utilities

To help you get started, we’ve selected a few @shopify/css-utilities examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Shopify / polaris-react / src / components / Spinner / Spinner.tsx View on Github external
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="">
  );
}
github Shopify / polaris-react / src / components / Spinner / Spinner.tsx View on Github external
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 &amp;&amp; styles[variationName('color', color)],
    size &amp;&amp; styles[variationName('size', size)],
  );

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

  return (
    <img aria-label="{accessibilityLabel}" role="status" draggable="{false}" alt="">
  );
}
github Shopify / polaris-react / src / components / Badge / Badge.tsx View on Github external
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',
      );
      break;
github Shopify / polaris-react / src / components / Badge / Badge.tsx View on Github external
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',
      );
      break;
    case PROGRESS_LABELS.complete:
github Shopify / polaris-react / src / components / Badge / Badge.tsx View on Github external
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',
      );
      break;
    case PROGRESS_LABELS.complete:
      progressMarkup = intl.translate('Polaris.Badge.PROGRESS_LABELS.complete');

@shopify/css-utilities

A set of CSS styling-related utilities

MIT
Latest version published 5 days ago

Package Health Score

93 / 100
Full package analysis

Similar packages