javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): add icon-inner & placeholder part (#20605)

Browse Source 
- adds custom test for styling the select parts
- set opacity on icon container
- align items center, this makes the select text align vertically with the icon when used standalone even when changing the font size of the text
This commit is contained in:
Brandy Carney
2020-02-26 12:08:03 -05:00
committed by GitHub
parent 20af652a1b
commit 926ac3fb47
4 changed files with 146 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/select/select.scss
View File

@ -21,6 +21,8 @@
display: flex;
position: relative;
align-items: center;
font-family: $font-family-base;
overflow: hidden;
@ -54,6 +56,8 @@ button {
.select-icon {
position: relative;
opacity: .33;
}
.select-text {
@ -85,7 +89,5 @@ button {
color: currentColor;
opacity: .33;
pointer-events: none;
}

11
core/src/components/select/select.tsx
View File

@ -11,6 +11,11 @@ import { SelectCompareFn } from './select-interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part placeholder - The text displayed in the select when there is no value.
* @part text - The displayed value of the select.
* @part icon - The select icon container.
* @part icon-inner - The select icon.
*/
@Component({
tag: 'ion-select',
@ -426,6 +431,8 @@ export class Select implements ComponentInterface {
'select-placeholder': addPlaceholderClass
};
const textPart = addPlaceholderClass ? 'placeholder' : 'text';
return (
<Host
onClick={this.onClick}
@ -440,11 +447,11 @@ export class Select implements ComponentInterface {
'select-disabled': disabled,
}}
>
<div class={selectTextClasses} part="text">
<div class={selectTextClasses} part={textPart}>
{selectText}
</div>
<div class="select-icon" role="presentation" part="icon">
<div class="select-icon-inner"></div>
<div class="select-icon-inner" part="icon-inner"></div>
</div>
<button
type="button"

27
core/src/components/select/test/custom/e2e.ts Normal file
View File

@ -0,0 +1,27 @@
import { newE2EPage } from '@stencil/core/testing';
test('select: custom', async () => {
const page = await newE2EPage({
url: '/src/components/select/test/custom?ionic:_testing=true'
});
const compares = [];
compares.push(await page.compareScreenshot());
for (const compare of compares) {
expect(compare).toMatchScreenshot();
}
});
test('select:rtl: custom', async () => {
const page = await newE2EPage({
url: '/src/components/select/test/custom?ionic:_testing=true&rtl=true'
});
const compares = [];
compares.push(await page.compareScreenshot());
for (const compare of compares) {
expect(compare).toMatchScreenshot();
}
});

106
core/src/components/select/test/custom/index.html Normal file
View File

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Select - Custom</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>Select - Custom</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content test-content">
<ion-list>
<ion-list-header>
<ion-label>
Standalone Select
</ion-label>
</ion-list-header>
<ion-select placeholder="Default Select">
<ion-select-option value="madison">Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
</ion-select>
<ion-select placeholder="Placeholder" class="custom-part-colors">
<ion-select-option value="madison">Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
</ion-select>
<ion-select value="austin" class="custom-part-colors">
<ion-select-option value="madison">Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
</ion-select>
<ion-list-header>
<ion-label>
Item Select
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Location</ion-label>
<ion-select placeholder="Default Select">
<ion-select-option value="madison">Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-content>
<style>
.custom-part-colors {
text-align: center;
justify-content: center;
font-size: 13px;
border-radius: 6px;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 80%;
margin: 10px auto;
}
.custom-part-colors::part(placeholder),
.custom-part-colors::part(text) {
flex: 0 0 auto;
}
.custom-part-colors::part(placeholder) {
color: green;
opacity: 1;
}
.custom-part-colors::part(text) {
color: blue;
}
.custom-part-colors::part(icon) {
color: red;
opacity: 1;
}
</style>
</ion-app>
</body>
</html>