Add React component for pagination bullets #1261
Conversation
|
|
||
| &.normal { | ||
| color: $white; | ||
| background-color: rgba(255, 255, 255, 0.1); |
There was a problem hiding this comment.
You can use $white-10 instead :)
| @@ -13,6 +13,7 @@ import { Header } from '../components/Header'; | |||
| import { HeaderProfile } from '../components/Header/HeaderProfile'; | |||
| import { Resource } from '../components/Resource'; | |||
| import { Tag } from '../components/Tag'; | |||
| import { Bullet } from '../components/Bullet'; | |||
There was a problem hiding this comment.
You can remove this since the component isn't being used in any Rails views yet.
| } = props; | ||
| const labelClassNames = `bullet ${css.bullet} ${active ? css.active : ''} | ||
| ${normal ? css.normal : ''}`; | ||
| return <div className={labelClassNames}><span>{label}</span></div>; |
There was a problem hiding this comment.
So we actually want to build this component using <li>, and style it accordingly depending on whether the parent is <ul> or <ol>.
|
I thought about this more, and we actually don't need a React component for this. We just need to style our default CSS for li, ul, and ol. |
|
I'll take another swing at simply styling the existing pagination elements. It looks like the existing pagination bullets/links are not accounted for in the design docs so I'll take a design pass at that as well. The pagination in the design docs is against the dark background which does not work in the current use case. |
|
Here's a super quick treatment I threw together based on the other pagination. |
|
Nice work with the pagination items! I think you can actually rename that existing React component you created as PaginationItem. Then for the bullets, just override the default ul, ol, and li styles :) Thanks for working on this :D |
|
Woow, this is amazing 🎉 |
|
@ludamillion thats an amazing work. I do not know if this is still in progress but if you have no time I could go on and start developing it again. Please let me know how you feel about it. @julianguyen you may know the status of this? |
|
@paschalidi I don't know the status, unfortunately, but yeah good idea to check in and ask Luke! Happy to help you look for another issue to start off with :P Let me know on Slack! |
|
@paschalidi Feel free to take over on this one. I started working on it just as I was starting a new job and haven't really been able to make time for working on ifme yet. |
|
@ludamillion @julianguyen will work on that only after I finish #1390 & #1391 |
Description
Does what it says on the tin. Adds a React component for pagination bullets.
There was no hover state specified in the Figma designs so I reused the hover states from the buttons which share the same color scheme.
I'm new to React and mostly implemented this based on analyzing the other components and reading the docs.
Corresponding Issue
#848
Screenshots
Test Coverage
✅