Compare commits
16 Commits
FW-5964
...
liamdebeas
| Author | SHA1 | Date | |
|---|---|---|---|
|
01ace15b2d | ||
|
|
7ce115993a | ||
|
|
77c67f2362 | ||
|
|
a8c06c118e | ||
|
|
19f7be8877 | ||
|
|
1c4b6bd8f2 | ||
|
|
17f5be1edd | ||
|
|
efdaf38520 | ||
|
|
b11c630410 | ||
|
|
5234224700 | ||
|
|
6d6fd4af1b | ||
|
|
7cfee535ac | ||
|
|
167e311474 | ||
|
|
7eae6ec591 | ||
|
|
6c500fd6b2 | ||
|
|
6e477b743e |
@@ -29,4 +29,4 @@ runs:
|
||||
with:
|
||||
name: ionic-core
|
||||
output: core/CoreBuild.zip
|
||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
|
||||
paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
|
||||
|
||||
@@ -31,4 +31,4 @@ runs:
|
||||
with:
|
||||
name: ionic-core
|
||||
output: core/CoreBuild.zip
|
||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
|
||||
paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
|
||||
|
||||
@@ -30,6 +30,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
||||
- [Progress bar](#version-8x-progress-bar)
|
||||
- [Radio](#version-8x-radio)
|
||||
- [Range](#version-8x-range)
|
||||
- [Searchbar](#version-8x-searchbar)
|
||||
- [Select](#version-8x-select)
|
||||
- [Textarea](#version-8x-textarea)
|
||||
- [Toggle](#version-8x-toggle)
|
||||
@@ -264,6 +265,10 @@ For more information on styling toast buttons, refer to the [Toast Theming docum
|
||||
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
|
||||
|
||||
<h4 id="version-8x-searchbar">Searchbar</h4>
|
||||
|
||||
- The `autocapitalize` property now defaults to `'off'`.
|
||||
|
||||
<h4 id="version-8x-select">Select</h4>
|
||||
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</h1>
|
||||
|
||||
<p align="center">
|
||||
Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web.
|
||||
Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web. test 123
|
||||
</p>
|
||||
<p align="center">
|
||||
Ionic is based on <a href="https://www.webcomponents.org/introduction">Web Components</a>, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like <a href="https://angular.io/">Angular</a>, <a href="https://reactjs.com/">React</a>, and <a href="https://vuejs.org/">Vue</a>.
|
||||
|
||||
@@ -23,10 +23,10 @@ rules:
|
||||
at-rule-empty-line-before:
|
||||
- always
|
||||
- except:
|
||||
- blockless-after-blockless
|
||||
- first-nested
|
||||
- blockless-after-blockless
|
||||
- first-nested
|
||||
ignore:
|
||||
- after-comment
|
||||
- after-comment
|
||||
|
||||
block-closing-brace-newline-before:
|
||||
- always
|
||||
@@ -40,14 +40,13 @@ rules:
|
||||
custom-property-empty-line-before:
|
||||
- always
|
||||
- except:
|
||||
- after-comment
|
||||
- after-custom-property
|
||||
- first-nested
|
||||
- after-comment
|
||||
- after-custom-property
|
||||
- first-nested
|
||||
|
||||
declaration-no-important:
|
||||
- true
|
||||
|
||||
|
||||
order/order:
|
||||
- custom-properties
|
||||
- dollar-variables
|
||||
@@ -57,216 +56,212 @@ rules:
|
||||
|
||||
# https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
|
||||
order/properties-order:
|
||||
|
||||
# Box
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- display
|
||||
- position
|
||||
- top
|
||||
- right
|
||||
- bottom
|
||||
- left
|
||||
- display
|
||||
- position
|
||||
- top
|
||||
- right
|
||||
- bottom
|
||||
- left
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- flex
|
||||
- flex-basis
|
||||
- flex-direction
|
||||
- flex-flow
|
||||
- flex-grow
|
||||
- flex-shrink
|
||||
- flex-wrap
|
||||
- align-content
|
||||
- align-items
|
||||
- align-self
|
||||
- justify-content
|
||||
- order
|
||||
- flex
|
||||
- flex-basis
|
||||
- flex-direction
|
||||
- flex-flow
|
||||
- flex-grow
|
||||
- flex-shrink
|
||||
- flex-wrap
|
||||
- align-content
|
||||
- align-items
|
||||
- align-self
|
||||
- justify-content
|
||||
- order
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- width
|
||||
- min-width
|
||||
- max-width
|
||||
- width
|
||||
- min-width
|
||||
- max-width
|
||||
|
||||
- height
|
||||
- min-height
|
||||
- max-height
|
||||
- height
|
||||
- min-height
|
||||
- max-height
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- margin
|
||||
- margin-top
|
||||
- margin-right
|
||||
- margin-bottom
|
||||
- margin-left
|
||||
- margin
|
||||
- margin-top
|
||||
- margin-right
|
||||
- margin-bottom
|
||||
- margin-left
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- padding
|
||||
- padding-top
|
||||
- padding-right
|
||||
- padding-bottom
|
||||
- padding-left
|
||||
- padding
|
||||
- padding-top
|
||||
- padding-right
|
||||
- padding-bottom
|
||||
- padding-left
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- float
|
||||
- clear
|
||||
- float
|
||||
- clear
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- columns
|
||||
- column-gap
|
||||
- column-fill
|
||||
- column-rule
|
||||
- column-span
|
||||
- column-count
|
||||
- column-width
|
||||
- columns
|
||||
- column-gap
|
||||
- column-fill
|
||||
- column-rule
|
||||
- column-span
|
||||
- column-count
|
||||
- column-width
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- transform
|
||||
- transform-box
|
||||
- transform-origin
|
||||
- transform-style
|
||||
- transform
|
||||
- transform-box
|
||||
- transform-origin
|
||||
- transform-style
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- transition
|
||||
- transition-delay
|
||||
- transition-duration
|
||||
- transition-property
|
||||
- transition-timing-function
|
||||
- transition
|
||||
- transition-delay
|
||||
- transition-duration
|
||||
- transition-property
|
||||
- transition-timing-function
|
||||
|
||||
# Border
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- border
|
||||
- border-top
|
||||
- border-right
|
||||
- border-bottom
|
||||
- border-left
|
||||
- border-width
|
||||
- border-top-width
|
||||
- border-right-width
|
||||
- border-bottom-width
|
||||
- border-left-width
|
||||
- border
|
||||
- border-top
|
||||
- border-right
|
||||
- border-bottom
|
||||
- border-left
|
||||
- border-width
|
||||
- border-top-width
|
||||
- border-right-width
|
||||
- border-bottom-width
|
||||
- border-left-width
|
||||
|
||||
- border-style
|
||||
- border-top-style
|
||||
- border-right-style
|
||||
- border-bottom-style
|
||||
- border-left-style
|
||||
- border-style
|
||||
- border-top-style
|
||||
- border-right-style
|
||||
- border-bottom-style
|
||||
- border-left-style
|
||||
|
||||
- border-radius
|
||||
- border-top-left-radius
|
||||
- border-top-right-radius
|
||||
- border-bottom-left-radius
|
||||
- border-bottom-right-radius
|
||||
- border-radius
|
||||
- border-top-left-radius
|
||||
- border-top-right-radius
|
||||
- border-bottom-left-radius
|
||||
- border-bottom-right-radius
|
||||
|
||||
- border-color
|
||||
- border-top-color
|
||||
- border-right-color
|
||||
- border-bottom-color
|
||||
- border-left-color
|
||||
- border-color
|
||||
- border-top-color
|
||||
- border-right-color
|
||||
- border-bottom-color
|
||||
- border-left-color
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- outline
|
||||
- outline-color
|
||||
- outline-offset
|
||||
- outline-style
|
||||
- outline-width
|
||||
- outline
|
||||
- outline-color
|
||||
- outline-offset
|
||||
- outline-style
|
||||
- outline-width
|
||||
|
||||
# Background
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- background
|
||||
- background-attachment
|
||||
- background-clip
|
||||
- background-color
|
||||
- background-image
|
||||
- background-repeat
|
||||
- background-position
|
||||
- background-size
|
||||
- background
|
||||
- background-attachment
|
||||
- background-clip
|
||||
- background-color
|
||||
- background-image
|
||||
- background-repeat
|
||||
- background-position
|
||||
- background-size
|
||||
|
||||
# Text
|
||||
# Text
|
||||
|
||||
- color
|
||||
- color
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- font
|
||||
- font-family
|
||||
- font-size
|
||||
- font-smoothing
|
||||
- font-style
|
||||
- font-variant
|
||||
- font-weight
|
||||
- font
|
||||
- font-family
|
||||
- font-size
|
||||
- font-smoothing
|
||||
- font-style
|
||||
- font-variant
|
||||
- font-weight
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- letter-spacing
|
||||
- line-height
|
||||
- list-style
|
||||
- letter-spacing
|
||||
- line-height
|
||||
- list-style
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- text-align
|
||||
- text-decoration
|
||||
- text-indent
|
||||
- text-overflow
|
||||
- text-rendering
|
||||
- text-shadow
|
||||
- text-transform
|
||||
- text-wrap
|
||||
- text-align
|
||||
- text-decoration
|
||||
- text-indent
|
||||
- text-overflow
|
||||
- text-rendering
|
||||
- text-shadow
|
||||
- text-transform
|
||||
- text-wrap
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- white-space
|
||||
- word-spacing
|
||||
- white-space
|
||||
- word-spacing
|
||||
|
||||
# Other
|
||||
|
||||
- emptyLineBefore: always
|
||||
properties:
|
||||
- border-collapse
|
||||
- border-spacing
|
||||
- box-shadow
|
||||
- caption-side
|
||||
- contain
|
||||
- content
|
||||
- cursor
|
||||
- direction
|
||||
- empty-cells
|
||||
- object-fit
|
||||
- opacity
|
||||
- overflow
|
||||
- quotes
|
||||
- speak
|
||||
- table-layout
|
||||
- touch-action
|
||||
- user-select
|
||||
- vertical-align
|
||||
- visibility
|
||||
- z-index
|
||||
- border-collapse
|
||||
- border-spacing
|
||||
- box-shadow
|
||||
- caption-side
|
||||
- contain
|
||||
- content
|
||||
- cursor
|
||||
- direction
|
||||
- empty-cells
|
||||
- object-fit
|
||||
- opacity
|
||||
- overflow
|
||||
- quotes
|
||||
- speak
|
||||
- table-layout
|
||||
- touch-action
|
||||
- user-select
|
||||
- vertical-align
|
||||
- visibility
|
||||
- z-index
|
||||
|
||||
property-disallowed-list:
|
||||
- background-position
|
||||
- right
|
||||
- left
|
||||
- float
|
||||
- padding
|
||||
- padding-left
|
||||
- padding-right
|
||||
- margin
|
||||
- margin-left
|
||||
- margin-right
|
||||
- border-radius
|
||||
- border-top-left-radius
|
||||
- border-top-right-radius
|
||||
- border-bottom-right-radius
|
||||
|
||||
13
core/api.txt
@@ -265,7 +265,6 @@ ion-button,css-prop,--padding-start
|
||||
ion-button,css-prop,--padding-top
|
||||
ion-button,css-prop,--ripple-color
|
||||
ion-button,css-prop,--transition
|
||||
ion-button,part,focus-ring
|
||||
ion-button,part,native
|
||||
|
||||
ion-buttons,scoped
|
||||
@@ -604,7 +603,7 @@ ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
|
||||
ion-input,prop,counter,boolean,false,false,false
|
||||
ion-input,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
|
||||
ion-input,prop,debounce,number | undefined,undefined,false,false
|
||||
ion-input,prop,disabled,boolean,false,false,false
|
||||
ion-input,prop,disabled,boolean,false,false,true
|
||||
ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
|
||||
ion-input,prop,errorText,string | undefined,undefined,false,false
|
||||
ion-input,prop,fill,"outline" | "solid" | undefined,undefined,false,false
|
||||
@@ -621,7 +620,7 @@ ion-input,prop,multiple,boolean | undefined,undefined,false,false
|
||||
ion-input,prop,name,string,this.inputId,false,false
|
||||
ion-input,prop,pattern,string | undefined,undefined,false,false
|
||||
ion-input,prop,placeholder,string | undefined,undefined,false,false
|
||||
ion-input,prop,readonly,boolean,false,false,false
|
||||
ion-input,prop,readonly,boolean,false,false,true
|
||||
ion-input,prop,required,boolean,false,false,false
|
||||
ion-input,prop,shape,"round" | undefined,undefined,false,false
|
||||
ion-input,prop,spellcheck,boolean,false,false,false
|
||||
@@ -654,6 +653,12 @@ ion-input,css-prop,--placeholder-font-style
|
||||
ion-input,css-prop,--placeholder-font-weight
|
||||
ion-input,css-prop,--placeholder-opacity
|
||||
|
||||
ion-input-password-toggle,shadow
|
||||
ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-input-password-toggle,prop,hideIcon,string | undefined,undefined,false,false
|
||||
ion-input-password-toggle,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-input-password-toggle,prop,showIcon,string | undefined,undefined,false,false
|
||||
|
||||
ion-item,shadow
|
||||
ion-item,prop,button,boolean,false,false,false
|
||||
ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
@@ -1266,7 +1271,7 @@ ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
|
||||
|
||||
ion-searchbar,scoped
|
||||
ion-searchbar,prop,animated,boolean,false,false,false
|
||||
ion-searchbar,prop,autocapitalize,string,undefined,true,false
|
||||
ion-searchbar,prop,autocapitalize,string,'off',false,false
|
||||
ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
|
||||
ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
|
||||
ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
|
||||
|
||||
1698
core/package-lock.json
generated
@@ -65,16 +65,18 @@
|
||||
"jest-cli": "^29.7.0",
|
||||
"prettier": "^2.6.1",
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.72.0",
|
||||
"sass": "^1.33.0",
|
||||
"serve": "^14.0.1",
|
||||
"style-dictionary": "^3.9.2",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-order": "^4.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
|
||||
"build": "npm run clean && npm run build.tokens && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
|
||||
"build.css": "npm run css.sass && npm run css.minify",
|
||||
"build.debug": "npm run clean && stencil build --debug",
|
||||
"build.docs.json": "stencil build --docs-json dist/docs.json",
|
||||
"build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix",
|
||||
"clean": "node scripts/clean.js",
|
||||
"css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
|
||||
"css.sass": "sass --embed-sources src/css:./css",
|
||||
|
||||
174
core/scripts/tokens.js
Normal file
@@ -0,0 +1,174 @@
|
||||
/* For generating Design Tokens, we use Style Dictionary for several reasons:
|
||||
- It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
|
||||
- It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
|
||||
- It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
|
||||
- It can easily scale to different necessities we might have in the future.
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const StyleDictionary = require('style-dictionary');
|
||||
|
||||
const { fileHeader } = StyleDictionary.formatHelpers;
|
||||
|
||||
// Empty for as an example of how we can add some extra variables, not from the tokens JSON
|
||||
const customVariables = ``;
|
||||
|
||||
// Prefix for all generated variables
|
||||
const variablesPrefix = 'ionic';
|
||||
|
||||
// CSS vanilla :root format
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'rootFormat',
|
||||
formatter({ dictionary, file }) {
|
||||
// Add a prefix to all variable names
|
||||
const prefixedVariables = dictionary.allProperties.map((prop) => {
|
||||
return ` --${variablesPrefix}-${prop.name}: ${prop.value};`;
|
||||
});
|
||||
|
||||
return (
|
||||
fileHeader({ file }) +
|
||||
':root {\n' +
|
||||
prefixedVariables.join('\n') + // Join all prefixed variables with a newline
|
||||
customVariables +
|
||||
'\n}\n'
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// scss variables format
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'scssVariablesFormat',
|
||||
formatter({ dictionary, file }) {
|
||||
// Add a prefix to all variable names
|
||||
const prefixedVariables = dictionary.allProperties.map((prop) => {
|
||||
return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});`;
|
||||
});
|
||||
|
||||
return (
|
||||
fileHeader({ file }) +
|
||||
prefixedVariables.join('\n') + // Join all prefixed variables with a newline
|
||||
customVariables +
|
||||
'\n'
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// Create utility-classes
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'cssUtilityClassesFormat',
|
||||
formatter({ dictionary, file }) {
|
||||
const utilityClasses = dictionary.allProperties.map((prop) => {
|
||||
let tokenType = prop.attributes.category;
|
||||
const className = `${prop.name}`;
|
||||
let utilityClass = '';
|
||||
|
||||
switch (tokenType) {
|
||||
case 'color':
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n color: $ionic-${prop.name};\n}
|
||||
.${variablesPrefix}-background-${className} {\n background-color: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
case 'border':
|
||||
const borderAttribute = prop.attributes.type === 'radius' ? 'border-radius' : 'border-width';
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n ${borderAttribute}: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
case 'font':
|
||||
let fontAttribute;
|
||||
switch (prop.attributes.type) {
|
||||
case 'size':
|
||||
fontAttribute = 'font-size';
|
||||
break;
|
||||
case 'weight':
|
||||
fontAttribute = 'font-weight';
|
||||
break;
|
||||
case 'line-height':
|
||||
fontAttribute = 'line-height';
|
||||
break;
|
||||
case 'letter-spacing':
|
||||
fontAttribute = 'letter-spacing';
|
||||
break;
|
||||
case 'family':
|
||||
return;
|
||||
}
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n ${fontAttribute}: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
case 'elevation':
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n box-shadow: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
case 'space':
|
||||
utilityClass = `.${variablesPrefix}-margin-${className} {\n margin: $ionic-${prop.name};\n};
|
||||
.${variablesPrefix}-padding-${className} {\n padding: $ionic-${prop.name};\n}`;
|
||||
break;
|
||||
default:
|
||||
utilityClass = `.${variablesPrefix}-${className} {\n ${tokenType}: $ionic-${prop.name};\n}`;
|
||||
}
|
||||
|
||||
return utilityClass;
|
||||
});
|
||||
|
||||
return [fileHeader({ file }), '@import "./ionic.vars";\n', utilityClasses.join('\n')].join('\n');
|
||||
},
|
||||
});
|
||||
|
||||
// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
|
||||
const w3cTokenJsonParser = {
|
||||
pattern: /\.json|\.tokens\.json|\.tokens$/,
|
||||
parse(_a) {
|
||||
var contents = _a.contents;
|
||||
// replace $value with value so that style dictionary recognizes it
|
||||
var preparedContent = (contents || '{}')
|
||||
.replace(/"\$?value":/g, '"value":')
|
||||
// convert $description to comment
|
||||
.replace(/"\$?description":/g, '"comment":');
|
||||
//
|
||||
return JSON.parse(preparedContent);
|
||||
},
|
||||
};
|
||||
|
||||
StyleDictionary.registerParser(w3cTokenJsonParser);
|
||||
|
||||
// Generate Tokens
|
||||
StyleDictionary.extend({
|
||||
source: ['./src/foundations/*.json'],
|
||||
platforms: {
|
||||
css: {
|
||||
buildPath: './src/foundations/',
|
||||
transformGroup: 'css',
|
||||
files: [
|
||||
{
|
||||
destination: 'ionic.root.scss',
|
||||
format: 'rootFormat',
|
||||
options: {
|
||||
outputReferences: true,
|
||||
fileHeader: `myFileHeader`,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
scss: {
|
||||
buildPath: './src/foundations/',
|
||||
transformGroup: 'scss',
|
||||
files: [
|
||||
{
|
||||
destination: 'ionic.vars.scss',
|
||||
format: 'scssVariablesFormat',
|
||||
options: {
|
||||
outputReferences: true,
|
||||
fileHeader: `myFileHeader`,
|
||||
},
|
||||
},
|
||||
{
|
||||
destination: 'ionic.utility.scss',
|
||||
format: 'cssUtilityClassesFormat',
|
||||
options: {
|
||||
outputReferences: true,
|
||||
fileHeader: `myFileHeader`,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
fileHeader: {
|
||||
myFileHeader: () => {
|
||||
return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
|
||||
},
|
||||
},
|
||||
}).buildAllPlatforms();
|
||||
49
core/src/components.d.ts
vendored
@@ -1471,6 +1471,25 @@ export namespace Components {
|
||||
*/
|
||||
"value"?: string | number | null;
|
||||
}
|
||||
interface IonInputPasswordToggle {
|
||||
/**
|
||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||
*/
|
||||
"color"?: Color;
|
||||
/**
|
||||
* The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
|
||||
*/
|
||||
"hideIcon"?: string;
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
*/
|
||||
"mode"?: "ios" | "md";
|
||||
/**
|
||||
* The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
|
||||
*/
|
||||
"showIcon"?: string;
|
||||
"type": TextFieldTypes;
|
||||
}
|
||||
interface IonItem {
|
||||
/**
|
||||
* If `true`, a button tag will be rendered and the item will be tappable.
|
||||
@@ -4323,6 +4342,12 @@ declare global {
|
||||
prototype: HTMLIonInputElement;
|
||||
new (): HTMLIonInputElement;
|
||||
};
|
||||
interface HTMLIonInputPasswordToggleElement extends Components.IonInputPasswordToggle, HTMLStencilElement {
|
||||
}
|
||||
var HTMLIonInputPasswordToggleElement: {
|
||||
prototype: HTMLIonInputPasswordToggleElement;
|
||||
new (): HTMLIonInputPasswordToggleElement;
|
||||
};
|
||||
interface HTMLIonItemElement extends Components.IonItem, HTMLStencilElement {
|
||||
}
|
||||
var HTMLIonItemElement: {
|
||||
@@ -5147,6 +5172,7 @@ declare global {
|
||||
"ion-infinite-scroll": HTMLIonInfiniteScrollElement;
|
||||
"ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement;
|
||||
"ion-input": HTMLIonInputElement;
|
||||
"ion-input-password-toggle": HTMLIonInputPasswordToggleElement;
|
||||
"ion-item": HTMLIonItemElement;
|
||||
"ion-item-divider": HTMLIonItemDividerElement;
|
||||
"ion-item-group": HTMLIonItemGroupElement;
|
||||
@@ -6689,6 +6715,25 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"value"?: string | number | null;
|
||||
}
|
||||
interface IonInputPasswordToggle {
|
||||
/**
|
||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||
*/
|
||||
"color"?: Color;
|
||||
/**
|
||||
* The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
|
||||
*/
|
||||
"hideIcon"?: string;
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
*/
|
||||
"mode"?: "ios" | "md";
|
||||
/**
|
||||
* The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
|
||||
*/
|
||||
"showIcon"?: string;
|
||||
"type"?: TextFieldTypes;
|
||||
}
|
||||
interface IonItem {
|
||||
/**
|
||||
* If `true`, a button tag will be rendered and the item will be tappable.
|
||||
@@ -8121,7 +8166,7 @@ declare namespace LocalJSX {
|
||||
/**
|
||||
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
||||
*/
|
||||
"autocapitalize": string;
|
||||
"autocapitalize"?: string;
|
||||
/**
|
||||
* Set the input's autocomplete property.
|
||||
*/
|
||||
@@ -9064,6 +9109,7 @@ declare namespace LocalJSX {
|
||||
"ion-infinite-scroll": IonInfiniteScroll;
|
||||
"ion-infinite-scroll-content": IonInfiniteScrollContent;
|
||||
"ion-input": IonInput;
|
||||
"ion-input-password-toggle": IonInputPasswordToggle;
|
||||
"ion-item": IonItem;
|
||||
"ion-item-divider": IonItemDivider;
|
||||
"ion-item-group": IonItemGroup;
|
||||
@@ -9162,6 +9208,7 @@ declare module "@stencil/core" {
|
||||
"ion-infinite-scroll": LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
|
||||
"ion-infinite-scroll-content": LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
|
||||
"ion-input": LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
|
||||
"ion-input-password-toggle": LocalJSX.IonInputPasswordToggle & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
|
||||
"ion-item": LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
|
||||
"ion-item-divider": LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;
|
||||
"ion-item-group": LocalJSX.IonItemGroup & JSXBase.HTMLAttributes<HTMLIonItemGroupElement>;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
@import "../accordion/accordion.vars";
|
||||
|
||||
// Accordion Group
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Accordion
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Accordion
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@use "sass:math";
|
||||
@import "../../themes/globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "../item/item.ios.vars";
|
||||
|
||||
// iOS Alert
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "../item/item.md.vars";
|
||||
|
||||
// Material Design Alert
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Alert
|
||||
// --------------------------------------------------
|
||||
|
||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
|
||||
// iOS Avatar
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
|
||||
// Material Design Avatar
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Avatar
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Back Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Back Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Back Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1 +1 @@
|
||||
@import "../../themes/globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
@@ -1 +1 @@
|
||||
@import "../../themes/globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
@@ -1 +1 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Breadcrumb
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Breadcrumb
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Breadcrumb
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Breadcrumbs
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -142,6 +142,7 @@
|
||||
|
||||
// Button Shape Rectangular
|
||||
// -------------------------------------------------------------------------------
|
||||
|
||||
:host(.button-rectangular) {
|
||||
--border-radius: #{$button-ionic-rectangular-border};
|
||||
}
|
||||
@@ -156,26 +157,9 @@
|
||||
// -------------------------------------------------------------------------------
|
||||
|
||||
// Only show the focus ring when the button is focused
|
||||
:host(.ion-focused) {
|
||||
--overflow: visible;
|
||||
|
||||
.button-native::after {
|
||||
@include border-radius(inherit);
|
||||
}
|
||||
}
|
||||
|
||||
.button-focus-ring {
|
||||
@include position(-4px, -4px, -4px, -4px);
|
||||
@include border-radius(inherit);
|
||||
|
||||
position: absolute;
|
||||
|
||||
transition: border-color 0.3s;
|
||||
|
||||
border: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
:host(.ion-focused) .button-native {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Fill Solid Button
|
||||
@@ -185,6 +169,11 @@
|
||||
--background-activated: #{ion-color(primary, shade)};
|
||||
}
|
||||
|
||||
:host(.button-solid.ion-color.ion-activated) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
|
||||
// Fill Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// Ionic Button
|
||||
// -------------------------------------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.ios";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals.md";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -20,7 +20,6 @@ import type { RouterDirection } from '../router/utils/interface';
|
||||
* @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
|
||||
*
|
||||
* @part native - The native HTML button or anchor element that wraps all child elements.
|
||||
* @part focus-ring - The visual indicator that appears as an outline around the button when focused. Only available for the Ionic theme.
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-button',
|
||||
@@ -418,7 +417,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
<slot name="end"></slot>
|
||||
</span>
|
||||
{theme === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
|
||||
{theme === 'ionic' && <div part="focus-ring" class="button-focus-ring"></div>}
|
||||
</TagType>
|
||||
</Host>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/globals";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
|
||||
/**
|
||||
* Fill="clear" does not render differently based on the direction.
|
||||
*/
|
||||
configs({ directions: ['ltr'], themes: ['ios', 'md', 'ionic'] }).forEach(({ title, config, screenshot }) => {
|
||||
configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config, screenshot }) => {
|
||||
test.describe(title('button: fill: clear'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/button/test/clear`, config);
|
||||
|
||||
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 78 KiB |
@@ -74,7 +74,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
/**
|
||||
* Shape="rectangular" is only available in the Ionic theme.
|
||||
*/
|
||||
configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
|
||||
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('button: shape'), () => {
|
||||
test.describe('rectangular', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
|
||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
@@ -1,8 +1,7 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
// TODO: FW-6077 - Limit this test to just the Ionic theme on MD mode.
|
||||
configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
|
||||
configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('button: size'), () => {
|
||||
test('should render small buttons', async ({ page }) => {
|
||||
await page.setContent(
|
||||
@@ -65,7 +64,7 @@ configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ titl
|
||||
/**
|
||||
* The following tests are specific to the Ionic theme and do not depend on the text direction.
|
||||
*/
|
||||
configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
|
||||
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('button: size'), () => {
|
||||
test('should render xsmall buttons', async ({ page }) => {
|
||||
await page.setContent(`<ion-button size="xsmall" fill="solid">X-Small Button</ion-button>`, config);
|
||||
|
||||
84
core/src/components/button/test/states/button.e2e.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('button: activated'), () => {
|
||||
test('should render solid button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-solid`));
|
||||
});
|
||||
|
||||
test('should render solid button with color', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button color="tertiary" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-solid-color`));
|
||||
});
|
||||
|
||||
test('should render outline button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button fill="outline" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-outline`));
|
||||
});
|
||||
|
||||
test('should render outline button with color', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button color="tertiary" fill="outline" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-outline-color`));
|
||||
});
|
||||
|
||||
test('should render clear button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button fill="clear" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-clear`));
|
||||
});
|
||||
|
||||
test('should render clear button with color', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-button color="tertiary" fill="clear" class="ion-activated">Button</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-activated-clear-color`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 945 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 909 B |
|
After Width: | Height: | Size: 902 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 919 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 986 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1014 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |