Skip to content

Commit

Permalink
Button style prototype
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssetem
ssetem committed May 8, 2024
1 parent 9833c5d commit 042e70f
Show file tree
Hide file tree
Showing 8 changed files with 167 additions and 57 deletions.
6 changes: 5 additions & 1 deletion polaris-react/src/components/AppProvider/global.css
View file
Expand Up @@ -38,7 +38,11 @@

--pg-dismiss-icon-size: 32px;

--pg-top-bar-height: 56px;
--pg-top-bar-height: 64px;

@media (--p-breakpoints-md-up) {
--pg-top-bar-height: 56px;
}

--pg-mobile-nav-width: calc(
100vw - (var(--pg-dismiss-icon-size) + var(--pg-dangerous-magic-space-8))
Expand Down
130 changes: 98 additions & 32 deletions polaris-react/src/components/Button/Button.module.css
View file
Expand Up @@ -12,11 +12,15 @@
--pc-button-color_active: var(--pc-button-color);
--pc-button-color_pressed: var(--pc-button-color_active);
--pc-button-color_disabled: var(--p-color-text-disabled);
--pc-button-box-shadow: transparent;
--pc-button-box-shadow_hover: var(--pc-button-box-shadow);
--pc-button-box-shadow_active: var(--pc-button-box-shadow);
--pc-button-box-shadow_pressed: var(--pc-button-box-shadow_active);
--pc-button-box-shadow_disabled: var(--pc-button-box-shadow);
--pc-button-width: auto;
@media (--p-breakpoints-md-up) {
--pc-button-box-shadow: transparent;
--pc-button-box-shadow_hover: var(--pc-button-box-shadow);
--pc-button-box-shadow_active: var(--pc-button-box-shadow);
--pc-button-box-shadow_pressed: var(--pc-button-box-shadow_active);
--pc-button-box-shadow_disabled: var(--pc-button-box-shadow);
}

--pc-button-icon-fill: currentColor;
--pc-button-icon-fill_hover: var(--pc-button-icon-fill);
--pc-button-icon-fill_active: var(--pc-button-icon-fill);
Expand Down Expand Up @@ -116,24 +120,38 @@

/* VARIANTS */
.variantPrimary {
--pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
--pc-button-box-shadow: var(--p-shadow-button-primary);
--pc-button-box-shadow_active: var(--p-shadow-button-primary-inset);
--pc-button-bg: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
--pc-button-bg_hover: var(--pc-button-bg-gradient),
var(--p-color-bg-fill-brand-hover);
--pc-button-bg_active: var(--pc-button-bg-gradient),
var(--p-color-bg-fill-brand-active);
--pc-button-bg_disabled: var(--p-color-bg-fill-brand-disabled);
--pc-button-bg: var(--p-color-bg-fill-brand);
--pc-button-color: var(--p-color-text-brand-on-bg-fill);
--pc-button-color_disabled: var(--p-color-text-brand-on-bg-fill-disabled);
--pc-button-icon-fill: var(--p-color-text-brand-on-bg-fill);
--pc-button-icon-fill_disabled: var(--p-color-text-brand-on-bg-fill-disabled);
--pc-button-bg_active: var(--p-color-bg-fill-brand-active);
--pc-button-width: 100%;
@media (--p-breakpoints-md-up) {
--pc-button-width: auto;
--pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
--pc-button-box-shadow: var(--p-shadow-button-primary);
--pc-button-box-shadow_active: var(--p-shadow-button-primary-inset);
--pc-button-bg: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
--pc-button-bg_hover: var(--pc-button-bg-gradient),
var(--p-color-bg-fill-brand-hover);
--pc-button-bg_active: var(--pc-button-bg-gradient),
var(--p-color-bg-fill-brand-active);
--pc-button-bg_disabled: var(--p-color-bg-fill-brand-disabled);
--pc-button-color_disabled: var(--p-color-text-brand-on-bg-fill-disabled);
--pc-button-icon-fill: var(--p-color-text-brand-on-bg-fill);
--pc-button-icon-fill_disabled: var(
--p-color-text-brand-on-bg-fill-disabled
);
}
}

.variantSecondary {
--pc-button-box-shadow: var(--p-shadow-button);
--pc-button-box-shadow_active: var(--p-shadow-button-inset);
--pc-button-box-shadow: 0 0 0 var(--p-space-025) var(--p-color-border);
--pc-button-width: 100%;
@media (--p-breakpoints-md-up) {
--pc-button-width: auto;
--pc-button-box-shadow: var(--p-shadow-button);
--pc-button-box-shadow_active: var(--p-shadow-button-inset);
}

--pc-button-bg: var(--p-color-bg-fill);
--pc-button-bg_hover: var(--p-color-bg-fill-hover);
--pc-button-bg_active: var(--p-color-bg-fill-active);
Expand All @@ -152,13 +170,24 @@
}

.variantPlain {
--pc-button-color: var(--p-color-text-link);
--pc-button-color_hover: var(--p-color-text-link-hover);
--pc-button-color_active: var(--p-color-text-link-active);
--pc-button-color: var(--p-color-text-emphasis);
@media (--p-breakpoints-md-up) {
--pc-button-color: var(--p-color-text-link);
--pc-button-color_hover: var(--p-color-text-link-hover);
--pc-button-color_active: var(--p-color-text-link-active);
}
}

.variantPlain:is(:hover, :active, :focus-visible):not(.removeUnderline) {
text-decoration: underline;
@media (--p-breakpoints-md-up) {
text-decoration: underline;
}
}

.variantPlain:is(:active) {
@media (--p-breakpoints-md-down) {
opacity: 0.4;
}
}

.variantMonochromePlain {
Expand Down Expand Up @@ -194,21 +223,28 @@
}

.toneSuccess:is(.variantPrimary) {
--pc-button-box-shadow: var(--p-shadow-button-primary-success);
--pc-button-box-shadow_active: var(--p-shadow-button-primary-success-inset);
--pc-button-bg: var(--p-color-bg-fill-success);
--pc-button-bg_hover: var(--p-color-bg-fill-success-hover);
--pc-button-bg_active: var(--p-color-bg-fill-success-active);
--pc-button-bg_pressed: var(--p-color-bg-fill-success-selected);
@media (--p-breakpoints-md-up) {
--pc-button-box-shadow: var(--p-shadow-button-primary-success);
--pc-button-box-shadow_active: var(--p-shadow-button-primary-success-inset);
}
}

.toneCritical:is(.variantPrimary) {
--pc-button-box-shadow: var(--p-shadow-button-primary-critical);
--pc-button-box-shadow_active: var(--p-shadow-button-primary-critical-inset);
--pc-button-bg: var(--p-color-bg-fill-critical);
--pc-button-bg_hover: var(--p-color-bg-fill-critical-hover);
--pc-button-bg_active: var(--p-color-bg-fill-critical-active);
--pc-button-bg_pressed: var(--p-color-bg-fill-critical-selected);

@media (--p-breakpoints-md-up) {
--pc-button-box-shadow: var(--p-shadow-button-primary-critical);
--pc-button-box-shadow_active: var(
--p-shadow-button-primary-critical-inset
);
}
}

/* SIZES */
Expand All @@ -224,26 +260,38 @@
}
}

.sizeSlim,
.sizeMicro {
--pc-button-width: auto;
}

.sizeSlim,
.sizeMedium {
--pc-button-padding-block: var(--p-space-150);
--pc-button-padding-inline: var(--p-space-300);
min-height: var(--p-height-800);
min-width: var(--p-width-800);

&.sizeMedium {
--pc-button-padding-block: var(--p-space-300);
}
@media (--p-breakpoints-md-up) {
&.sizeMedium {
--pc-button-padding-block: var(--p-space-150);
}
min-height: var(--p-height-700);
min-width: var(--p-width-700);
}
}

.sizeLarge {
--pc-button-padding-block: var(--p-space-150);
--pc-button-padding-block: var(--p-space-300);
--pc-button-padding-inline: var(--p-space-300);
min-height: var(--p-height-900);
min-width: var(--p-height-900);

@media (--p-breakpoints-md-up) {
--pc-button-padding-block: var(--p-space-150);
min-height: var(--p-height-800);
min-width: var(--p-width-800);
}
Expand Down Expand Up @@ -274,13 +322,27 @@

/* ICON */
.iconOnly {
--pc-button-width: auto;
--pc-button-padding-block: var(--p-space-100);
--pc-button-padding-inline: var(--p-space-100);
}

.iconOnly:is(.sizeMedium) {
--pc-button-padding-block: var(--p-space-300);
--pc-button-padding-inline: var(--p-space-300);
@media (--p-breakpoints-md-up) {
--pc-button-padding-block: var(--p-space-100);
--pc-button-padding-inline: var(--p-space-100);
}
}

.iconOnly:is(.sizeLarge) {
--pc-button-padding-block: var(--p-space-150);
--pc-button-padding-inline: var(--p-space-150);
--pc-button-padding-block: var(--p-space-300);
--pc-button-padding-inline: var(--p-space-300);
@media (--p-breakpoints-md-up) {
--pc-button-padding-block: var(--p-space-150);
--pc-button-padding-inline: var(--p-space-150);
}
}

.iconOnly:is(.sizeMicro) {
Expand Down Expand Up @@ -336,7 +398,9 @@
/* INTERACTION */
.pressable:active:not(.variantTertiary, .variantPlain, .variantMonochromePlain)
> * {
transform: translate3d(0, 1px, 0);
@media (--p-breakpoints-md-up) {
transform: translate3d(0, 1px, 0);
}
}

/* UTILITIES */
Expand All @@ -346,7 +410,9 @@

/* ICON */
.Icon {
margin: calc(-1 * var(--p-space-050)) 0;
@media (--p-breakpoints-md-up) {
margin: calc(-1 * var(--p-space-050)) 0;
}
}

/* SPINNER */
Expand Down
18 changes: 17 additions & 1 deletion polaris-react/src/components/Button/Button.tsx
View file
Expand Up @@ -126,6 +126,16 @@ export function Button({
const isDisabled = disabled || loading;
const {mdUp} = useBreakpoints();

if (
!mdUp &&
['primary', 'secondary'].includes(variant) &&
['large', 'medium'].includes(size) &&
!(icon && children == null) &&
fullWidth !== false
) {
fullWidth = true;
}

const className = classNames(
styles.Button,
styles.pressable,
Expand Down Expand Up @@ -177,7 +187,13 @@ export function Button({
}

let textVariant: TextProps['variant'] = 'bodySm';
if (size === 'large' || (hasPlainText && size !== 'micro')) {

if (!mdUp && ['primary', 'secondary'].includes(variant)) {
textVariant = 'bodySm';
textFontWeight = 'medium';
}

if (size === 'large' || (mdUp && hasPlainText && size !== 'micro')) {
textVariant = 'bodyMd';
}

Expand Down
9 changes: 9 additions & 0 deletions polaris-react/src/components/ButtonGroup/ButtonGroup.module.css
View file
Expand Up @@ -8,9 +8,18 @@
align-items: center;
margin-top: calc(-1 * var(--p-space-200));
margin-left: calc(-1 * var(--p-space-200));

&:has(:global(.Polaris-Button--fullWidth)) {
width: 100%;
margin-left: 0;
.Item {
margin-left: 0;
}
}
}

.Item {
width: inherit;
margin-top: var(--p-space-200);
margin-left: var(--p-space-200);
}
Expand Down
24 changes: 14 additions & 10 deletions polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.module.css
View file
Expand Up @@ -93,17 +93,21 @@
--pc-button-color: rgba(48, 48, 48, 1);
--pc-button-color_disabled: var(--p-color-text-secondary);
--pc-button-bg: rgba(255, 255, 255, 1);
--pc-button-bg_hover: rgba(250, 250, 250, 1);
--pc-button-bg_active: rgba(247, 247, 247, 1);
--pc-button-bg_pressed: rgba(247, 247, 247, 1);
--pc-button-bg_hover: rgba(255, 255, 255, 1);
--pc-button-bg_active: var(--p-color-bg-fill-secondary-active);
--pc-button-bg_pressed: var(--p-color-bg-fill-secondary-active);
--pc-button-bg_disabled: rgba(255, 255, 255, 0.2);
--pc-button-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.48) inset,
-1px 0 0 0 rgba(255, 255, 255, 0.2) inset,
1px 0 0 0 rgba(255, 255, 255, 0.2) inset,
0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset;
--pc-button-box-shadow_active: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset,
1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset,
-1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
@media (--p-breakpoints-md-up) {
--pc-button-bg_active: rgba(247, 247, 247, 1);
--pc-button-bg_pressed: rgba(247, 247, 247, 1);
--pc-button-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.48) inset,
-1px 0 0 0 rgba(255, 255, 255, 0.2) inset,
1px 0 0 0 rgba(255, 255, 255, 0.2) inset,
0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset;
--pc-button-box-shadow_active: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset,
1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset,
-1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
}
}

& [class*='Polaris-Button--variantTertiary'],
Expand Down
4 changes: 2 additions & 2 deletions polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx
View file
Expand Up @@ -85,7 +85,7 @@ export function UpdateButtons({

const saveButton = (
<Button
size="micro"
size="slim"
onClick={handleClickSaveButton}
disabled={primaryAction?.disabled || disabled}
>
Expand All @@ -105,7 +105,7 @@ export function UpdateButtons({
const cancelButtonMarkup = cancelAction ? (
<Button
variant="tertiary"
size="micro"
size="slim"
onClick={cancelAction.onAction}
disabled={disabled}
>
Expand Down
7 changes: 5 additions & 2 deletions polaris-react/src/components/Modal/components/Footer/Footer.tsx
View file
Expand Up @@ -20,9 +20,12 @@ export function Footer({
children,
}: FooterProps) {
const primaryActionButton =
(primaryAction && buttonsFrom(primaryAction, {variant: 'primary'})) || null;
(primaryAction &&
buttonsFrom(primaryAction, {variant: 'primary', fullWidth: false})) ||
null;
const secondaryActionButtons =
(secondaryActions && buttonsFrom(secondaryActions)) || null;
(secondaryActions && buttonsFrom(secondaryActions, {fullWidth: false})) ||
null;
const actions =
primaryActionButton || secondaryActionButtons ? (
<InlineStack gap="200">
Expand Down

0 comments on commit 042e70f

Please sign in to comment.