fix: use icons without "size" values

adobe · Jan 11, 2021 · 3fc7c91 · 3fc7c91
1 parent 17f0a58
commit 3fc7c91
Show file tree

Hide file tree

Showing 37 changed files with 308 additions and 187 deletions.
diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts
@@ -97,11 +97,7 @@ export class AccordionItem extends Focusable {
                 >
                     ${this.label}
                 </button>
-                <sp-icon
-                    id="indicator"
-                    size="xs"
-                    class="spectrum-UIIcon-ChevronRight100"
-                >
+                <sp-icon id="indicator" class="spectrum-UIIcon-ChevronRight100">
                     ${Chevron100Icon()}
                 </sp-icon>
             </h3>

diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts
@@ -106,7 +106,6 @@ export class ActionButton extends SizedMixin(ButtonBase) {
             buttonContent.unshift(html`
                 <sp-icon
                     id="hold-affordance"
-                    size="none"
                     class="${holdAffordanceClass[this.size]}"
                 >
                     ${CornerTriangle300Icon()}

diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css
@@ -29,3 +29,63 @@ governing permissions and limitations under the License.
     flex-grow: var(--spectrum-actionbutton-label-flex-grow);
     text-align: var(--spectrum-actionbutton-label-text-align);
 }
+
+: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
+    );
+}
diff --git a/packages/action-button/stories/action-button-sizes.stories.ts b/packages/action-button/stories/action-button-sizes.stories.ts
@@ -48,7 +48,7 @@ function renderButton(properties: Properties): TemplateResult {
 
 function renderButtonsSelected(properties: Properties): TemplateResult {
     const icon = html`
-        <sp-icon slot="icon" size=${properties.size || 'm'}>
+        <sp-icon slot="icon">
             ${EditIcon({ hidden: true })}
         </sp-icon>
     `;

diff --git a/packages/action-button/stories/action-button.stories.ts b/packages/action-button/stories/action-button.stories.ts
@@ -113,6 +113,20 @@ export const iconOnlyButton = (): TemplateResult => {
     `;
 };
 
+export const iconSizeOverridden = (): TemplateResult => {
+    return html`
+        <sp-action-button label="Edit" size="xl">
+            <sp-icon-edit slot="icon" size="s"></sp-icon-edit>
+        </sp-action-button>
+        <h1>For testing purposes only</h1>
+        <p>
+            This is a test to ensure that sizing the icon will still work when
+            it's in the scope of a parent element. You shouldn't normally do
+            this as it deviates from the Spectrum design specification.
+        </p>
+    `;
+};
+
 export const holdAffordance = (): TemplateResult => {
     return html`
         <sp-action-group>

diff --git a/packages/action-group/stories/action-group.stories.ts b/packages/action-group/stories/action-group.stories.ts
@@ -84,17 +84,17 @@ export const iconsOnly = (): TemplateResult => {
     return html`
         <sp-action-group>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
@@ -106,17 +106,17 @@ export const quietIconsOnly = (): TemplateResult => {
     return html`
         <sp-action-group quiet>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
@@ -138,17 +138,17 @@ export const compactIconsOnly = (): TemplateResult => {
     return html`
         <sp-action-group compact>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
@@ -160,17 +160,17 @@ export const compactQuietIconsOnly = (): TemplateResult => {
     return html`
         <sp-action-group compact quiet>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
@@ -192,17 +192,17 @@ export const iconsOnlyVertical = (): TemplateResult => {
     return html`
         <sp-action-group vertical>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
@@ -214,17 +214,17 @@ export const quietIconsOnlyVertical = (): TemplateResult => {
     return html`
         <sp-action-group vertical quiet>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
@@ -246,17 +246,17 @@ export const compactIconsOnlyVertical = (): TemplateResult => {
     return html`
         <sp-action-group vertical compact>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
@@ -268,17 +268,17 @@ export const compactQuietIconsOnlyVertical = (): TemplateResult => {
     return html`
         <sp-action-group vertical compact quiet>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
@@ -300,17 +300,17 @@ export const iconsOnlyJustified = (): TemplateResult => {
     return html`
         <sp-action-group justified>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
@@ -322,17 +322,17 @@ export const compactIconsOnlyJustified = (): TemplateResult => {
     return html`
         <sp-action-group compact justified>
             <sp-action-button label="Properties">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${PropertiesIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="Info">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${InfoIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>
             <sp-action-button label="View All Tags">
-                <sp-icon slot="icon" size="m">
+                <sp-icon slot="icon">
                     ${ViewAllTagsIcon({ hidden: true })}
                 </sp-icon>
             </sp-action-button>

diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
@@ -45,7 +45,7 @@ export class ActionMenu extends ObserveSlotText(DropdownBase, 'label') {
         return [
             html`
                 <slot name="icon" slot="icon" ?icon-only=${!this.hasLabel}>
-                    <sp-icon size="m" class="icon">
+                    <sp-icon class="icon">
                         ${MoreIcon({ hidden: this.hasLabel })}
                     </sp-icon>
                 </slot>

diff --git a/packages/action-menu/stories/index.ts b/packages/action-menu/stories/index.ts
@@ -31,7 +31,7 @@ export const ActionMenuMarkup = ({
         >
             ${customIcon
                 ? html`
-                      <sp-icon slot="icon" size="m">${customIcon}</sp-icon>
+                      <sp-icon slot="icon">${customIcon}</sp-icon>
                   `
                 : html``}
             ${visibleLabel

diff --git a/packages/action-menu/test/action-menu.test.ts b/packages/action-menu/test/action-menu.test.ts
@@ -94,7 +94,7 @@ describe('Action menu', () => {
         const el = await fixture<ActionMenu>(
             html`
                 <sp-action-menu label="More Actions">
-                    <sp-icon slot="icon" size="s">
+                    <sp-icon slot="icon">
                         ${SettingsIcon()}
                     </sp-icon>
                     <sp-menu>

diff --git a/packages/actionbar/stories/actionbar.stories.ts b/packages/actionbar/stories/actionbar.stories.ts
@@ -30,12 +30,12 @@ export const Default = (): TemplateResult => {
             <sp-checkbox indeterminate>228 Selected</sp-checkbox>
             <sp-action-group quiet>
                 <sp-action-button>
-                    <sp-icon size="m" slot="icon">
+                    <sp-icon slot="icon">
                         ${EditIcon()}
                     </sp-icon>
                 </sp-action-button>
                 <sp-action-button>
-                    <sp-icon size="m" slot="icon">
+                    <sp-icon slot="icon">
                         ${MoreIcon()}
                     </sp-icon>
                 </sp-action-button>

diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts
@@ -35,11 +35,7 @@ export class ClearButton extends ButtonBase {
     protected get buttonContent(): TemplateResult[] {
         return [
             html`
-                <sp-icon
-                    slot="icon"
-                    class="icon spectrum-UIIcon-Cross75"
-                    size="none"
-                >
+                <sp-icon slot="icon" class="icon spectrum-UIIcon-Cross75">
                     ${Cross75Icon()}
                 </sp-icon>
             `,