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

Fix/refactor segmented button #2258

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Fix/refactor segmented button #2258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bd1bf1a
fix: wip refactor
Dec 22, 2023
01788c3
fix: shadows and clipping in multi select
Jan 4, 2024
b793057
docs: add sample
Jan 4, 2024
4fb3b0a
fix: wip shadow clip
Jan 5, 2024
a85870d
fix: handle icononly and texticon segments correnctly
Jan 5, 2024
ff396e6
fix: refactor wip
Jan 17, 2024
96f0982
fix: pass segment value in change event
Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 148 additions & 56 deletions packages/components/src/components/segment/segment.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,44 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/

:host {
:host {
/* not selected */
--background-color-selected: var(--telekom-color-ui-base);
--button-radius: 6px;
--padding-top-bottom: var(--telekom-spacing-composition-space-03);
--height: 28px;
--font: var(--telekom-text-style-caption-bold);
--label-disabled: var(--telekom-color-text-and-icon-disabled);
--transition: all var(--telekom-motion-duration-transition)
var(--telekom-motion-easing-standard);
--color: var(--telekom-color-text-and-icon-standard);
--transition: all var(--telekom-motion-duration-transition)
var(--telekom-motion-easing-standard);

--color-selected: var(--telekom-color-text-and-icon-primary-standard);

/* medium styles */
--font-size-medium: var(--telekom-typography-font-size-body);
--font-medium: var(--telekom-text-style-ui-bold);
--height-medium: 36px;

/* large styles */
--font-size-large: var(--telekom-typography-font-size-body);
--font-large: var(--telekom-text-style-ui-bold);
--height-large: 40px;

/* hover styles */
--background-color-hover: var(--telekom-color-ui-state-fill-hovered);
--background-color-hover: var(--telekom-color-ui-state-fill-hovered-inverted);

/* active styles */
--background-color-active: var(--telekom-color-ui-state-fill-pressed);
--background-color-active: var(--telekom-color-ui-state-fill-pressed-inverted);

display: flex;
align-items: center;
justify-content: center;
flex: 1;

/* TODO: remove this, used for debugging shadow and clip-path */
/* --telekom-shadow-raised-standard: 0px 8px 32px 0px red, 0px 4px 8px 0px red; */

}

.segment {
Expand All @@ -57,6 +63,19 @@
padding: 0;
}

.segment--list-item {
list-style: none;
box-sizing: border-box;
position: relative;
border: 0;
width: 100%;
border-radius: var(--button-radius);
/* padding-top: var(--telekom-spacing-composition-space-02); */
transition: var(--transition);
background-color: transparent;
display: flex;
}

.segment--mask {
box-sizing: border-box;
display: flex;
Expand All @@ -68,25 +87,14 @@
border-radius: var(--button-radius);
background-color: transparent;
font: var(--font);
transition: var(--transition);
white-space: nowrap;
padding: 8px;
color: var(--color);
line-height: 1;
}

button.segment--small.segment--selected .segment--mask {
padding-left: var(--telekom-spacing-composition-space-04);
padding-right: var(--telekom-spacing-composition-space-05);
}

button.segment--icon-only.segment--small .segment--mask {
padding-left: var(--telekom-spacing-composition-space-06);
padding-right: var(--telekom-spacing-composition-space-06);
}

button.segment--small .segment--mask {
padding-left: 0.625rem;
padding-right: 0.625rem;
.segment--small .segment--mask {
padding-left: 8px;
padding-right: 12px;
}

.segment--small {
Expand All @@ -97,32 +105,29 @@ button.segment--small .segment--mask {
height: var(--height-medium);
}

button.segment--medium.segment--selected .segment--mask {
padding-left: var(--telekom-spacing-composition-space-05);
padding-right: var(--telekom-spacing-composition-space-06);
.segment--medium .text-container {
font: var(--font-medium);
}

button.segment--medium .segment--mask {
font: var(--font-medium);
padding-left: 0.875rem;
padding-right: 0.875rem;
.segment--medium .segment--mask {
padding-left: var(--telekom-spacing-composition-space-05);
padding-right: var(--telekom-spacing-composition-space-06);
}

.segment--large {
height: var(--height-large);
}

button.segment--large.segment--selected .segment--mask {
padding-left: var(--telekom-spacing-composition-space-06);
padding-right: var(--telekom-spacing-composition-space-07);
.segment--large .text-container {
font: var(--font-large)
}

button.segment--large .segment--mask {
font: var(--font-large);
.segment--large .segment--mask {
padding-left: var(--telekom-spacing-composition-space-06);
padding-right: var(--telekom-spacing-composition-space-07);
}

/* selected */

.segment--selected {
background-color: var(--background-color-selected);
box-shadow: var(--telekom-shadow-raised-standard);
Expand All @@ -132,6 +137,8 @@ button.segment--large .segment--mask {
color: var(--color-selected);
}

/* disabled */

.segment--disabled.segment--selected .segment--mask {
color: var(--label-disabled);
}
Expand All @@ -141,29 +148,39 @@ button.segment--large .segment--mask {
background-color: transparent;
}

.segment--left-sibling-selected {
border-radius: 0 var(--button-radius) var(--button-radius) 0;
/* shadows left and right */

.segment--list-item--left-sibling-selected {
margin-left: 0;
clip-path: inset(-2.75rem -2.75rem -2.75rem 0);
backface-visibility: hidden;
overflow: hidden;
}

.segment--right-sibling-selected {
border-radius: var(--button-radius) 0 0 var(--button-radius);
.segment--list-item--left-sibling-selected.segment--list-item,
.segment--list-item--left-sibling-selected .segment {
border-radius: 0 var(--button-radius) var(--button-radius) 0;
}

.segment--list-item--right-sibling-selected {
clip-path: inset(-2.75rem 0 -2.75rem -2.75rem);
margin-right: 0;
backface-visibility: hidden;
overflow: hidden;
position: relative;
}

.segment--left-right-sibling-selected {
.segment--list-item--right-sibling-selected.segment--list-item,
.segment--list-item--right-sibling-selected .segment
{
border-radius: var(--button-radius) 0 0 var(--button-radius);
}


.segment--list-item--left-right-sibling-selected {
clip-path: inset(-2.75rem 0 -2.75rem 0);
border-radius: 0;
margin-left: 0;
margin-right: 0;
backface-visibility: hidden;
}

.segment--list-item--left-right-sibling-selected .segment {
border-radius: 0;
}

.segment:not(.segment--disabled):hover .segment--mask {
Expand All @@ -183,40 +200,68 @@ button.segment--large .segment--mask {
position: relative;
}

.segment:not(.segment--selected):focus {
outline-offset: 0;
}

.segment--left-right-sibling-selected:focus,
.segment--right-sibling-selected:focus,
.segment--left-sibling-selected:focus {
clip-path: none;
}

/* FIXME remove the hard-coded icon names */
/* icon placement */

.segment:not(.segment--icon-only) scale-icon-action-checkmark,
.segment scale-icon-action-close {
margin-right: var(--telekom-spacing-composition-space-03);
}

.segment:not(.segment--selected) scale-icon-action-checkmark {
visibility: hidden !important;
/* .success-icon-container {
margin-right: 4px;
} */

.segment--large .success-icon-container {
margin-right: 6px;
}

.segment:not(.segment--selected) .success-icon-container {
display: none;
}

.segment:not(.segment--selected):not(.segment--icon-text).segment:not(.segment--icon-only) .text-container {
margin-left: 18px;
/* border: 1px solid purple; */
}

.segment--medium:not(.segment--selected):not(.segment--icon-text).segment:not(.segment--icon-only) .text-container {
margin-left: 20px;
}

.segment--large:not(.segment--selected):not(.segment--icon-text).segment:not(.segment--icon-only) .text-container {
margin-left: 26px;
}

.segment scale-icon-action-checkmark {
vertical-align: middle;
.segment--selected .text-container {
margin-left: 0;
}

.segment--selected:not(.segment--icon-only) .icon-container {
display: none !important;
visibility: hidden;
}

.segment--icon-only .success-icon-container,
.segment--icon-text .success-icon-container {
display: none;
}

.segment--icon-text .success-icon-container{
display: none;
}

.segment .success-icon-container {
.segment.segment--selected:not(.segment--icon-only) .icon-container {
display: none;
}

.segment--selected .success-icon-container {
.segment--selected:not(.segment--icon-only) .success-icon-container {
display: flex;
visibility: visible;
justify-content: center;
align-items: center;
}
Expand All @@ -231,3 +276,50 @@ button.segment--large .segment--mask {
.segment--selected .icon-container {
color: var(--color-selected);
}

.segment:not(.segment--selected).segment:not(.segment--icon-only):not(.segment--icon-text) .text-container {
transform: translateX(-9px);
}

.segment.segment--large:not(.segment--selected).segment:not(.segment--icon-only):not(.segment--icon-text) .text-container {
transform: translateX(-13px);
}

.segment--icon-text .icon-container ::slotted(*){
margin-right: var(--telekom-spacing-composition-space-03);
}


.segment--input {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}


.segment--list-item--left-sibling-selected {
}

/* icon only */

.segment--icon-only.segment--small .segment--mask {
/* padding-left: var(--telekom-spacing-composition-space-05);
padding-right: var(--telekom-spacing-composition-space-05); */
padding-left: 0.625rem;
padding-right: 0.625rem;
}

.segment--icon-only.segment--medium .segment--mask {
padding-left: var(--telekom-spacing-composition-space-06);
padding-right: var(--telekom-spacing-composition-space-06);
}

.segment--icon-only.segment--large .segment--mask {
padding-left: var(--telekom-spacing-composition-space-07);
padding-right: var(--telekom-spacing-composition-space-07);
}

.segment--icon-only .segment--mask {
padding-left: var(--telekom-spacing-composition-space-05);
padding-right: var(--telekom-spacing-composition-space-05);
}
Loading
Loading