Skip to content

refactor(badge): use core tokens #2569

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 4, 2022
Merged

refactor(badge): use core tokens #2569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67b368f
feat(badge): use core tokens
lunarfusion Sep 8, 2022
a42e589
ci: update golden images cache
Westbrook Nov 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ executors:
parameters:
current_golden_images_hash:
type: string
default: b7380bc16e38864fdd1cbd45b929b801db117a9d
default: 67b368fd9607142dcf9c359f5c5b08db33e45ff4
commands:
downstream:
steps:
Expand Down
80 changes: 74 additions & 6 deletions packages/badge/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,13 +102,81 @@ The `<sp-badge>` can be customized with either semantic or non-semantic variants

### Non-Semantic

Non-semantic badge colors are no longer supported directly by Spectrum and Spectrum Web Components. You can mimic their delivery via the following CSS Custom Properties. These values for the `variant` attribute/property have not been marked as deprecated, but will no longer achieve the results you may have relied on in the past.

```html demo
<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
<sp-badge variant="fuchsia">Fuchsia</sp-badge>
<sp-badge variant="indigo">Indigo</sp-badge>
<sp-badge variant="magenta">Magenta</sp-badge>
<sp-badge variant="purple">Purple</sp-badge>
<sp-badge variant="seafoam">Seafoam</sp-badge>
<sp-badge variant="yellow">Yellow</sp-badge>
<sp-badge
variant="seafoam"
style="--mod-badge-background-color-default: var(--spectrum-global-color-static-seafoam-600)"
>
Seafoam
</sp-badge>
<sp-badge
variant="indigo"
style="--mod-badge-background-color-default: var(--spectrum-global-color-static-indigo-600)"
>
Indigo
</sp-badge>
<sp-badge
variant="purple"
style="--mod-badge-background-color-default: var(--spectrum-global-color-static-purple-600)"
>
Purple
</sp-badge>
<sp-badge
variant="fuchsia"
style="--mod-badge-background-color-default: var(--spectrum-global-color-static-fuchsia-600)"
>
Fuchsia
</sp-badge>
<sp-badge
variant="magenta"
style="--mod-badge-background-color-default: var(--spectrum-global-color-static-magenta-600)"
>
Magenta
</sp-badge>
<sp-badge
variant="yellow"
style="--mod-badge-background-color-default: var(--spectrum-alias-background-color-yellow-default); --mod-badge-label-icon-color-white: var(--spectrum-global-color-static-black);"
>
Yellow
</sp-badge>
</div>
```

## Fixed

When you'd like to have the `<sp-badge>` display as if "fixed" to the edge of a UI, the `fixed` attribute/property can be leveraged to alter the border rounding based on the position you would like to achieve:

```html
<div
style="position: relative; width: 400px; height: 200px; background: #eee; max-width: 100%"
>
<sp-badge>None</sp-badge>
<sp-badge
fixed="block-start"
style="position: absolute; top: 0; left: 200px;"
>
block-start
</sp-badge>
<sp-badge
fixed="inline-end"
style="position: absolute; right: 0; top: 100px;"
>
inline-end
</sp-badge>
<sp-badge
fixed="block-end"
style="position: absolute; bottom: 0; left: 200px;"
>
block-end
</sp-badge>
<sp-badge
fixed="inline-start"
style="position: absolute; left: 0; top: 100px;"
>
inline-start
</sp-badge>
</div>
```
2 changes: 1 addition & 1 deletion packages/badge/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"@spectrum-web-components/shared": "^0.15.1"
},
"devDependencies": {
"@spectrum-css/badge": "^1.0.20"
"@spectrum-css/badge": "^2.0.0"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
66 changes: 61 additions & 5 deletions packages/badge/src/Badge.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@ import {
import { property } from '@spectrum-web-components/base/src/decorators.js';

import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
import styles from './badge.css.js';

export const BADGE_VARIANTS = [
'accent',
'neutral',
'informative',
'positive',
Expand All @@ -35,21 +37,68 @@ export const BADGE_VARIANTS = [
'yellow',
] as const;
export type BadgeVariant = typeof BADGE_VARIANTS[number];
export const FIXED_VALUES_DEPRECATED = ['top', 'bottom', 'left', 'right'];
export const FIXED_VALUES = [
'inline-start',
'inline-end',
'block-start',
'block-end',
] as const;
export type FixedValues =
| typeof FIXED_VALUES[number]
| typeof FIXED_VALUES_DEPRECATED[number];

/**
* @element sp-badge
*
* @slot - Text label of the badge
* @slot icon - Optional icon that appears to the left of the label
*/
export class Badge extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {
export class Badge extends SizedMixin(
ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), '')
) {
public static override get styles(): CSSResultArray {
return [styles];
}

@property({ reflect: true })
public get fixed(): FixedValues | undefined {
return this._fixed;
}

public set fixed(fixed: FixedValues | undefined) {
if (fixed === this.fixed) return;
const oldValue = this.fixed;
if (window.__swc.DEBUG) {
if (fixed && FIXED_VALUES_DEPRECATED.includes(fixed)) {
window.__swc.warn(
this,
`The following values for "fixed" in <${this.localName}> have been deprecated. They will be removed in a future release.`,
'https://opensource.adobe.com/spectrum-web-components/components/badge/#fixed',
{
issues: [...FIXED_VALUES_DEPRECATED],
}
);
}
}
Comment on lines +72 to +83
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 on warning, I need to start looking for places to provide dev mode hints myself.

Once we start sprinkling in more than one or two, it might be nice to follow a pattern like:

this.warnIfDeprecatedFixed(fixed);

// ...

protected warnIfDeprecatedFixed(fixed: FixedValues | undefined) {
    if (!window.__swc.DEBUG) return;
    if (!(fixed && FIXED_VALUES_DEPRECATED.includes(fixed))) return;

    window.__swc.warn(this, '...', { issues: [...FIXED_VALUES_DEPRECATED] });
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels like this nicer way to do this, BUT if you write it like this you'd have to write custom tooling to get this to be pulled out of the "for production" files. Wrapping all warn code in if (window.__swc.DEBUG) { means that when we convert window.__swc.DEBUG to false in esbuild the subsequent terser passes will eliminate the dead code for us.

Copy link
Contributor

@hunterloftis hunterloftis Nov 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha! Good to know. I wonder if the tree-shaking is smart enough to remove if (window.__swc.DEBUG) this.warnIfDeprecatedFixed(fixed); then, if perhaps warnIfDeprecatedFixed is private.

If not, I think most tools would be able to clear out something like function warnIfDeprecatedFixed(el, fixed).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, whether it pulls out the unused private would be a good test. Look forward to hearing what you find!

this._fixed = fixed;
if (fixed) {
this.setAttribute('fixed', fixed);
} else {
this.removeAttribute('fixed');
}
this.requestUpdate('fixed', oldValue);
}

private _fixed?: FixedValues;

@property({ type: String, reflect: true })
public variant: BadgeVariant = 'informative';

protected get hasIcon(): boolean {
return this.slotContentIsPresent;
}

protected override render(): TemplateResult {
if (window.__swc.DEBUG) {
if (!BADGE_VARIANTS.includes(this.variant)) {
Expand All @@ -58,14 +107,21 @@ export class Badge extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {
`<${this.localName}> element expect the "variant" attribute to be one of the following:`,
'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
{
issues: [...BADGE_VARIANTS]
},
issues: [...BADGE_VARIANTS],
}
);
}
}
return html`
<slot name="icon" ?icon-only=${!this.slotHasContent}></slot>
<div id="label">
${this.hasIcon
? html`
<slot
name="icon"
?icon-only=${!this.slotHasContent}
></slot>
`
: html``}
<div class="label">
<slot></slot>
</div>
`;
Expand Down
47 changes: 19 additions & 28 deletions packages/badge/src/badge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,29 @@ governing permissions and limitations under the License.
/* center align icons and text */

:host {
display: inline-flex;
align-items: center;
}

/* implement fixed placement styling until Spectrum CSS adds it upstream */
/* Marked as deprecated, remove in a future release */

:host([fixed='top']) {
--spectrum-badge-neutral-textonly-border-top-left-radius: 0;
--spectrum-badge-neutral-textonly-border-top-right-radius: 0;
:host([fixed='left']) {
border-end-start-radius: 0;
border-start-start-radius: 0; /* .spectrum-Badge--fixed-inline-start */
}

:host([fixed='right']) {
--spectrum-badge-neutral-textonly-border-top-right-radius: 0;
--spectrum-badge-neutral-textonly-border-bottom-right-radius: 0;
border-end-end-radius: 0;
border-start-end-radius: 0; /* .spectrum-Badge--fixed-inline-end */
}

:host([fixed='bottom']) {
--spectrum-badge-neutral-textonly-border-bottom-left-radius: 0;
--spectrum-badge-neutral-textonly-border-bottom-right-radius: 0;
:host([fixed='top']) {
border-start-end-radius: 0;
border-start-start-radius: 0; /* .spectrum-Badge--fixed-block-start */
}

:host([fixed='left']) {
--spectrum-badge-neutral-textonly-border-top-left-radius: 0;
--spectrum-badge-neutral-textonly-border-bottom-left-radius: 0;
:host([fixed='bottom']) {
border-end-end-radius: 0;
border-end-start-radius: 0; /* .spectrum-Badge--fixed-block-end */
}

/* cascade badge's size to its icon */
Expand Down Expand Up @@ -107,26 +106,18 @@ governing permissions and limitations under the License.

::slotted([slot='icon']) {
flex-shrink: 0;
margin-right: calc(var(--spectrum-badge-neutral-textonly-padding-left) / 2);
}

slot[icon-only]::slotted([slot='icon']) {
margin-right: calc(
var(--spectrum-badge-neutral-textonly-text-padding-bottom) -
var(--spectrum-badge-neutral-textonly-padding-left)
);
margin-left: calc(
var(--spectrum-badge-neutral-textonly-text-padding-bottom) -
var(--spectrum-badge-neutral-textonly-padding-left)
);
}

/* limit badge size to two lines */

#label {
.label slot {
display: block;
max-height: calc(
var(--spectrum-badge-neutral-textonly-text-line-height) *
var(--spectrum-badge-neutral-textonly-text-size) * 2
var(--spectrum-badge-line-height) * var(--spectrum-badge-font-size) * 2
);
overflow: hidden;
}

[icon-only] + .label {
display: none;
}
Loading