mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 02:31:34 +08:00
fix(select): add icon-inner & placeholder part (#20605)
- 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
@ -21,6 +21,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -54,6 +56,8 @@ button {
|
|||||||
|
|
||||||
.select-icon {
|
.select-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
opacity: .33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-text {
|
.select-text {
|
||||||
@ -85,7 +89,5 @@ button {
|
|||||||
|
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
|
|
||||||
opacity: .33;
|
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,6 +11,11 @@ import { SelectCompareFn } from './select-interface';
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
* @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({
|
@Component({
|
||||||
tag: 'ion-select',
|
tag: 'ion-select',
|
||||||
@ -426,6 +431,8 @@ export class Select implements ComponentInterface {
|
|||||||
'select-placeholder': addPlaceholderClass
|
'select-placeholder': addPlaceholderClass
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const textPart = addPlaceholderClass ? 'placeholder' : 'text';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Host
|
<Host
|
||||||
onClick={this.onClick}
|
onClick={this.onClick}
|
||||||
@ -440,11 +447,11 @@ export class Select implements ComponentInterface {
|
|||||||
'select-disabled': disabled,
|
'select-disabled': disabled,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div class={selectTextClasses} part="text">
|
<div class={selectTextClasses} part={textPart}>
|
||||||
{selectText}
|
{selectText}
|
||||||
</div>
|
</div>
|
||||||
<div class="select-icon" role="presentation" part="icon">
|
<div class="select-icon" role="presentation" part="icon">
|
||||||
<div class="select-icon-inner"></div>
|
<div class="select-icon-inner" part="icon-inner"></div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
27
core/src/components/select/test/custom/e2e.ts
Normal file
27
core/src/components/select/test/custom/e2e.ts
Normal 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
106
core/src/components/select/test/custom/index.html
Normal 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>
|
||||||
Reference in New Issue
Block a user