Skip to content

Commit

Permalink
perf: accept new Spectrum CSS featuring simpler DOM structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Westbrook committed Mar 22, 2023
1 parent 4716039 commit a0b042b
Show file tree
Hide file tree
Showing 14 changed files with 185 additions and 303 deletions.
5 changes: 3 additions & 2 deletions packages/action-button/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,11 @@
"@spectrum-web-components/base": "^0.7.4",
"@spectrum-web-components/button": "^0.20.2",
"@spectrum-web-components/icon": "^0.12.8",
"@spectrum-web-components/icons-ui": "^0.9.9"
"@spectrum-web-components/icons-ui": "^0.9.9",
"@spectrum-web-components/shared": "^0.15.5"
},
"devDependencies": {
"@spectrum-css/actionbutton": "^3.0.11"
"@spectrum-css/actionbutton": "^3.0.20"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
2 changes: 1 addition & 1 deletion packages/action-button/src/ActionButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export class ActionButton extends SizedMixin(ButtonBase, {
validSizes: ['xs', 's', 'm', 'l', 'xl'],
}) {
public static override get styles(): CSSResultArray {
return [buttonStyles, cornerTriangleStyles];
return [...super.styles, buttonStyles, cornerTriangleStyles];
}

@property({ type: Boolean, reflect: true })
Expand Down
97 changes: 0 additions & 97 deletions packages/action-button/src/action-button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,10 @@ governing permissions and limitations under the License.

@import './spectrum-action-button.css';

:host {
display: inline-flex;
flex-direction: row;
}

:host([disabled]) {
pointer-events: none;
cursor: auto;
}

:host([dir]) {
/* spectrum-css uses "-webkit-appearance: button" to workaround an
* iOS and Safari issue. However, it results in incorrect styling
* when applied in :host
*/
-webkit-appearance: none; /* stylelint-disable-line */
}

::slotted([slot='icon']) {
flex-shrink: 0;
}

#button {
position: absolute;
inset: 0;
}

#label {
flex-grow: var(--spectrum-actionbutton-label-flex-grow);
text-align: var(--spectrum-actionbutton-label-text-align);
Expand All @@ -47,80 +24,6 @@ governing permissions and limitations under the License.
:host([size='xs']) {
/* Work around non-square icon only Action Buttons in Spectrum CSS */
min-width: var(--spectrum-actionbutton-height, 0);

/* Pass t-shirt sizing to icons within the XS-sized Action Button */
--spectrum-icon-tshirt-size-height: var(
--spectrum-alias-workflow-icon-size-xs
);
--spectrum-icon-tshirt-size-width: var(
--spectrum-alias-workflow-icon-size-xs
);
--spectrum-ui-icon-tshirt-size-height: var(
--spectrum-alias-ui-icon-cornertriangle-size-75
);
--spectrum-ui-icon-tshirt-size-width: var(
--spectrum-alias-ui-icon-cornertriangle-size-75
);
}

:host([size='s']) {
--spectrum-icon-tshirt-size-height: var(
--spectrum-alias-workflow-icon-size-s
);
--spectrum-icon-tshirt-size-width: var(
--spectrum-alias-workflow-icon-size-s
);
--spectrum-ui-icon-tshirt-size-height: var(
--spectrum-alias-ui-icon-cornertriangle-size-75
);
--spectrum-ui-icon-tshirt-size-width: var(
--spectrum-alias-ui-icon-cornertriangle-size-75
);
}

:host([size='m']) {
--spectrum-icon-tshirt-size-height: var(
--spectrum-alias-workflow-icon-size-m
);
--spectrum-icon-tshirt-size-width: var(
--spectrum-alias-workflow-icon-size-m
);
--spectrum-ui-icon-tshirt-size-height: var(
--spectrum-alias-ui-icon-cornertriangle-size-100
);
--spectrum-ui-icon-tshirt-size-width: var(
--spectrum-alias-ui-icon-cornertriangle-size-100
);
}

:host([size='l']) {
--spectrum-icon-tshirt-size-height: var(
--spectrum-alias-workflow-icon-size-l
);
--spectrum-icon-tshirt-size-width: var(
--spectrum-alias-workflow-icon-size-l
);
--spectrum-ui-icon-tshirt-size-height: var(
--spectrum-alias-ui-icon-cornertriangle-size-200
);
--spectrum-ui-icon-tshirt-size-width: var(
--spectrum-alias-ui-icon-cornertriangle-size-200
);
}

:host([size='xl']) {
--spectrum-icon-tshirt-size-height: var(
--spectrum-alias-workflow-icon-size-xl
);
--spectrum-icon-tshirt-size-width: var(
--spectrum-alias-workflow-icon-size-xl
);
--spectrum-ui-icon-tshirt-size-height: var(
--spectrum-alias-ui-icon-cornertriangle-size-300
);
--spectrum-ui-icon-tshirt-size-width: var(
--spectrum-alias-ui-icon-cornertriangle-size-300
);
}

@media (forced-colors: active) {
Expand Down
107 changes: 46 additions & 61 deletions packages/action-button/src/spectrum-action-button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ governing permissions and limitations under the License.
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
font-family: var(--mod-font-family-base, var(--spectrum-font-family-base));
justify-content: center;
line-height: var(
--mod-line-height-small,
var(--spectrum-line-height-small)
font-family: var(
--mod-sans-font-family-stack,
var(--spectrum-sans-font-family-stack)
);
justify-content: center;
line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
margin: 0;
overflow: visible;
text-decoration: none;
Expand Down Expand Up @@ -280,16 +280,26 @@ governing permissions and limitations under the License.
var(--spectrum-actionbutton-content-color-default)
)
);
gap: calc(
var(
--mod-actionbutton-text-to-visual,
var(--spectrum-actionbutton-text-to-visual)
) +
var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
) -
var(
--mod-actionbutton-edge-to-visual-only,
var(--spectrum-actionbutton-edge-to-visual-only)
)
);
height: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height));
min-inline-size: var(
--mod-actionbutton-min-width,
var(--spectrum-actionbutton-min-width)
);
padding-inline-end: var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
);
padding-inline-start: var(
padding-inline: var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
);
Expand Down Expand Up @@ -416,67 +426,42 @@ governing permissions and limitations under the License.
--mod-actionbutton-icon-size,
var(--spectrum-actionbutton-icon-size)
);
margin-inline-start: calc(
(
var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
) -
var(
--mod-actionbutton-edge-to-visual,
var(--spectrum-actionbutton-edge-to-visual)
)
) * -1
margin-inline-end: calc(
var(
--mod-actionbutton-edge-to-visual-only,
var(--spectrum-actionbutton-edge-to-visual-only)
) -
var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
)
);
padding-inline-start: calc(
(
var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
) -
var(
--mod-actionbutton-edge-to-visual,
var(--spectrum-actionbutton-edge-to-visual)
)
) * -1
margin-inline-start: calc(
var(
--mod-actionbutton-edge-to-visual,
var(--spectrum-actionbutton-edge-to-visual)
) -
var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
)
);
width: var(
--mod-actionbutton-icon-size,
var(--spectrum-actionbutton-icon-size)
);
}
[name='icon'] + #label {
padding-inline-end: 0;
padding-inline-start: var(
--mod-actionbutton-text-to-visual,
var(--spectrum-actionbutton-text-to-visual)
);
}
.hold-affordance + ::slotted([slot='icon']),
[icon-only]::slotted([slot='icon']) {
margin-inline-end: calc(
(
var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
) -
var(
--mod-actionbutton-edge-to-visual-only,
var(--spectrum-actionbutton-edge-to-visual-only)
)
) * -1
);
margin-inline-start: calc(
(
var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
) -
var(
--mod-actionbutton-edge-to-visual-only,
var(--spectrum-actionbutton-edge-to-visual-only)
)
) * -1
var(
--mod-actionbutton-edge-to-visual-only,
var(--spectrum-actionbutton-edge-to-visual-only)
) -
var(
--mod-actionbutton-edge-to-text,
var(--spectrum-actionbutton-edge-to-text)
)
);
}
#label {
Expand Down
13 changes: 12 additions & 1 deletion packages/action-button/test/benchmark/basic-test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,20 @@ governing permissions and limitations under the License.
*/

import '@spectrum-web-components/action-button/sp-action-button.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
import { html } from 'lit';
import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';

measureFixtureCreation(html`
<sp-action-button open></sp-action-button>
<sp-action-button>Edit</sp-action-button>
<sp-action-button>
<sp-icon-edit slot="icon"></sp-icon-edit>
Edit
</sp-action-button>
<sp-action-button>
<sp-icon-edit slot="icon"></sp-icon-edit>
</sp-action-button>
<sp-action-button hold-affordance>
<sp-icon-edit slot="icon"></sp-icon-edit>
</sp-action-button>
`);
2 changes: 1 addition & 1 deletion packages/button/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"@spectrum-web-components/shared": "^0.15.5"
},
"devDependencies": {
"@spectrum-css/button": "^9.0.0"
"@spectrum-css/button": "^9.0.8"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
4 changes: 2 additions & 2 deletions packages/button/src/Button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
SizedMixin,
} from '@spectrum-web-components/base';
import { property } from '@spectrum-web-components/base/src/decorators.js';
import { StyledButton } from './StyledButton.js';
import { ButtonBase } from './ButtonBase.js';
import buttonStyles from './button.css.js';

export type DeprecatedButtonVariants = 'cta' | 'overBackground';
Expand Down Expand Up @@ -46,7 +46,7 @@ export type ButtonTreatments = 'fill' | 'outline';
* @slot - text label of the Button
* @slot icon - The icon to use for Button
*/
export class Button extends SizedMixin(StyledButton) {
export class Button extends SizedMixin(ButtonBase) {
public static override get styles(): CSSResultArray {
return [...super.styles, buttonStyles];
}
Expand Down
Loading

0 comments on commit a0b042b

Please sign in to comment.