diff --git a/core/src/components/input-password-toggle/input-password-toggle.ionic.scss b/core/src/components/input-password-toggle/input-password-toggle.ionic.scss index c5ce03da15..7f6e956b3d 100644 --- a/core/src/components/input-password-toggle/input-password-toggle.ionic.scss +++ b/core/src/components/input-password-toggle/input-password-toggle.ionic.scss @@ -3,10 +3,18 @@ // Ionic Input Toggle Password // -------------------------------------------------- -:host ion-button.button-has-icon-only { - --padding-end: inherit; - --color: #{globals.$ionic-color-neutral-500}; +:host ion-button { + --color: #{globals.$ionic-color-neutral-800}; --margin-end: calc(-1 * var(--padding-end)); + --padding-end: inherit; + --icon-size: #{globals.dynamic-font(16px)}; @include globals.margin(0, var(--margin-end), 0, 0); + + width: var(--size); + height: var(--size); + + ion-icon { + font-size: var(--icon-size); + } } diff --git a/core/src/components/input-password-toggle/test/basic/index.html b/core/src/components/input-password-toggle/test/basic/index.html index 558cc9a973..f373be7ce8 100644 --- a/core/src/components/input-password-toggle/test/basic/index.html +++ b/core/src/components/input-password-toggle/test/basic/index.html @@ -19,6 +19,9 @@ grid-row-gap: 20px; grid-column-gap: 20px; } + .margin-top { + margin-top: 20px; + } h2 { font-size: 12px; font-weight: normal; @@ -47,7 +50,7 @@
-

Default

+

Default - Size Medium

+
+

Default - Size Large

+ + + +
+
+

Custom Icon

diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts index 375d54dee8..ee45ad2a6d 100644 --- a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts +++ b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts @@ -47,4 +47,21 @@ configs({ modes: ['md', 'ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti await expect(inputPasswordToggle).toHaveScreenshot(screenshot('input-password-toggle')); }); }); + + test.describe(title('input password toggle - large size: rendering'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const inputPasswordToggle = page.locator('ion-input-password-toggle'); + + await expect(inputPasswordToggle).toHaveScreenshot(screenshot('input-password-toggle-large-size')); + }); + }); }); diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png index ac5c769287..251ad7817e 100644 Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Firefox-linux.png index f80a3dfc3d..263a7b9117 100644 Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png index 11d6912ec9..0d1b34be02 100644 Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..68f3d24f21 Binary files /dev/null and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..55ff1c715d Binary files /dev/null and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bfadada5c5 Binary files /dev/null and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4bd170eea4 Binary files /dev/null and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d8fd77a744 Binary files /dev/null and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ef43adce9e Binary files /dev/null and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b7c0b5820e Binary files /dev/null and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ba2f563852 Binary files /dev/null and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Safari-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..23c20020be Binary files /dev/null and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx b/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx index 9e771598e2..3586dd5cbb 100644 --- a/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx +++ b/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx @@ -1,10 +1,10 @@ import { h } from '@stencil/core'; import { newSpecPage } from '@stencil/core/testing'; +import { initialize } from '../../../global/ionic-global'; +import { Button } from '../../button/button'; import { Input } from '../../input/input'; import { InputPasswordToggle } from '../input-password-toggle'; -import { Button } from '../../button/button'; -import { initialize } from '../../../global/ionic-global'; describe('input password toggle', () => { it('should toggle input type when clicked', async () => { diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss index d5af9301b9..9a00e21bce 100644 --- a/core/src/components/input/input.ionic.outline.scss +++ b/core/src/components/input/input.ionic.outline.scss @@ -153,5 +153,5 @@ // ---------------------------------------------------------------- :host(.input-fill-outline.has-focus) { - --border-width: #{tokens.$ionic-border-size-050}; + --border-width: #{globals.$ionic-border-size-050}; } diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index 5891078f03..520705444a 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -1,4 +1,4 @@ -@use "../../foundations/ionic.vars.scss" as tokens; +@use "../../themes/ionic/ionic.globals.scss" as globals; @import "./input"; @import "./input.ionic.vars"; @import "./input.ionic.outline.scss"; @@ -7,17 +7,17 @@ // -------------------------------------------------- :host { - --color: #{tokens.$ionic-color-neutral-1000}; - --border-width: #{tokens.$ionic-border-size-025}; - --border-color: #{tokens.$ionic-color-neutral-300}; - --highlight-color-valid: #{tokens.$ionic-color-success-base}; - --highlight-color-invalid: #{tokens.$ionic-color-danger-base}; - --placeholder-color: #{tokens.$ionic-color-neutral-800}; + --color: #{globals.$ionic-color-neutral-1000}; + --border-width: #{globals.$ionic-border-size-025}; + --border-color: #{globals.$ionic-color-neutral-300}; + --highlight-color-valid: #{globals.$ionic-color-success-base}; + --highlight-color-invalid: #{globals.$ionic-color-danger-base}; + --placeholder-color: #{globals.$ionic-color-neutral-800}; --placeholder-opacity: 1; - --text-color-invalid: #{tokens.$ionic-color-danger-800}; - --background: #{tokens.$ionic-color-base-white}; + --text-color-invalid: #{globals.$ionic-color-danger-800}; + --background: #{globals.$ionic-color-base-white}; - font-size: tokens.$ionic-font-size-350; + font-size: globals.$ionic-font-size-350; } // Ionic Input Sizes @@ -35,6 +35,21 @@ min-height: 56px; } +// Ionic Input Password Toggle Sizes +// -------------------------------------------------- + +:host ion-input-password-toggle { + --size: #{globals.$ionic-scale-1000}; +} + +:host(.input-size-large) ion-input-password-toggle { + --size: #{globals.$ionic-scale-1200}; +} + +:host(.input-size-xlarge) ion-input-password-toggle { + --size: #{globals.$ionic-scale-1400}; +} + // Target area // -------------------------------------------------- :host .native-wrapper::after { @@ -74,13 +89,13 @@ width: 16px; height: 16px; - color: #{tokens.$ionic-color-neutral-500}; + color: globals.$ionic-color-neutral-500; } .input-clear-icon:focus-visible { - @include border-radius(tokens.$ionic-border-radius-100); + @include border-radius(globals.$ionic-border-radius-100); - outline: #{tokens.$ionic-border-size-050} solid #{tokens.$ionic-state-focus-1}; + outline: globals.$ionic-border-size-050 globals.$ionic-border-style-solid globals.$ionic-state-focus-1; opacity: 1; } @@ -109,12 +124,12 @@ // ---------------------------------------------------------------- .label-text-wrapper { - color: tokens.$ionic-color-neutral-1000; + color: globals.$ionic-color-neutral-1000; - font-size: tokens.$ionic-font-size-300; - font-weight: tokens.$ionic-font-weight-medium; + font-size: globals.$ionic-font-size-300; + font-weight: globals.$ionic-font-weight-medium; - line-height: tokens.$ionic-line-height-500; + line-height: globals.$ionic-line-height-500; } :host(.label-floating) .label-text-wrapper { @@ -127,16 +142,16 @@ .input-bottom { @include padding(7px, 0); - font-weight: tokens.$ionic-font-weight-medium; + font-weight: globals.$ionic-font-weight-medium; } .input-bottom .helper-text, .input-bottom .counter { - color: tokens.$ionic-color-neutral-800; + color: globals.$ionic-color-neutral-800; } :host(.has-focus.ion-valid) .helper-text { - color: tokens.$ionic-color-success-900; + color: globals.$ionic-color-success-900; } :host(.ion-touched.ion-invalid) .error-text { @@ -145,7 +160,7 @@ :host(.has-focus.ion-valid), :host(.ion-touched.ion-invalid) { - --border-width: #{tokens.$ionic-border-size-025}; + --border-width: #{globals.$ionic-border-size-025}; } // Input Hover @@ -153,7 +168,7 @@ @media (any-hover: hover) { :host(:hover) { - --border-color: #{tokens.$ionic-color-neutral-600}; + --border-color: #{globals.$ionic-color-neutral-600}; } } @@ -162,8 +177,8 @@ :host(.input-disabled) { // color for the text within the input - --color: #{tokens.$ionic-color-neutral-400}; - --background: #{tokens.$ionic-color-neutral-100}; + --color: #{globals.$ionic-color-neutral-400}; + --background: #{globals.$ionic-color-neutral-100}; pointer-events: none; } @@ -171,15 +186,15 @@ :host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text, :host(.input-disabled) .input-bottom .counter, :host(.input-disabled) .label-text-wrapper { - color: tokens.$ionic-color-neutral-500; + color: globals.$ionic-color-neutral-500; } :host(.input-disabled.has-focus.ion-valid) { - --border-color: rgba(#{tokens.$ionic-color-success-base-rgb}, 0.6); + --border-color: rgba(#{globals.$ionic-color-success-base-rgb}, 0.6); } :host(.input-disabled.ion-touched.ion-invalid) { - --border-color: rgba(#{tokens.$ionic-color-danger-base-rgb}, 0.6); + --border-color: rgba(#{globals.$ionic-color-danger-base-rgb}, 0.6); } :host(.input-disabled.ion-color) { @@ -197,7 +212,7 @@ // ---------------------------------------------------------------- :host(.input-readonly) { - --background: #{tokens.$ionic-color-neutral-100}; + --background: #{globals.$ionic-color-neutral-100}; } // Input Highlight @@ -209,7 +224,7 @@ position: absolute; width: 100%; - height: tokens.$ionic-border-size-050; + height: globals.$ionic-border-size-050; transform: scale(0); @@ -222,7 +237,7 @@ // ---------------------------------------------------------------- :host(.has-focus) { - --border-color: #{tokens.$ionic-color-primary-base}; + --border-color: #{globals.$ionic-color-primary-base}; } :host(.has-focus) .input-highlight {