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: ✨ add sd-scrollable #289

Closed
9 of 30 tasks
karlbaumhauer opened this issue Jul 27, 2023 · 1 comment · Fixed by #966
Closed
9 of 30 tasks

feat: ✨ add sd-scrollable #289

karlbaumhauer opened this issue Jul 27, 2023 · 1 comment · Fixed by #966
Assignees
@azraefendic
Labels
CL-migration All components which need to be migrated from Component Library 🔧 code needs changes in code

Comments

@karlbaumhauer
Copy link
Contributor

karlbaumhauer commented Jul 27, 2023 •
edited by yoezlem

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

Status Name Type Default Description
orientation horizontal / vertical horizontal defines the scroll orientation
buttons boolean false Activate scroll buttons
scrollStep number 150 Amount in px to be scrolled when clicking the buttons.
scrollbars boolean false Activate browser scrollbars
shadow boolean false Activate a shadow as optional visual scroll indicator
gradient boolean false Activate a gradient as optional visual scroll indicator

Events

  • button-end clicked
  • button-start clicked
  • end reached
  • start reached

CSS-Properties

  • gradient - define a custom color for the gradient

Parts

  • every other HTML element (depending on the HTML structure) => NOTE: if highlighting the parts in the 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 slot
  • icon - slot to replace the buttons icon (chevron)

Stories (besides the default story)

  • Gradient
  • Button
  • Shadow
  • Scrollbar
  • Custom Icon - Replacing the chevrons with another icon

Samples

  • The scrollable sample/story in the sd-tab-group should then be replaced with the new sd-scrollable and a description should be added to point to the sd-scrollable component.

Dependencies

  • Update scrollable dialog using sd-scrollable and initially showing a shadow at the bottom of the scrollable and when scrolled down a shadow at the top. Then users get that they can scroll down.

Technical information

DoR

  • Item has business value
  • Item has been estimated by the team
  • Item is clear and well-defined
  • Item dependencies have been identified

DoD

  • Documentation has been created/updated (if applicable)
  • Migration Guide has been created/updated (if applicable)
  • Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
  • Relevant stories (Features, A11y) are created/updated
  • Implementation works successfully on feature branch
@karlbaumhauer karlbaumhauer mentioned this issue Aug 1, 2023
Closed
33 tasks
@karlbaumhauer karlbaumhauer added the 🔧 code needs changes in code label Nov 14, 2023
@karlbaumhauer karlbaumhauer modified the milestone: 2024-01-30 Nov 15, 2023
@yoezlem yoezlem added the CL-migration All components which need to be migrated from Component Library label Jan 16, 2024
@karlbaumhauer karlbaumhauer changed the title feat: ✨ add sd-scrollable feat: ✨ add sd-scrollable - CSS style Feb 14, 2024
@karlbaumhauer karlbaumhauer changed the title feat: ✨ add sd-scrollable - CSS style feat: ✨ add sd-scrollable Feb 14, 2024
@mariohamann mariohamann mentioned this issue Feb 16, 2024
Open
9 tasks
@azraefendic azraefendic self-assigned this Feb 19, 2024
@van-nguyen-ht
Copy link
Contributor

Hi @azraefendic

for white and primary background, I'll implement the same color for sd-divider: neutral-400 & primary-00. Here's the screenshot.

Image

@van-nguyen-ht van-nguyen-ht mentioned this issue Apr 19, 2024
Merged
4 tasks
azraefendic pushed a commit that referenced this issue Apr 19, 2024
@van-nguyen-ht
ci(token): sd-scrollable update gradients (#967)
c2d24d9 
## 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
@van-nguyen-ht @azraefendic
ci(token): sd-scrollable update gradients (#967)
384487d 
## 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 azraefendic mentioned this issue Apr 26, 2024
Merged
5 tasks
azraefendic added a commit that referenced this issue May 22, 2024
@azraefendic
feat: ✨ add sd-scrollable (#966)
3d7bcad 
## 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
karlbaumhauer pushed a commit that referenced this issue May 22, 2024
@semantic-release-bot
chore(release/components): 3.4.0 [skip actions]
b235d50 
# [@solid-design-system/components-v3.4.0](components/3.3.1...components/3.4.0) (2024-05-22)

### Features

* ✨ add sd-scrollable ([#966](#966)) ([3d7bcad](3d7bcad)), closes [#289](#289)
@van-nguyen-ht van-nguyen-ht mentioned this issue May 27, 2024
Merged
2 tasks
azraefendic pushed a commit that referenced this issue May 27, 2024
@van-nguyen-ht
ci(token): deprecating old gradient tokens for sd-expandable & sd-scr…
cf33b3b 
…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
Assignees

@azraefendic azraefendic

Labels
CL-migration All components which need to be migrated from Component Library 🔧 code needs changes in code
Projects
Solid Design System Project Board
Status: ✅ Done
[legacy] - SDS Roadmap
Status: Planned
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: ✨ add sd-scrollable solid-design-system/solid
4 participants
@azraefendic @karlbaumhauer @yoezlem @van-nguyen-ht