make iconSize default, some test fixes

blackbaud · Feb 28, 2025 · af5025a · af5025a
1 parent 5e5f927
commit af5025a
Show file tree

Hide file tree

Showing 83 changed files with 174 additions and 235 deletions.
diff --git a/apps/e2e/forms-storybook/src/app/input-box/input-box.component.html b/apps/e2e/forms-storybook/src/app/input-box/input-box.component.html
@@ -202,7 +202,7 @@
         id="error-calendar-button"
         type="button"
       >
-        <sky-icon icon="calendar" />
+        <sky-icon icon="calendar" size="md" />
       </button>
     </div>
     <div class="sky-error-label">Field is required.</div>
@@ -251,7 +251,7 @@
     />
     <div class="sky-input-group-btn">
       <button disabled class="sky-btn sky-btn-default" type="button">
-        <sky-icon icon="calendar" />
+        <sky-icon icon="calendar" size="md" />
       </button>
     </div>
   </sky-input-box>

diff --git a/apps/e2e/indicators-storybook/src/app/icon/icon.component.html b/apps/e2e/indicators-storybook/src/app/icon/icon.component.html
@@ -1,5 +1,5 @@
 <div class="icon-sheet">
-  <sky-icon icon="calendar" />
+  <sky-icon icon="calendar" size="md" />
   <sky-icon icon="calendar" size="lg" />
   <sky-icon icon="calendar" size="2x" />
   <sky-icon icon="calendar" variant="line" size="3x" />
@@ -15,7 +15,7 @@
     <sky-icon iconName="calendar-ltr" iconSize="xxxs" />
     <sky-icon iconName="calendar-ltr" iconSize="xxs" />
     <sky-icon iconName="calendar-ltr" iconSize="xs" />
-    <sky-icon iconName="calendar-ltr" iconSize="s" />
+    <sky-icon iconName="calendar-ltr" />
     <sky-icon iconName="calendar-ltr" iconSize="m" />
     <sky-icon iconName="calendar-ltr" iconSize="l" />
     <sky-icon iconName="calendar-ltr" iconSize="xl" />
@@ -36,7 +36,7 @@
 </div>
 <div class="sky-padding-even-md icon-svg-compare">
   <div class="sky-margin-stacked-lg">
-    <sky-icon icon="sparkles-2" />
+    <sky-icon icon="sparkles-2" size="md" />
     <sky-icon iconName="sparkles" />
     <sky-icon icon="sparkles-2" size="lg" />
     <sky-icon iconName="sparkles" size="lg" />
@@ -69,7 +69,7 @@
       <sky-icon iconName="clipboard-multiple" /> Copy
     </button>
     <button type="button" class="sky-btn sky-btn-primary sky-margin-inline-sm">
-      <sky-icon icon="copy-to-clipboard" /> Copy
+      <sky-icon icon="copy-to-clipboard" size="md" /> Copy
     </button>
     <button type="button" class="sky-btn sky-btn-primary">
       <sky-icon iconName="alert" /> Alert

diff --git a/apps/e2e/inline-form-storybook/src/app/inline-form/inline-form.component.html b/apps/e2e/inline-form-storybook/src/app/inline-form/inline-form.component.html
@@ -15,7 +15,7 @@
           type="button"
           (click)="onInlineFormOpen()"
         >
-          <sky-icon iconName="edit" iconSize="s" />
+          <sky-icon iconName="edit" />
         </button>
       </td>
     </tr>

diff --git a/apps/e2e/layout-storybook/src/app/inline-delete/inline-delete.component.html b/apps/e2e/layout-storybook/src/app/inline-delete/inline-delete.component.html
@@ -2,7 +2,7 @@
   <p>Triggered inline delete:</p>
   <div class="screenshot-inline-delete">
     <button class="sky-btn sky-btn-danger" type="button">
-      <sky-icon iconName="delete" iconSize="s" />
+      <sky-icon iconName="delete" />
     </button>
     <sky-inline-delete [pending]="false" />
   </div>
@@ -12,7 +12,7 @@
   <p>Triggered inline delete, pending:</p>
   <div class="screenshot-inline-delete">
     <button class="sky-btn sky-btn-danger" type="button">
-      <sky-icon iconName="delete" iconSize="s" />
+      <sky-icon iconName="delete" />
     </button>
     <sky-inline-delete [pending]="true" />
   </div>

diff --git a/apps/e2e/layout-storybook/src/app/toolbar/toolbar.component.html b/apps/e2e/layout-storybook/src/app/toolbar/toolbar.component.html
@@ -4,7 +4,6 @@
       <!-- The margin style here is to properly space the icon and button text in modern theme. This is not possible in the toolbar item with pure css today because you can't distinguish pure text nodes in css. -->
       <sky-icon
         iconName="add"
-        iconSize="s"
         [ngClass]="{
           'sky-margin-inline-compact': theme === 'modern'
         }"
@@ -40,14 +39,14 @@
       title="Sort descending"
       type="button"
     >
-      <sky-icon iconName="chevron-double-down" iconSize="s" />
+      <sky-icon iconName="chevron-double-down" />
     </button>
     <button
       class="sky-btn sky-btn-default sky-btn-icon"
       title="Sort ascending"
       type="button"
     >
-      <sky-icon iconName="chevron-double-up" iconSize="s" />
+      <sky-icon iconName="chevron-double-up" />
     </button>
   </sky-toolbar-view-actions>
 </sky-toolbar>
@@ -84,14 +83,14 @@
         title="Sort descending"
         type="button"
       >
-        <sky-icon iconName="chevron-double-down" iconSize="s" />
+        <sky-icon iconName="chevron-double-down" />
       </button>
       <button
         class="sky-btn sky-btn-default sky-btn-icon"
         title="Sort ascending"
         type="button"
       >
-        <sky-icon iconName="chevron-double-up" iconSize="s" />
+        <sky-icon iconName="chevron-double-up" />
       </button>
     </sky-toolbar-view-actions>
   </sky-toolbar-section>

diff --git a/apps/e2e/lists-storybook/src/app/repeater/repeater.component.html b/apps/e2e/lists-storybook/src/app/repeater/repeater.component.html
@@ -29,7 +29,7 @@
         class="sky-btn sky-btn-icon-borderless"
         type="button"
       >
-        <sky-icon iconName="edit" iconSize="s" />
+        <sky-icon iconName="edit" />
       </button>
     </sky-repeater-item-context-menu>
     <sky-repeater-item-title>Item 3</sky-repeater-item-title>
@@ -46,7 +46,7 @@
         class="sky-btn sky-btn-icon-borderless"
         type="button"
       >
-        <sky-icon iconName="edit" iconSize="s" />
+        <sky-icon iconName="edit" />
       </button>
     </sky-repeater-item-context-menu>
     <sky-repeater-item-title>Item 4</sky-repeater-item-title>

diff --git a/apps/e2e/popovers-storybook/src/app/dropdown/dropdown.component.html b/apps/e2e/popovers-storybook/src/app/dropdown/dropdown.component.html
@@ -4,9 +4,7 @@
   [disabled]="disabledFlag"
   [horizontalAlignment]="horizontalAlignment"
 >
-  <sky-dropdown-button
-    ><sky-icon iconName="edit" iconSize="s"
-  /></sky-dropdown-button>
+  <sky-dropdown-button><sky-icon iconName="edit" /></sky-dropdown-button>
   <sky-dropdown-menu>
     <sky-dropdown-item>Item 1</sky-dropdown-item>
     <sky-dropdown-item>Item 2</sky-dropdown-item>
@@ -62,9 +60,9 @@
     skyDropdownTrigger
   >
     <div class="custom-trigger-inner">
-      <sky-icon iconName="add" iconSize="s" />
+      <sky-icon iconName="add" />
       New
-      <sky-icon iconName="chevron-down" iconSize="s" />
+      <sky-icon iconName="chevron-down" />
     </div>
   </button>
   <sky-dropdown-menu>

diff --git a/apps/integration-e2e/src/e2e/modal-viewkept-toolbars.cy.ts b/apps/integration-e2e/src/e2e/modal-viewkept-toolbars.cy.ts
@@ -24,11 +24,13 @@ describe('modal-viewkept-toolbars', () => {
         cy.get('.sky-lookup-show-more-modal-toolbar')
           .should('exist')
           .should('be.visible');
-        cy.get('.sky-lookup-show-more-modal-toolbar sky-icon[icon="search"]')
+        cy.get(
+          '.sky-lookup-show-more-modal-toolbar sky-icon[iconName="search"]',
+        )
           .should('exist')
           .should('be.visible');
         cy.get(
-          '.sky-lookup-show-more-modal-toolbar sky-icon[icon="search"] > i',
+          '.sky-lookup-show-more-modal-toolbar sky-icon[iconName="search"] > i',
         )
           .should('exist')
           .should('be.visible')
@@ -46,7 +48,7 @@ describe('modal-viewkept-toolbars', () => {
             el.first() && parseFloat(el.first().css('opacity')) > 0.9,
         );
         cy.get(
-          '.sky-lookup-show-more-modal-toolbar sky-icon[icon="search"] > i',
+          '.sky-lookup-show-more-modal-toolbar sky-icon[iconName="search"] > i',
         ).should(
           'satisfy',
           (el: JQuery<HTMLElement>) =>
@@ -55,7 +57,7 @@ describe('modal-viewkept-toolbars', () => {
         cy.get('.sky-lookup-show-more-modal-multiselect-toolbar').should(
           'be.visible',
         );
-        cy.get('sky-icon[icon="search"]').should('be.visible');
+        cy.get('sky-icon[iconName="search"]').should('be.visible');
         cy.window().skyVisualTest(`modal-viewkept-toolbars-${theme}`);
       });
     });

diff --git a/...src/app/integrations/modal-viewkept-toolbars/modal-viewkept-toolbars-modal.component.html b/...src/app/integrations/modal-viewkept-toolbars/modal-viewkept-toolbars-modal.component.html
@@ -16,7 +16,7 @@
             type="button"
             class="sky-btn sky-btn-link sky-lookup-show-more-modal-add"
           >
-            <sky-icon icon="add" />
+            <sky-icon iconName="add" />
             Add
           </button>
         </sky-toolbar-view-actions>

diff --git a/...und/src/app/components/core/resize-observer/flyout/resize-observer-content.component.html b/...und/src/app/components/core/resize-observer/flyout/resize-observer-content.component.html
@@ -1,7 +1,7 @@
 @if (tabsHidden()) {
   <div class="sky-padding-even-md">
     <button class="sky-btn sky-btn-primary" type="button" (click)="showTabs()">
-      <sky-icon iconName="chevron-left" iconSize="s" />
+      <sky-icon iconName="chevron-left" />
       Show tabs
     </button>
   </div>

diff --git a/apps/playground/src/app/components/indicators/icon/icon.component.html b/apps/playground/src/app/components/indicators/icon/icon.component.html
@@ -3,12 +3,12 @@
   <sky-icon icon="copy-to-clipboard" size="lg" /> some more text
 </p>
 <p>
-  <sky-icon icon="copy-to-clipboard" iconSize="s" /> some text
+  <sky-icon icon="copy-to-clipboard" size="md" /> some text
   <sky-icon iconName="clipboard-multiple" iconSize="m" /> some more text
 </p>
 
 <div class="sky-margin-stacked-lg">
-  <sky-icon icon="sparkles-2" />
+  <sky-icon icon="sparkles-2" size="md" />
   <sky-icon iconName="sparkles" />
   <sky-icon icon="sparkles-2" size="lg" />
   <sky-icon iconName="sparkles" size="lg" />
@@ -39,13 +39,13 @@
   Some text.
 </div>
 <div class="sky-margin-stacked-lg">
-  <sky-icon iconName="sparkles" iconSize="s" />
+  <sky-icon iconName="sparkles" />
   <sky-icon iconName="sparkles" iconSize="m" />
   <sky-icon iconName="sparkles" iconSize="l" />
   <sky-icon iconName="sparkles" iconSize="xl" />
 </div>
 <div>
-  <sky-icon icon="copy-to-clipboard" />
+  <sky-icon icon="copy-to-clipboard" size="md" />
   <sky-icon icon="copy-to-clipboard" size="lg" />
 </div>
 <div>
@@ -85,7 +85,7 @@
     type="button"
     class="sky-btn sky-btn-default sky-margin-inline-sm"
   >
-    <sky-icon iconName="clipboard-multiple" iconSize="s" />
+    <sky-icon iconName="clipboard-multiple" />
   </button>
 </p>
 
@@ -96,7 +96,7 @@
     type="button"
     class="sky-btn sky-btn-default sky-margin-inline-sm"
   >
-    <sky-icon icon="copy-to-clipboard" />
+    <sky-icon icon="copy-to-clipboard" size="md" />
   </button>
 </p>
 
@@ -115,26 +115,26 @@
   </button>
   more text
   <button type="button" class="sky-btn sky-btn-primary sky-margin-inline-sm">
-    <sky-icon icon="copy-to-clipboard" /> Copy
+    <sky-icon icon="copy-to-clipboard" size="md" /> Copy
   </button>
   ok that is the rest of the text
 </p>
 <p>
   text next to the button
   <button type="button" class="sky-btn sky-btn-primary sky-margin-inline-sm">
-    <sky-icon iconName="clipboard-multiple" iconSize="s" /> Copy
+    <sky-icon iconName="clipboard-multiple" /> Copy
   </button>
   more text
   <button type="button" class="sky-btn sky-btn-primary sky-margin-inline-sm">
-    <sky-icon iconName="edit" iconSize="s" /> Copy
+    <sky-icon iconName="edit" /> Copy
   </button>
   more text
   <button type="button" class="sky-btn sky-btn-primary sky-margin-inline-sm">
-    <sky-icon iconName="sky-success" iconSize="s" /> Copy
+    <sky-icon iconName="sky-success" /> Copy
   </button>
   more text
   <button type="button" class="sky-btn sky-btn-primary sky-margin-inline-sm">
-    <sky-icon icon="copy-to-clipboard" /> Copy
+    <sky-icon icon="copy-to-clipboard" size="md" /> Copy
   </button>
   ok that is the rest of the text
 </p>
@@ -173,7 +173,7 @@ <h2>
 
 <p>
   Default size icon next to text inside a paragraph
-  <sky-icon icon="edit" /> some text after
+  <sky-icon icon="edit" size="md" /> some text after
 </p>
 
 <p style="font-size: 24px">
@@ -182,7 +182,7 @@ <h2>
 </p>
 <p style="font-size: 24px">
   Default size icon next to text inside a paragraph size 24px font
-  <sky-icon icon="edit" /> some text after
+  <sky-icon icon="edit" size="md" /> some text after
 </p>
 
 <p>
@@ -200,11 +200,11 @@ <h2>
 </p>
 <p style="font-size: 48px">
   16px size icon next to text inside a paragraph size 48px font
-  <span style="font-size: 16px"><sky-icon icon="edit" /></span>
+  <span style="font-size: 16px"><sky-icon icon="edit" size="md" /></span>
 </p>
 
 Icon next to text inline <sky-icon iconName="edit" /> Icon next to text inline
-<sky-icon icon="edit" />
+<sky-icon icon="edit" size="md" />
 
 regular text inline lg icon <sky-icon iconName="edit" size="lg" /> regular text
 inline lg icon <sky-icon icon="edit" size="lg" />
@@ -221,7 +221,7 @@ <h2>
 </div>
 <div style="font-size: 48px">
   Really big text next to a small icon in a div<span style="font-size: 16px"
-    ><sky-icon icon="edit"
+    ><sky-icon icon="edit" size="md"
   /></span>
 </div>