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.
Shopify / polaris-react / src / components / Spinner / Spinner.tsx View on Github 
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="">
);
}
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;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: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
