Slider component #975
Slider component #975
Conversation
|
|
||
| import type { TransitionComponent } from '../../types'; | ||
|
|
||
| const Slider: TransitionComponent = ({ |
There was a problem hiding this comment.
I would like to be able to export this as export default function Slider() {...}, but then there's no way to type it as TransitionComponent.
It would be nice to be able to do something like export default function Slider() {...} satisfies TransitionComponent 😅
| {children} | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
This component is brought from client verbatim.
There was a problem hiding this comment.
Pro tip! GitHub now has the ability to add a comment at a module level, if that's helpful (the comment box icon at the top of each file's diff):
There was a problem hiding this comment.
I actually knew that! 😅
| }, | ||
| ]) | ||
| ); | ||
| }); |
There was a problem hiding this comment.
This test is brought from client verbatim. Only one import was adapted.
There was a problem hiding this comment.
Looking great so far! I think transition is a fine name for this group of components. Presumably the human-readable section in the pattern library would be Transitions?
Do you want to take on the challenge of adding a basic pattern library page for this component (hint: you'll need to add a new "component group" to the routes typing, but I bet you're able to figure that out pretty quick)? I can help with the details once it's in place. We can tackle documenting TransitionComponent as a concept as a separate task (i.e. probably would document it on the "Using Components" page, which needs content updates anyway).
| {children} | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Pro tip! GitHub now has the ability to add a comment at a module level, if that's helpful (the comment box icon at the top of each file's diff):
| Tab, | ||
| TabList, | ||
| } from '../../../../'; | ||
| import { ModalDialog } from '../../../../components/feedback'; | ||
| import type { ModalDialogProps } from '../../../../components/feedback/ModalDialog'; | ||
| import Library from '../../Library'; | ||
| import FadeComponent from '../FadeComponent'; |
There was a problem hiding this comment.
Nice work on cleaning up.
Sure! |
acelaya
force-pushed
the
slider-component
branch
from
196ec69 to
e97d1e4
Compare
|
I'm putting this PR as "ready for review", and will work on the documentation in parallel. |
Codecov Report
@@ Coverage Diff @@
## main #975 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 52 53 +1
Lines 671 700 +29
Branches 230 238 +8
=========================================
+ Hits 671 700 +29
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
There was a problem hiding this comment.
I think it's OK to only update index (not next, which is going to go away in an upcoming minor release).
On my way |
This PR brings the
Slidercomponent from client to this library.This component will be the first one fulfiling the
TransitionComponentcontract. These components can be passed to any other component supporting them, or used standalone.I have also deleted the dummy
FadeComponentthat was created just fortransitionComponentdocumentation purposes, and used theSliderinstead.TODO
TransitionComponents (as infeedback,input,layout, etc). I have provisionally usedtransition.Sliderspecifically andTransitionComponentsin general in the pattern library. -> On a follow-up PR to avoid a too big diffTesting steps
The slider can be seen in action in the Dialog page. Once there, search for
transitionComponentand there's an example using theSlidercomponent.