test(button): migrate to Playwright (#25943)
Amanda Johnston
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: anchor', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/anchor?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -7,7 +7,7 @@ test.describe('button: basic', () => {
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
|
||||
expect(await page.screenshot()).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: basic', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/basic?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -88,9 +88,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button expand="block" id="disabledButton" disabled onclick="clickedButton(event)"
|
||||
>Button Disabled</ion-button
|
||||
>
|
||||
<ion-button expand="block" id="disabledButton" disabled>Button Disabled</ion-button>
|
||||
<ion-button expand="block" color="secondary" disabled>Secondary Disabled</ion-button>
|
||||
<ion-button expand="block" color="tertiary" style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>
|
||||
</p>
|
||||
@ -125,13 +123,8 @@
|
||||
|
||||
function toggleDisabled() {
|
||||
var buttonEl = document.getElementById('disabledButton');
|
||||
console.log(buttonEl);
|
||||
buttonEl.disabled = !buttonEl.disabled;
|
||||
}
|
||||
|
||||
function clickedButton(ev) {
|
||||
console.log('Clicked button', ev);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
12
core/src/components/button/test/clear/button.e2e.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('button: clear', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/button/test/clear`);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`button-clear-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 283 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 290 KiB |
|
After Width: | Height: | Size: 283 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 291 KiB |
|
After Width: | Height: | Size: 213 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 213 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 216 KiB |
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: clear', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/clear?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -1,31 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: dynamic', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/dynamic?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compares = [];
|
||||
|
||||
compares.push(await page.compareScreenshot());
|
||||
|
||||
await page.click('#add-item-button');
|
||||
|
||||
compares.push(await page.compareScreenshot('add item button'));
|
||||
|
||||
await page.click('#add-item-divider-button');
|
||||
|
||||
compares.push(await page.compareScreenshot('add item divider button'));
|
||||
|
||||
await page.click('#change-item-button');
|
||||
|
||||
compares.push(await page.compareScreenshot('change item button size'));
|
||||
|
||||
await page.click('#change-item-divider-button');
|
||||
|
||||
compares.push(await page.compareScreenshot('change item divider button size'));
|
||||
|
||||
for (const compare of compares) {
|
||||
expect(compare).toMatchScreenshot();
|
||||
}
|
||||
});
|
||||
@ -1,70 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Button - Dynamic</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Button - Dynamic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding" id="content" no-bounce>
|
||||
<ion-item id="dynamicItem">
|
||||
<ion-button slot="start">Default</ion-button>
|
||||
<ion-label>Dynamic Button</ion-label>
|
||||
<ion-button id="dynamicItemLarge" slot="end" size="large">Large</ion-button>
|
||||
</ion-item>
|
||||
<ion-button id="add-item-button" color="success" onClick="addButton('dynamicItem')"> Add a Button </ion-button>
|
||||
<ion-button id="change-item-button" color="tertiary" onClick="changeButtonSize('dynamicItemLarge')">
|
||||
Change Button Size
|
||||
</ion-button>
|
||||
|
||||
<ion-item-divider id="dynamicItemDivider">
|
||||
<ion-button slot="start">Default</ion-button>
|
||||
<ion-label>Dynamic Button</ion-label>
|
||||
<ion-button id="dynamicItemDividerLarge" slot="end" size="large">Large</ion-button>
|
||||
</ion-item-divider>
|
||||
<ion-button id="add-item-divider-button" color="success" onClick="addButton('dynamicItemDivider')">
|
||||
Add a Button
|
||||
</ion-button>
|
||||
<ion-button
|
||||
id="change-item-divider-button"
|
||||
color="tertiary"
|
||||
onClick="changeButtonSize('dynamicItemDividerLarge')"
|
||||
>
|
||||
Change Button Size
|
||||
</ion-button>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
function addButton(dynamicId) {
|
||||
var item = document.querySelector('#' + dynamicId);
|
||||
var button = document.createElement('ion-button');
|
||||
button.textContent = 'Button';
|
||||
button.slot = 'start';
|
||||
item.appendChild(button);
|
||||
}
|
||||
|
||||
function changeButtonSize(dynamicId) {
|
||||
var button = document.querySelector('#' + dynamicId);
|
||||
var size = button.size === 'large' ? undefined : 'large';
|
||||
button.size = size;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
13
core/src/components/button/test/expand/button.e2e.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('button: expand', () => {
|
||||
test('should not have visual regressions', async ({ page, skip }) => {
|
||||
skip.rtl('All content takes up the full width, so RTL has no effect.');
|
||||
await page.goto(`/src/components/button/test/expand`);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`button-expand-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 101 KiB |
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: expand', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/expand?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
12
core/src/components/button/test/icon/button.e2e.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('button: icon', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/button/test/icon`);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`button-icon-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 92 KiB |
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: icon', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/icon?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
12
core/src/components/button/test/outline/button.e2e.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('button: outline', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/button/test/outline`);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`button-outline-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 344 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 346 KiB |
|
After Width: | Height: | Size: 344 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 346 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 233 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 234 KiB |
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: outline', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/outline?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
13
core/src/components/button/test/round/button.e2e.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('button: round', () => {
|
||||
test('should not have visual regressions', async ({ page, skip }) => {
|
||||
skip.rtl('All content takes up the full width, so RTL has no effect.');
|
||||
await page.goto(`/src/components/button/test/round`);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`button-round-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 202 KiB |
|
After Width: | Height: | Size: 192 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 198 KiB |
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: round', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/round?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
12
core/src/components/button/test/size/button.e2e.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('button: size', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/button/test/size`);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`button-size-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 47 KiB |
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: size', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/size?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: standalone', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/standalone?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -1,123 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Button - Standalone</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/core.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h3>Default</h3>
|
||||
<p>
|
||||
<ion-button>Default</ion-button>
|
||||
<ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button><ion-icon slot="start" name="pin"></ion-icon>Map</ion-button>
|
||||
<ion-button shape="round">Round</ion-button>
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button fill="outline" expand="full"
|
||||
>Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline</ion-button
|
||||
>
|
||||
<ion-button fill="clear" expand="block">Block Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<h3>Round button combinations</h3>
|
||||
<p>
|
||||
<ion-button shape="round" size="small">Round & Small</ion-button>
|
||||
<ion-button shape="round" size="large">Round & Large</ion-button>
|
||||
<ion-button shape="round" fill="outline">Round & Outline</ion-button>
|
||||
</p>
|
||||
|
||||
<h3>Colors</h3>
|
||||
<p>
|
||||
<ion-button color="primary">Primary</ion-button>
|
||||
<ion-button color="secondary">Secondary</ion-button>
|
||||
<ion-button color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="outline" color="success">Success Outline</ion-button>
|
||||
<ion-button fill="clear" color="warning">Warning Clear</ion-button>
|
||||
<ion-button color="danger">Danger</ion-button>
|
||||
<ion-button color="light">Light</ion-button>
|
||||
<ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
|
||||
<ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<h3>Custom</h3>
|
||||
|
||||
<!-- Custom Font -->
|
||||
<ion-button class="wide">wide</ion-button>
|
||||
<ion-button class="large">large</ion-button>
|
||||
<ion-button class="round">rounded</ion-button>
|
||||
<ion-button aria-label="this is my custom label">custom aria-label</ion-button>
|
||||
|
||||
<!-- Custom Colors -->
|
||||
<ion-button class="custom">custom</ion-button>
|
||||
<ion-button class="custom ion-activated ion-focused">custom.focused</ion-button>
|
||||
<ion-button class="custom ion-activated">custom.activated</ion-button>
|
||||
<ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
|
||||
<ion-button fill="clear" class="medium">custom medium</ion-button>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button>Default</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Bar</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary">Secondary</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button class="custom">Custom</ion-button>
|
||||
<ion-button class="custom ion-activated">Custom.a</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Bar</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary" class="custom">Custom Secondary</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<style>
|
||||
.wide {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.round {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
--border-radius: 50%;
|
||||
--vertical-align: middle;
|
||||
|
||||
--padding-start: 10px;
|
||||
--padding-end: 10px;
|
||||
}
|
||||
|
||||
.custom {
|
||||
--background: lightpink;
|
||||
--background-hover: #ffb6c1;
|
||||
--background-activated: green;
|
||||
--color: #222;
|
||||
--color-activated: white;
|
||||
--opacity: 1;
|
||||
}
|
||||
|
||||
.medium {
|
||||
--color: #989aa2;
|
||||
--background-hover: #989aa2;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: states', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/states?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -1,160 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Button - States</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/core.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<h3>Default</h3>
|
||||
<p>
|
||||
<ion-button>Default</ion-button>
|
||||
<ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button shape="round">Round</ion-button>
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button color="secondary">Default</ion-button>
|
||||
<ion-button color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button color="danger" shape="round" fill="outline">Round</ion-button>
|
||||
<ion-button color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button color="dark" fill="clear">Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<h3>Focused</h3>
|
||||
<p>
|
||||
<ion-button class="ion-focused">Default</ion-button>
|
||||
<ion-button class="ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="ion-focused" shape="round">Round</ion-button>
|
||||
<ion-button class="ion-focused" fill="outline">Outline</ion-button>
|
||||
<ion-button class="ion-focused" fill="clear">Clear</ion-button>
|
||||
<ion-button class="ion-focused" color="secondary">Default</ion-button>
|
||||
<ion-button class="ion-focused" color="tertiary"
|
||||
><ion-icon slot="icon-only" name="star"></ion-icon
|
||||
></ion-button>
|
||||
<ion-button class="ion-focused" color="danger" shape="round" fill="outline">Round</ion-button>
|
||||
<ion-button class="ion-focused" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="ion-focused" color="dark" fill="clear">Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<h3>Activated</h3>
|
||||
<p>
|
||||
<ion-button class="ion-activated">Default</ion-button>
|
||||
<ion-button class="ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="ion-activated" shape="round">Round</ion-button>
|
||||
<ion-button class="ion-activated" fill="outline">Outline</ion-button>
|
||||
<ion-button class="ion-activated" fill="clear">Clear</ion-button>
|
||||
<ion-button class="ion-activated" color="secondary">Default</ion-button>
|
||||
<ion-button class="ion-activated" color="tertiary"
|
||||
><ion-icon slot="icon-only" name="star"></ion-icon
|
||||
></ion-button>
|
||||
<ion-button class="ion-activated" color="danger" shape="round" fill="outline">Round</ion-button>
|
||||
<ion-button class="ion-activated" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="ion-activated" color="dark" fill="clear">Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<h3>Custom</h3>
|
||||
<p>
|
||||
<ion-button class="custom">Default</ion-button>
|
||||
<ion-button class="custom"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom" shape="round">Round</ion-button>
|
||||
<ion-button class="custom" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom" color="secondary">Default</ion-button>
|
||||
<ion-button class="custom" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom" color="danger" shape="round" fill="outline">Round</ion-button>
|
||||
<ion-button class="custom" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom" color="dark" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom ion-focused">Default</ion-button>
|
||||
<ion-button class="custom ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom ion-focused" shape="round">Round</ion-button>
|
||||
<ion-button class="custom ion-focused" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom ion-focused" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom ion-focused" color="secondary">Default</ion-button>
|
||||
<ion-button class="custom ion-focused" color="tertiary"
|
||||
><ion-icon slot="icon-only" name="star"></ion-icon
|
||||
></ion-button>
|
||||
<ion-button class="custom ion-focused" color="danger" shape="round" fill="outline">Round</ion-button>
|
||||
<ion-button class="custom ion-focused" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom ion-focused" color="dark" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom ion-activated">Default</ion-button>
|
||||
<ion-button class="custom ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom ion-activated" shape="round">Round</ion-button>
|
||||
<ion-button class="custom ion-activated" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom ion-activated" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom ion-activated" color="secondary">Default</ion-button>
|
||||
<ion-button class="custom ion-activated" color="tertiary"
|
||||
><ion-icon slot="icon-only" name="star"></ion-icon
|
||||
></ion-button>
|
||||
<ion-button class="custom ion-activated" color="danger" shape="round" fill="outline">Round</ion-button>
|
||||
<ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<div class="custom-variables">
|
||||
<ion-button>Button</ion-button>
|
||||
<ion-button fill="clear">Button</ion-button>
|
||||
<ion-button fill="outline">Button</ion-button>
|
||||
|
||||
<br />
|
||||
|
||||
<ion-button class="ion-focused">Button</ion-button>
|
||||
<ion-button class="ion-focused" fill="clear">Button</ion-button>
|
||||
<ion-button class="ion-focused" fill="outline">Button</ion-button>
|
||||
|
||||
<br />
|
||||
|
||||
<ion-button color="tertiary">Button</ion-button>
|
||||
<ion-button color="tertiary" fill="clear">Button</ion-button>
|
||||
<ion-button color="tertiary" fill="outline">Button</ion-button>
|
||||
|
||||
<br />
|
||||
|
||||
<ion-button color="tertiary" class="ion-focused">Button</ion-button>
|
||||
<ion-button color="tertiary" class="ion-focused" fill="clear">Button</ion-button>
|
||||
<ion-button color="tertiary" class="ion-focused" fill="outline">Button</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
--background-hover: red;
|
||||
--background-hover-opacity: 1;
|
||||
|
||||
--background-focused: green;
|
||||
--background-activated: blue;
|
||||
}
|
||||
|
||||
.custom:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* TODO should this inherit or users set all */
|
||||
.custom {
|
||||
--color: red;
|
||||
}
|
||||
|
||||
.custom-variables ion-button {
|
||||
--color: black;
|
||||
|
||||
--background: pink;
|
||||
--background-focused: red;
|
||||
--background-hover: green;
|
||||
|
||||
--background-focused-opacity: 0.5;
|
||||
--background-hover-opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
12
core/src/components/button/test/strong/button.e2e.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('button: strong', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/button/test/strong`);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`button-strong-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: strong', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/strong?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: toolbar', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/toolbar?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -1,265 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Button - Toolbar</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Button - Toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-toolbar class="ion-no-padding">
|
||||
<ion-title>This should have no padding</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="primary">
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button class="closeButton" fill="clear"> Close </ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="dark">
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button class="closeButton" fill="solid"> Close </ion-button>
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" color="secondary">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" class="ion-activated">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">
|
||||
<ion-icon name="person-circle" slot="start"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" shape="round" color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle" slot="end"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="solid" class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="ion-activated">
|
||||
<ion-icon name="person-circle" slot="start"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid Activated</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" shape="round" color="secondary" class="ion-activated">
|
||||
Help
|
||||
<ion-icon name="help-circle" slot="end"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline">
|
||||
<ion-icon name="star" slot="start"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline" class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated">
|
||||
<ion-icon name="star" slot="start"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline" class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon name="person-circle" slot="start"></ion-icon>
|
||||
Clear
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button href="#">
|
||||
Edit
|
||||
<ion-icon name="create" slot="end"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Icon/Color Attr</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button> Go Back </ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button href="#"> Edit </ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Text Only</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Left side menu toggle</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Right side menu toggle</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-segment color="secondary">
|
||||
<ion-segment-button value="something"> Something </ion-segment-button>
|
||||
<ion-segment-button value="else"> Else </ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment>
|
||||
<ion-segment-button value="light"> Light </ion-segment-button>
|
||||
<ion-segment-button value="toolbar"> Toolbar </ion-segment-button>
|
||||
<ion-segment-button value="default"> Default Segment </ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||