chore: visually update two components

.github/workflows/actions/test-core-screenshot/action.yml

@@ -7,6 +7,11 @@ inputs:
     description: 'Playwright total number of test shards (ex: 4)'
   update:
     description: 'Whether or not to update the reference snapshots'
+  component:
+    description: 'The component to update the reference snapshots'
+  component-folder:
+    description: 'The component folder to update the reference snapshots'
+    type: boolean
 
 runs:
   using: 'composite'
@@ -23,9 +28,28 @@ runs:
       run: npm install && npx playwright install && npx playwright install-deps
       shell: bash
       working-directory: ./core
+    - name: Clean Component Name
+      # Remove `ion-` prefix from component name if it exists.
+      run: |
+        echo "component=$(echo ${{ inputs.component }} | sed 's/ion-//')" >> $GITHUB_OUTPUT
+      shell: bash
+    - name: Set Test File
+      # Screenshots can be updated for all components or a single component.
+      # If a single component is specified, then the test has the option to
+      # - run all the file paths that have the component name in them. For example: if the component is "item", then the test will run all the file paths that have "item" in them.
+      # - run all the file paths that are in the component folder. For example: if the component is "item", then the test will run all the file paths that are in the "src/components/item/" folder.
+      run: |
+        if [ -n "${{ steps.clean-component-name.outputs.component }}" ] && [ "${{ inputs.component-folder }}" == "true" ]; then
+          echo "testFile=$(echo 'src/components/${{ steps.clean-component-name.outputs.component }}/')" >> $GITHUB_OUTPUT
+        elif [ -n "${{ steps.clean-component-name.outputs.component }}" ]; then
+          echo "testFile=$(echo '${{ steps.clean-component-name.outputs.component }}')" >> $GITHUB_OUTPUT
+        else
+          echo "testFile=$(echo '')" >> $GITHUB_OUTPUT
+        fi
+      shell: bash
     - name: Test
       if: inputs.update != 'true'
-      run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
+      run: npm run test.e2e ${{steps.set-test-file.outputs.testFile}} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
       shell: bash
       working-directory: ./core
     - name: Test and Update
@@ -47,7 +71,7 @@ runs:
       # which is why we not using the upload-archive
       # composite step here.
       run: |
-        npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
+        npm run test.e2e ${{steps.set-test-file.outputs.testFile}} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
         git add src/\*.png --force
         mkdir updated-screenshots
         cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots

.github/workflows/update-screenshots.yml

@@ -2,6 +2,16 @@ name: 'Update Reference Screenshots'
 
 on:
   workflow_dispatch:
+    inputs:
+      component:
+        description: 'Which component should be updated? (leave blank to update all)'
+        required: false
+        default: ''
+      component-folder:
+        description: 'If a component is selected, should it only update its respective folder? (leave blank to update all)'
+        required: false
+        default: true
+        type: boolean
 
 jobs:
   build-core:
@@ -34,6 +44,8 @@ jobs:
           shard: ${{ matrix.shard }}
           totalShards: ${{ matrix.totalShards }}
           update: true
+          component: ${{ inputs.component }}
+          component-folder: ${{ inputs.component-folder}}
 
   update-reference-screenshots:
     runs-on: ubuntu-latest

core/src/components/button/button.scss

@@ -64,11 +64,13 @@
   vertical-align: -webkit-baseline-middle; // the best for those that support it
 
   font-kerning: none;
+
+  transform: scale(2);
 }
 
 :host(.button-disabled) {
   cursor: default;
-  opacity: .5;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -81,7 +83,6 @@
   --color: #{ion-color(primary, contrast)};
 }
 
-
 // Outline Button
 // --------------------------------------------------
 
@@ -92,7 +93,6 @@
   --color: #{ion-color(primary, base)};
 }
 
-
 // Clear Button
 // --------------------------------------------------
 
@@ -103,7 +103,6 @@
   --color: #{ion-color(primary, base)};
 }
 
-
 // Block Button
 // --------------------------------------------------
 
@@ -125,7 +124,6 @@
   clear: both;
 }
 
-
 // Full Button
 // --------------------------------------------------
 
@@ -210,16 +208,14 @@
   z-index: 1;
 }
 
-
 // Button Slots
 // --------------------------------------------------
 
-::slotted([slot=start]),
-::slotted([slot=end]) {
+::slotted([slot="start"]),
+::slotted([slot="end"]) {
   flex-shrink: 0;
 }
 
-
 // Button Icons
 // --------------------------------------------------
 
@@ -229,18 +225,17 @@
 }
 
 ::slotted(ion-icon[slot="start"]) {
-  @include margin(0, .3em, 0, -.3em);
+  @include margin(0, 0.3em, 0, -0.3em);
 }
 
 ::slotted(ion-icon[slot="end"]) {
-  @include margin(0, -.2em, 0, .3em);
+  @include margin(0, -0.2em, 0, 0.3em);
 }
 
 ::slotted(ion-icon[slot="icon-only"]) {
   font-size: 1.8em;
 }
 
-
 // Button Ripple effect
 // --------------------------------------------------
 
@@ -248,7 +243,6 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
-
 // Button: States
 // --------------------------------------------------
 
@@ -291,7 +285,6 @@ ion-ripple-effect {
   opacity: var(--background-activated-opacity);
 }
 
-
 // Button Colors
 // --------------------------------------------------
 
@@ -315,7 +308,6 @@ ion-ripple-effect {
   color: current-color(base);
 }
 
-
 // Button in Toolbar
 // --------------------------------------------------
 

core/src/components/checkbox/checkbox.scss

@@ -36,6 +36,8 @@
 
   user-select: none;
   z-index: $z-index-item-input;
+
+  transform: scale(2);
 }
 
 :host(.in-item) {
@@ -165,7 +167,6 @@ input {
   opacity: 0;
 }
 
-
 // Justify Content
 // ---------------------------------------------
 
@@ -181,7 +182,6 @@ input {
   justify-content: end;
 }
 
-
 // Label Placement - Start
 // ----------------------------------------------------------------
 
@@ -202,7 +202,6 @@ input {
   @include margin(null, $form-control-label-margin, null, 0);
 }
 
-
 // Label Placement - End
 // ----------------------------------------------------------------
 
@@ -223,7 +222,6 @@ input {
   @include margin(null, 0, null, $form-control-label-margin);
 }
 
-
 // Label Placement - Fixed
 // ----------------------------------------------------------------
 
@@ -248,7 +246,6 @@ input {
   max-width: 200px;
 }
 
-
 // Checked / Indeterminate Checkbox
 // ---------------------------------------------
 
@@ -264,7 +261,6 @@ input {
   opacity: 1;
 }
 
-
 // Disabled Checkbox
 // ---------------------------------------------