Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(segment-button): Add --indicator-height property to segment button #19653

Merged
merged 8 commits into from Jan 23, 2020
Merged

feat(segment-button): Add --indicator-height property to segment button #19653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
93810b9
feat(segment-button): Add --indicator-height property to segment button
nikosdouvlis Oct 14, 2019
a996e90
run build
liamdebeasi Nov 14, 2019
6a21efc
Merge branch 'master' into feat-segment-button-add-indicator-height
brandyscarney Jan 14, 2020
9c2cdb3
fix(segment): set indicator height in correct selector
Jan 14, 2020
8036262
test(segment): add custom indicator height segment
Jan 14, 2020
e29aad8
chore(segment): fix accidentally removed code & update prop docs
Jan 14, 2020
2e45c3b
Merge branch 'master' into pr/19653
Jan 14, 2020
1138f7b
Merge branch 'master' into pr/19653
Jan 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions core/api.txt
View file
Open in desktop
Expand Up @@ -973,6 +973,7 @@ ion-segment-button,css-prop,--color-disabled
ion-segment-button,css-prop,--color-hover
ion-segment-button,css-prop,--indicator-box-shadow
ion-segment-button,css-prop,--indicator-color
ion-segment-button,css-prop,--indicator-height
ion-segment-button,css-prop,--indicator-transform
ion-segment-button,css-prop,--indicator-transition
ion-segment-button,css-prop,--margin-bottom
Expand Down
1 change: 1 addition & 0 deletions core/src/components/segment-button/readme.md
View file
Open in desktop
Expand Up @@ -655,6 +655,7 @@ export const SegmentButtonExample: React.FC = () => (
| `--color-hover` | Color of the segment button on hover |
| `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button |
| `--indicator-color` | Color of the indicator for the checked segment button |
| `--indicator-height` | Height of the indicator for the checked segment button |
| `--indicator-transform` | Transform of the indicator for the checked segment button |
| `--indicator-transition` | Transition of the indicator for the checked segment button |
| `--margin-bottom` | Bottom margin of the segment button |
Expand Down
1 change: 1 addition & 0 deletions core/src/components/segment-button/segment-button.ios.scss
View file
Open in desktop
Expand Up @@ -14,6 +14,7 @@
--border-style: solid;
--indicator-box-shadow: #{$segment-button-ios-box-shadow-checked};
--indicator-color: #{$segment-button-ios-indicator-color};
--indicator-height: 100%;
--indicator-transition: #{$segment-button-ios-transition-animated};
--indicator-transform: none;
--transition: #{$segment-button-ios-transition};
Expand Down
3 changes: 1 addition & 2 deletions core/src/components/segment-button/segment-button.md.scss
View file
Open in desktop
Expand Up @@ -12,6 +12,7 @@
--color-checked: #{$segment-button-md-text-color-checked};
--indicator-box-shadow: none;
--indicator-color: var(--color-checked);
--indicator-height: 2px;
--indicator-transition: #{$segment-button-md-transition-animated};
--indicator-transform: none;
--padding-top: #{$segment-button-md-padding-top};
Expand Down Expand Up @@ -105,8 +106,6 @@
}

.segment-button-indicator-background {
height: 2px;

background: var(--indicator-color);
}

Expand Down
3 changes: 2 additions & 1 deletion core/src/components/segment-button/segment-button.scss
View file
Open in desktop
Expand Up @@ -32,6 +32,7 @@
*
* @prop --transition: Transition of the segment button
*
* @prop --indicator-height: Height of the indicator for the checked segment button
* @prop --indicator-box-shadow: Box shadow on the indicator for the checked segment button
* @prop --indicator-color: Color of the indicator for the checked segment button
* @prop --indicator-transition: Transition of the indicator for the checked segment button
Expand Down Expand Up @@ -230,7 +231,7 @@ ion-ripple-effect {

.segment-button-indicator-background {
width: 100%;
height: 100%;
height: var(--indicator-height);

transform: var(--indicator-transform);

Expand Down
9 changes: 6 additions & 3 deletions core/src/components/segment/test/custom/index.html
View file
Open in desktop
Expand Up @@ -197,24 +197,27 @@
* This tests that the colors are able to be overridden on
* a segment inside of a toolbar
*
* Indicator color / ripple color can be set on ion-segment
* Ripple color can be set on ion-segment
*
* Backgrounds / colors for the button must be set on the
* ion-segment-button
*/
.custom-checked {
--ripple-color: purple;
--indicator-color: purple;
}

.ios .custom-checked ion-segment-button {
--color-checked: white;
--color-checked: magenta;
--indicator-color: red;
--indicator-height: 50%;
}

.md .custom-checked ion-segment-button {
--background-hover: rgba(17, 228, 10, 0.5);
--color-checked: purple;
--color-hover: blue;
--indicator-color: red;
--indicator-height: 5px;
}

/*
Expand Down