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.

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

Preview chips segmentedbutton #1495

Merged
merged 91 commits into from
Jan 25, 2023
Merged
Changes from 1 commit
Commits
Show all changes
91 commits
Select commit Hold shift + click to select a range
938f1cd
feat(chip): init component
marvinLaubenstein Nov 10, 2022
b698696
refactor: cleaning up component
marvinLaubenstein Nov 14, 2022
4772c49
feat: init new chip concept
marvinLaubenstein Nov 14, 2022
fcf9f7a
feat: adding dismissible and selected functionality's
marvinLaubenstein Nov 14, 2022
3ca6b13
feat: adding possibility for icons
marvinLaubenstein Nov 17, 2022
d39c6f0
feat: adding unit test and storybook init
marvinLaubenstein Nov 17, 2022
138df19
feat: adding accessibility, disabled and removing magic numbers
marvinLaubenstein Nov 18, 2022
ab534f7
refactor: solving linting errors
marvinLaubenstein Nov 18, 2022
8a891c2
fix: naming
marvinLaubenstein Nov 18, 2022
bce2ae3
fix: reference error
marvinLaubenstein Nov 21, 2022
3ac9abc
fix: reference error
marvinLaubenstein Nov 21, 2022
4410ce2
fix: reference error
marvinLaubenstein Nov 21, 2022
0d5d518
refactor: changing story naming
marvinLaubenstein Nov 21, 2022
7588c67
feat: init visual tests
marvinLaubenstein Nov 21, 2022
6b28ba7
refactor: deleting href test case
marvinLaubenstein Nov 22, 2022
a57fef1
refactor: changing close trigger
marvinLaubenstein Nov 22, 2022
8f6035c
refactor: changing focus outline style
marvinLaubenstein Nov 22, 2022
8834668
refactor: updating visual snapshots
marvinLaubenstein Nov 22, 2022
10a085b
refactor: deleting unneeded props
marvinLaubenstein Dec 5, 2022
971978f
feat: adding focus and active state
marvinLaubenstein Dec 5, 2022
0e0439e
feat: adding storybook stories
marvinLaubenstein Dec 7, 2022
fc30039
fix: not loading project
marvinLaubenstein Dec 12, 2022
ef36ef7
feat: adding focus state
marvinLaubenstein Dec 12, 2022
53c465c
feat: implement new design
marvinLaubenstein Dec 13, 2022
28e93c4
refactor: storybook stories
marvinLaubenstein Dec 15, 2022
1cf8083
feat: add segmented-button
felix-ico Dec 16, 2022
7c88770
refactor: changing stories chip label and deleting icon size property
marvinLaubenstein Dec 20, 2022
cada6f2
Merge branch 'main' into feat/chip
marvinLaubenstein Dec 20, 2022
54993ac
refactor: changing stories label
marvinLaubenstein Dec 21, 2022
db005e0
fix: removing unneeded icon size property
marvinLaubenstein Dec 21, 2022
aacc01e
refactor: updating visual snapshots
marvinLaubenstein Dec 21, 2022
e4b7d6b
test(visual): update snapshots (#1434)
github-actions[bot] Dec 21, 2022
988f676
fix: solving color problem and transition bug
marvinLaubenstein Dec 22, 2022
928e842
refactor: changing label prop to slot
marvinLaubenstein Dec 22, 2022
9813dde
test(visual): update snapshots (#1436)
github-actions[bot] Dec 22, 2022
2068692
refactor: changing icon to selected
marvinLaubenstein Dec 22, 2022
d4bc836
fix: add refactoring from separate branch
felix-ico Jan 9, 2023
b3a330d
test(visual): update snapshots (#1456)
github-actions[bot] Jan 9, 2023
2262c57
refactor: renaming segmented-button to segment and segmented-button-g…
marvinLaubenstein Jan 9, 2023
d11dc55
test(visual): update snapshots (#1457)
github-actions[bot] Jan 9, 2023
f8abb5a
test(visual): update snapshots (#1459)
github-actions[bot] Jan 10, 2023
54157ef
test(visual): update snapshots (#1461)
github-actions[bot] Jan 10, 2023
4166608
test(visual): update snapshots (#1462)
github-actions[bot] Jan 10, 2023
d1731a3
feat: disable deselecting on single-select
felix-ico Jan 11, 2023
2bd60d3
fix: lint
felix-ico Jan 11, 2023
0e4c206
fix: format
felix-ico Jan 11, 2023
d771091
fix: improve naming
felix-ico Jan 11, 2023
952a8f6
test: update snapshot
felix-ico Jan 11, 2023
029f2e2
refactor: introducing new dynamic and persistent structure
marvinLaubenstein Jan 11, 2023
5ef905d
refactor: changing disabled functionality
marvinLaubenstein Jan 12, 2023
054ee4b
refactor: updating storybook stories
marvinLaubenstein Jan 12, 2023
bcc2b09
fix: solving loading issues
marvinLaubenstein Jan 12, 2023
f4dab4a
refactor: updating visual snapshots
marvinLaubenstein Jan 12, 2023
91fb881
feat: adding example story for dynamic
marvinLaubenstein Jan 13, 2023
6ba23f6
refactor: changing selected icon state setting
marvinLaubenstein Jan 13, 2023
d60fa45
refactor: improving storybook page
marvinLaubenstein Jan 13, 2023
8fd306e
refactor: updating visual snapshots
marvinLaubenstein Jan 13, 2023
543eac0
Merge branch 'main' into feat/chip
marvinLaubenstein Jan 13, 2023
e5e50e8
fix: merging problem
marvinLaubenstein Jan 13, 2023
818db5d
fix: solving storybook preview problem
marvinLaubenstein Jan 13, 2023
e95c300
fix: quickfix
marvinLaubenstein Jan 13, 2023
2beaef5
refactor: removing example story
marvinLaubenstein Jan 16, 2023
75bbcdd
refactor: changing minor styling in storybook
marvinLaubenstein Jan 16, 2023
3cea555
feat: add fullwidth prop
felix-ico Jan 18, 2023
9bcd820
fix: remove ts-ignore
felix-ico Jan 18, 2023
5fb26fb
feat: add fullwidth prop to story
felix-ico Jan 18, 2023
e7ce143
fix: format
felix-ico Jan 18, 2023
5af69c8
fix: missing closing bracket
felix-ico Jan 18, 2023
a4fca19
fix: style
felix-ico Jan 18, 2023
cc826e3
fix: format
felix-ico Jan 18, 2023
76c6ddf
Merge branch 'feat/chip' of github.com:telekom/scale into preview-chi…
felix-ico Jan 20, 2023
14a4757
Merge branch 'feat/segmented-button' of github.com:telekom/scale into…
felix-ico Jan 20, 2023
4545765
test(visual): update snapshots (#1496)
github-actions[bot] Jan 20, 2023
81f9480
Feat/chip and segmented button usage text (#1501)
marvinLaubenstein Jan 23, 2023
6a790a5
refactor: updating segmented button snapshots
marvinLaubenstein Jan 23, 2023
276e938
refactor: changing design matters
marvinLaubenstein Jan 23, 2023
9dab899
fix: solving design notes
marvinLaubenstein Jan 24, 2023
2371fef
refactor: deleting slitted view / mobile view issues
marvinLaubenstein Jan 24, 2023
0d8d5b0
refactor: including design feedback
marvinLaubenstein Jan 24, 2023
a95f917
Refactor/chips segmentedbutton (#1512)
marvinLaubenstein Jan 25, 2023
5c454ee
feat: add segmented-button (#1429)
felix-ico Jan 25, 2023
44cf9f2
test(visual): update snapshots (#1497)
github-actions[bot] Jan 25, 2023
779db35
test(visual): update snapshots (#1513)
github-actions[bot] Jan 25, 2023
b46ebe0
test(visual): update snapshots (#1514)
github-actions[bot] Jan 25, 2023
3c5e393
fix: solving visual testing fails
marvinLaubenstein Jan 25, 2023
980ee6b
fix: remove unneeded dep, remove unneeded file
felix-ico Jan 25, 2023
350d666
Merge branch 'preview-chips-segmentedbutton' of github.com:telekom/sc…
felix-ico Jan 25, 2023
35f42bb
fix: remove wrong deprecation warning
felix-ico Jan 25, 2023
34cc22e
test: disable segmented button vis test
felix-ico Jan 25, 2023
6cacb81
test(segmented-button): disable
nowseemee Jan 25, 2023
c926271
test(visual): update snapshots (#1516)
github-actions[bot] Jan 25, 2023
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
Prev Previous commit
Next Next commit
feat: adding focus and active state
marvinLaubenstein committed Dec 5, 2022

Verified

This commit was signed with the committer’s verified signature. The key has expired.
addaleax Anna Henningsen
commit 971978f1af66b70b1c001672f9daad392cc4619b
54 changes: 49 additions & 5 deletions packages/components/src/components/chip/chip.css
Original file line number Diff line number Diff line change
@@ -40,21 +40,44 @@
justify-content: center;
cursor: default;
background: var(--telekom-color-text-and-icon-inverted-standard);
box-shadow: var(--box-shadow);
border: 1px solid var(--telekom-color-ui-border-standard);
}

.chip:hover {
background: linear-gradient(
var(--telekom-color-ui-state-fill-hovered),
var(--telekom-color-ui-state-fill-hovered)
),
var(--telekom-color-text-and-icon-inverted-standard);
}

.chip:active {
background: linear-gradient(
var(--telekom-color-ui-state-fill-pressed),
var(--telekom-color-ui-state-fill-pressed)
),
var(--telekom-color-text-and-icon-inverted-standard);
}

.chip--selected {
background: var(--background-standard-selected);
color: var(--color-standard-selected);
}

/*TODO: proof in storybook*/
.chip--selected:hover {
background: var(--telekom-color-additional-violet-40);
background: linear-gradient(
var(--telekom-color-ui-state-fill-hovered-inverted),
var(--telekom-color-ui-state-fill-hovered-inverted)
),
var(--background-standard-selected);
}

.chip--selected:active {
background: var(--telekom-color-ui-state-fill-pressed-inverted);
background: linear-gradient(
var(--telekom-color-ui-state-fill-pressed-inverted),
var(--telekom-color-ui-state-fill-pressed-inverted)
),
var(--background-standard-selected);
}

/**
@@ -104,5 +127,26 @@ type outline

.chip.chip--type-outline.chip--selected {
color: var(--telekom-color-text-and-icon-primary-standard);
background-color: transparent;
background: var(--telekom-color-text-and-icon-inverted-standard);
border: 1px solid var(--telekom-color-text-and-icon-primary-standard);
}

.chip.chip--type-outline.chip--selected:hover {
background: linear-gradient(
var(--telekom-color-ui-state-fill-hovered),
var(--telekom-color-ui-state-fill-hovered)
),
var(--telekom-color-text-and-icon-inverted-standard);
color: var(--telekom-color-text-and-icon-primary-hovered);
border: 1px solid var(--telekom-color-text-and-icon-primary-hovered);
}

.chip.chip--type-outline.chip--selected:active {
background: linear-gradient(
var(--telekom-color-ui-state-fill-pressed),
var(--telekom-color-ui-state-fill-pressed)
),
var(--telekom-color-text-and-icon-inverted-standard);
color: var(--telekom-color-text-and-icon-primary-pressed);
border: 1px solid var(--telekom-color-text-and-icon-primary-pressed);
}