-
Notifications
You must be signed in to change notification settings - Fork 2
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
feat: ✨ add sd-scrollable #289
Labels
CL-migration
All components which need to be migrated from Component Library
🔧 code
needs changes in code
Comments
yoezlem
added
the
CL-migration
All components which need to be migrated from Component Library
label
Jan 16, 2024
karlbaumhauer
changed the title
feat: ✨ add sd-scrollable
feat: ✨ add sd-scrollable - CSS style
Feb 14, 2024
karlbaumhauer
changed the title
feat: ✨ add sd-scrollable - CSS style
feat: ✨ add sd-scrollable
Feb 14, 2024
9 tasks
Hi @azraefendic for white and primary background, I'll implement the same color for sd-divider: neutral-400 & primary-00. Here's the screenshot. |
4 tasks
azraefendic
pushed a commit
that referenced
this issue
Apr 19, 2024
## Description: following #289 & [#167](solid-design-system/figma#167) since expandable's gradient is reworked into with masking. These tokens are no longer valid and need to be released - gradient.horizontal-white-white|80-transparent - gradient.horizontal-transparent-white|80-white - gradient.vertical-white-white|80-transparent - gradient.vertical-transparent-white|80-white these tokens need to be deprecated - gradient.vertical-white-transparent - gradient.horizontal-transparent-white - gradient.horizontal-white-transparent ## Definition of Reviewable: *PR notes: Irrelevant elements should be removed.* - [ ] Documentation is created/updated - [ ] Release note is added - [ ] Migration Guide is created/updated - [x] relevant tickets are linked
azraefendic
pushed a commit
that referenced
this issue
Apr 26, 2024
## Description: following #289 & [#167](solid-design-system/figma#167) since expandable's gradient is reworked into with masking. These tokens are no longer valid and need to be released - gradient.horizontal-white-white|80-transparent - gradient.horizontal-transparent-white|80-white - gradient.vertical-white-white|80-transparent - gradient.vertical-transparent-white|80-white these tokens need to be deprecated - gradient.vertical-white-transparent - gradient.horizontal-transparent-white - gradient.horizontal-white-transparent ## Definition of Reviewable: *PR notes: Irrelevant elements should be removed.* - [ ] Documentation is created/updated - [ ] Release note is added - [ ] Migration Guide is created/updated - [x] relevant tickets are linked
azraefendic
added a commit
that referenced
this issue
May 22, 2024
## Description: Added the sd-scrollable component. Closes #289 ## Definition of Reviewable: - [x] Documentation is created/updated - [x] Migration Guide is created/updated - [x] E2E tests (features, a11y, bug fixes) are created/updated - [x] Stories (features, a11y) are created/updated - [x] relevant tickets are linked
2 tasks
azraefendic
pushed a commit
that referenced
this issue
May 27, 2024
…ollable (#1119) ## Description following #300 & #289, old gradients used for sd-scrollable V.0.0.1 & sd-expandable V.0.0.1 must be deprecated: -gradient.vertical-white-transparent -gradient.horizontal-transparent-white -gradient.horizontal-white-transparent -gradient.vertical-transparent-white -gradient.vertical-transparent-primary ## Definition of Reviewable: <!-- *PR notes: Irrelevant elements should be removed.* --> - [ ] Documentation is created/updated - [ ] Migration Guide is created/updated
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
CL-migration
All components which need to be migrated from Component Library
🔧 code
needs changes in code
User Story
As a user of the Solid Design System, I would like to utilize a
sd-scrollable
component, so that I can easily indicate with a shadow and scroll buttons, that there is hidden content to be scrolled.Documentation
https://www.figma.com/file/7vU3PYV6MlANamSvmDaQRX/Scrollable?type=design&node-id=2203-386&mode=design&t=EoYe8ercIJ2ZpDoe-4
Hand-off
https://www.figma.com/file/7vU3PYV6MlANamSvmDaQRX/Scrollable?type=design&node-id=75-4326&mode=design&t=EoYe8ercIJ2ZpDoe-4
Components detailed requirements
Props
orientation
horizontal
/vertical
horizontal
buttons
boolean
false
scrollStep
number
150
scrollbars
boolean
false
shadow
boolean
false
gradient
boolean
false
Events
CSS-Properties
gradient
- define a custom color for the gradientParts
parts
story does not work out of the box, do not spend more effort on it but open a bug ticket to tackle it later.Slots
content
- default content sloticon
- slot to replace the buttons icon (chevron)Stories (besides the
default
story)Gradient
Button
Shadow
Scrollbar
Custom Icon
- Replacing the chevrons with another iconSamples
sd-tab-group
should then be replaced with the newsd-scrollable
and a description should be added to point to thesd-scrollable
component.Dependencies
Technical information
DoR
DoD
feature
branchThe text was updated successfully, but these errors were encountered: