Skip to content
Permalink
Browse files

fix(item-option): add styling for slots other than icon-only (#17711)

styles the item option properly when icons are slotted. This was not working before at all for `top` and `bottom` slots.

- removes the e2e test from item/sliding in favor of all of them being under item-sliding
- adds more usage examples for all frameworks
- updates the styling for an anchor option so that it displays properly
- updates the standalone e2e test to take screenshots of the start icon, top icon, and anchor options
- updates the interactive e2e test to work locally
- cleaned up the CSS for start/end icons
- verified the styles for ben approval πŸ’ͺ

closes #17737 fixes #17402
  • Loading branch information...
brandyscarney committed Mar 15, 2019
1 parent 29dbd07 commit 14f758ca97069119ee4a063a9a23541818b6d75d
@@ -19,28 +19,28 @@ export async function testActionSheet(
url: pageUrl
});

const screenShotCompares = [];
const screenshotCompares = [];

const presentBtn = await page.find(selector);
await presentBtn.click();

let actionSheet = await page.find('ion-action-sheet');
await actionSheet.waitForVisible();

screenShotCompares.push(await page.compareScreenshot(screenshotName));
screenshotCompares.push(await page.compareScreenshot(screenshotName));

await afterScreenshotHook(page, screenshotName, screenShotCompares, actionSheet);
await afterScreenshotHook(page, screenshotName, screenshotCompares, actionSheet);

await actionSheet.callMethod('dismiss');
await actionSheet.waitForNotVisible();

screenShotCompares.push(await page.compareScreenshot(`dismissed ${screenshotName}`));
screenshotCompares.push(await page.compareScreenshot(`dismissed ${screenshotName}`));

actionSheet = await page.find('ion-action-sheet');
expect(actionSheet).toBe(null);

for (const screenShotCompare of screenShotCompares) {
expect(screenShotCompare).toMatchScreenshot();
for (const screenshotCompare of screenshotCompares) {
expect(screenshotCompare).toMatchScreenshot();
}

} catch (err) {
@@ -51,15 +51,15 @@ export async function testActionSheet(
export async function testActionSheetBackdrop(
page: any,
screenshotName: string,
screenShotCompares: any,
screenshotCompares: any,
actionSheet: any
) {
try {
console.log('backdrop hook');
const backdrop = await page.find('ion-backdrop');
await backdrop.click();

screenShotCompares.push(await page.compareScreenshot(`dismissed backdrop ${screenshotName}`));
screenshotCompares.push(await page.compareScreenshot(`dismissed backdrop ${screenshotName}`));

const isVisible = await actionSheet.isVisible();
expect(isVisible).toBe(true);
@@ -71,7 +71,7 @@ export async function testActionSheetBackdrop(
export async function testActionSheetAlert(
page: any,
screenshotName: string,
screenShotCompares: any
screenshotCompares: any
) {
try {
const openAlertBtn = await page.find({ text: 'Open Alert' });
@@ -81,7 +81,7 @@ export async function testActionSheetAlert(
await alert.waitForVisible();
await page.waitFor(250);

screenShotCompares.push(await page.compareScreenshot(`alert open ${screenshotName}`));
screenshotCompares.push(await page.compareScreenshot(`alert open ${screenshotName}`));

const alertOkayBtn = await page.find({ contains: 'Okay' });
await alertOkayBtn.click();
@@ -18,7 +18,7 @@ export async function testAlert(
url: pageUrl
});

const screenShotCompares = [];
const screenshotCompares = [];

await page.click(selector);
await page.waitForSelector(selector);
@@ -28,18 +28,18 @@ export async function testAlert(
expect(alert).not.toBe(null);
await alert.waitForVisible();

screenShotCompares.push(await page.compareScreenshot(screenshotName));
screenshotCompares.push(await page.compareScreenshot(screenshotName));

await alert.callMethod('dismiss');
await alert.waitForNotVisible();

screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));
screenshotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));

alert = await page.find('ion-alert');
expect(alert).toBe(null);

for (const screenShotCompare of screenShotCompares) {
expect(screenShotCompare).toMatchScreenshot();
for (const screenshotCompare of screenshotCompares) {
expect(screenshotCompare).toMatchScreenshot();
}

} catch (err) {
@@ -35,8 +35,8 @@ export async function testFab(

screenshotCompares.push(await page.compareScreenshot(`${screenshotName} close`));

for (const screenShotCompare of screenshotCompares) {
expect(screenShotCompare).toMatchScreenshot();
for (const screenshotCompare of screenshotCompares) {
expect(screenshotCompare).toMatchScreenshot();
}
} catch (err) {
throw err;
@@ -69,8 +69,8 @@ export async function testDisabledFab(

screenshotCompares.push(await page.compareScreenshot(`disabled ${screenshotName} attempt open`));

for (const screenShotCompare of screenshotCompares) {
expect(screenShotCompare).toMatchScreenshot();
for (const screenshotCompare of screenshotCompares) {
expect(screenshotCompare).toMatchScreenshot();
}
} catch (err) {
throw err;
@@ -38,6 +38,8 @@
@include text-inherit();
@include padding(0, .7em);

display: inline-block;

position: relative;

width: 100%;
@@ -51,13 +53,14 @@

cursor: pointer;
appearance: none;

box-sizing: border-box;
}

.button-inner {
display: flex;

flex-direction: column;
flex-flow: row nowrap;
flex-flow: column nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
@@ -66,6 +69,29 @@
height: 100%;
}

.horizontal-wrapper {
display: flex;

flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;

width: 100%;
}

::slotted(*) {
flex-shrink: 0;
}

::slotted([slot="start"]) {
@include margin(0, 5px, 0, 0);
}

::slotted([slot="end"]) {
@include margin(0, 0, 0, 5px);
}

::slotted([slot="icon-only"]) {
@include padding(0);
@include margin(0, 10px);
@@ -80,12 +80,14 @@ export class ItemOption implements ComponentInterface {
href={this.href}
>
<span class="button-inner">
<slot name="start"></slot>
<slot name="top" />
<slot name="icon-only" />
<slot></slot>
<slot name="bottom" />
<slot name="end"></slot>
<slot name="top"></slot>
<div class="horizontal-wrapper">
<slot name="start"></slot>
<slot name="icon-only"></slot>
<slot></slot>
<slot name="end"></slot>
</div>
<slot name="bottom"></slot>
</span>
{this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</TagType>
@@ -319,10 +319,10 @@ export class ItemSliding implements ComponentInterface {

function swipeShouldReset(isResetDirection: boolean, isMovingFast: boolean, isOnResetZone: boolean): boolean {
// The logic required to know when the sliding item should close (openAmount=0)
// depends on three booleans (isCloseDirection, isMovingFast, isOnCloseZone)
// depends on three booleans (isResetDirection, isMovingFast, isOnResetZone)
// and it ended up being too complicated to be written manually without errors
// so the truth table is attached below: (0=false, 1=true)
// isCloseDirection | isMovingFast | isOnCloseZone || shouldClose
// isResetDirection | isMovingFast | isOnResetZone || shouldClose
// 0 | 0 | 0 || 0
// 0 | 0 | 1 || 1
// 0 | 1 | 0 || 0

0 comments on commit 14f758c

Please sign in to comment.
You can’t perform that action at this time.