diff --git a/core/src/components/content/test/fullscreen/index.html b/core/src/components/content/test/fullscreen/index.html index 4588f2e2bb..98173e5db3 100644 --- a/core/src/components/content/test/fullscreen/index.html +++ b/core/src/components/content/test/fullscreen/index.html @@ -13,7 +13,7 @@ - + Content - Fullscreen diff --git a/core/src/components/footer/footer.ios.scss b/core/src/components/footer/footer.ios.scss index 1496a7ab03..b42fc1bc99 100644 --- a/core/src/components/footer/footer.ios.scss +++ b/core/src/components/footer/footer.ios.scss @@ -8,10 +8,6 @@ --border-width: #{$hairlines-width} 0 0; } -.footer-ios[no-border] ion-toolbar:first-child { - --border-width: 0; -} - @supports (backdrop-filter: blur(0)) { .footer-translucent-ios { backdrop-filter: $footer-ios-translucent-filter; @@ -21,4 +17,8 @@ --opacity: .8; --backdrop-filter: #{$footer-ios-translucent-filter}; } +} + +.footer-ios.ion-no-border ion-toolbar:first-child { + --border-width: 0; } \ No newline at end of file diff --git a/core/src/components/footer/footer.md.scss b/core/src/components/footer/footer.md.scss index 7cdf467464..0c96b5814c 100644 --- a/core/src/components/footer/footer.md.scss +++ b/core/src/components/footer/footer.md.scss @@ -22,6 +22,6 @@ content: ""; } -.footer-md[no-border]::before { +.footer-md.ion-no-border::before { display: none; -} +} \ No newline at end of file diff --git a/core/src/components/footer/readme.md b/core/src/components/footer/readme.md index e387f41583..2782250f7d 100644 --- a/core/src/components/footer/readme.md +++ b/core/src/components/footer/readme.md @@ -8,11 +8,18 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c ## Usage -### Javascript +### Angular / javascript ```html + + + + Footer - No Border + + + Footer @@ -30,6 +37,13 @@ import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react'; export const FooterExample: React.FC = () => ( <> + + {/*-- Footer without a border --*/} + + + Footer - No Border + + @@ -41,6 +55,28 @@ export const FooterExample: React.FC = () => ( ``` +### Vue + +```html + +``` + + ## Properties diff --git a/core/src/components/footer/test/basic/e2e.ts b/core/src/components/footer/test/basic/e2e.ts new file mode 100644 index 0000000000..6288e279bf --- /dev/null +++ b/core/src/components/footer/test/basic/e2e.ts @@ -0,0 +1,10 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('footer: basic', async () => { + const page = await newE2EPage({ + url: '/src/components/footer/test/basic?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/footer/test/basic/index.html b/core/src/components/footer/test/basic/index.html new file mode 100644 index 0000000000..92e4f40115 --- /dev/null +++ b/core/src/components/footer/test/basic/index.html @@ -0,0 +1,36 @@ + + + + + Footer - Basic + + + + + + + + + + + +
+ + + + Footer - Default + + + +
+ + + + Footer - No Border + + + + + + + diff --git a/core/src/components/footer/usage/angular.md b/core/src/components/footer/usage/angular.md new file mode 100644 index 0000000000..a3bcfe851e --- /dev/null +++ b/core/src/components/footer/usage/angular.md @@ -0,0 +1,16 @@ +```html + + + + + + Footer - No Border + + + + + + Footer + + +``` diff --git a/core/src/components/footer/usage/javascript.md b/core/src/components/footer/usage/javascript.md index a3691b5122..a3bcfe851e 100644 --- a/core/src/components/footer/usage/javascript.md +++ b/core/src/components/footer/usage/javascript.md @@ -1,6 +1,13 @@ ```html + + + + Footer - No Border + + + Footer diff --git a/core/src/components/footer/usage/react.md b/core/src/components/footer/usage/react.md index 218c23bc4d..c4e6fef6f4 100644 --- a/core/src/components/footer/usage/react.md +++ b/core/src/components/footer/usage/react.md @@ -5,6 +5,13 @@ import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react'; export const FooterExample: React.FC = () => ( <> + + {/*-- Footer without a border --*/} + + + Footer - No Border + + diff --git a/core/src/components/footer/usage/vue.md b/core/src/components/footer/usage/vue.md new file mode 100644 index 0000000000..9bb5dcb3ac --- /dev/null +++ b/core/src/components/footer/usage/vue.md @@ -0,0 +1,18 @@ +```html + +``` diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index 4a85dc2311..127d05c813 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -8,10 +8,6 @@ --border-width: 0 0 #{$hairlines-width}; } -.header-ios[no-border] ion-toolbar:last-child { - --border-width: 0; -} - @supports (backdrop-filter: blur(0)) { .header-translucent-ios { backdrop-filter: $header-ios-translucent-filter; @@ -23,6 +19,10 @@ } } +.header-ios.ion-no-border ion-toolbar:last-child { + --border-width: 0; +} + // iOS Header - Collapse // -------------------------------------------------- .header-collapse-condense { diff --git a/core/src/components/header/header.md.scss b/core/src/components/header/header.md.scss index a60e9e80d4..79201c9158 100644 --- a/core/src/components/header/header.md.scss +++ b/core/src/components/header/header.md.scss @@ -22,10 +22,10 @@ content: ""; } -.header-md[no-border]::after { +.header-collapse-condense { display: none; } -.header-collapse-condense { +.header-md.ion-no-border::after { display: none; } \ No newline at end of file diff --git a/core/src/components/header/readme.md b/core/src/components/header/readme.md index 929aca7bf5..716687853f 100644 --- a/core/src/components/header/readme.md +++ b/core/src/components/header/readme.md @@ -26,6 +26,13 @@ It's important to note that ion-header needs to be the one of the three root ele + + + + Header - No Border + + + @@ -57,6 +64,13 @@ export const HeaderExample: React.FC = () => ( + {/*-- Header without a border --*/} + + + Header - No Border + + + @@ -86,6 +100,13 @@ export const HeaderExample: React.FC = () => ( + + + + Header - No Border + + + diff --git a/core/src/components/header/test/basic/e2e.ts b/core/src/components/header/test/basic/e2e.ts new file mode 100644 index 0000000000..d1f3b50ccf --- /dev/null +++ b/core/src/components/header/test/basic/e2e.ts @@ -0,0 +1,10 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('header: basic', async () => { + const page = await newE2EPage({ + url: '/src/components/header/test/basic?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/header/test/basic/index.html b/core/src/components/header/test/basic/index.html new file mode 100644 index 0000000000..7c80920a71 --- /dev/null +++ b/core/src/components/header/test/basic/index.html @@ -0,0 +1,34 @@ + + + + + Header - Basic + + + + + + + + + + + + + + Header - Default + + + +
+ + + + Header - No Border + + + + + + + diff --git a/core/src/components/header/usage/angular.md b/core/src/components/header/usage/angular.md index 272c1af54b..7b43b5d997 100644 --- a/core/src/components/header/usage/angular.md +++ b/core/src/components/header/usage/angular.md @@ -12,6 +12,13 @@ + + + + Header - No Border + + + diff --git a/core/src/components/header/usage/javascript.md b/core/src/components/header/usage/javascript.md index 272c1af54b..7b43b5d997 100644 --- a/core/src/components/header/usage/javascript.md +++ b/core/src/components/header/usage/javascript.md @@ -12,6 +12,13 @@ + + + + Header - No Border + + + diff --git a/core/src/components/header/usage/react.md b/core/src/components/header/usage/react.md index e65f281af0..683f6e9adf 100644 --- a/core/src/components/header/usage/react.md +++ b/core/src/components/header/usage/react.md @@ -17,6 +17,13 @@ export const HeaderExample: React.FC = () => ( + {/*-- Header without a border --*/} + + + Header - No Border + + + diff --git a/core/src/components/header/usage/vue.md b/core/src/components/header/usage/vue.md index 941cb3e7fb..ad1fa4ae06 100644 --- a/core/src/components/header/usage/vue.md +++ b/core/src/components/header/usage/vue.md @@ -13,6 +13,13 @@ + + + + Header - No Border + + + diff --git a/core/src/components/searchbar/test/toolbar/index.html b/core/src/components/searchbar/test/toolbar/index.html index 7521fa3f09..92264cf0de 100644 --- a/core/src/components/searchbar/test/toolbar/index.html +++ b/core/src/components/searchbar/test/toolbar/index.html @@ -14,7 +14,7 @@ - + Undo