skin
skin copied to clipboard
eBay
section-title: updated "see all" variant
The section title component is being updated to replace the arrow icon button with a link button pinned to the right of the screen. The button defaults to have a label of "See all". DOD: Section title styling has been updated to match Playbook specs.
There has been some back and forth on this and various permutations, so for the benefit of the dev working on this, here are the versions currently supported:
The version above is hidden from docs and deprecated, scheduled for removal in v14. It was recently superseded by the version below, but it seems like it's reign will now be short-lived:
@rbascue , currently, the section title heading is an anchor. There is no mention of this in the issue, but can I assume we're removing the anchor and using plain text for the heading, and only the link on the right will be a link? The playbook element descriptions seem to indicate it too, but I wanted to verify before implementing the change.
@rbascue , also, the figma link does not show the actual component (I can't get to it either from inside); it just has images of various components and their statuses. Can you give me the link to the figma that I can inspect to get layout details to be used?
Hi @ArtBlue, here is a link to the component in the library. https://www.figma.com/file/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=78903%3A90028
@rbascue , thanks for that. One more Q - at the moment, storybook has a few more variations that look to be obsolete. Can you verify they should be removed? https://opensource.ebay.com/skin/storybook/?path=/story/section-title-rtl--heading
Specifically, the medium and giant variations appear to be obvious candidates for removal. I just want to clean things up as much as possible. What do you think? Anything else that sticks out at you for removal?
@rbascue , also, it looks like both the small and large variations use the small overflow icon (3x13). Is this intentional? We do have a large overflow (4x18), but going with the large would mean changing the button from 32x32 to 40x40 for the large variation.
@rbascue , there are also a few style variations applied (in code) on the base styles and breakpoints over 601px. I don't see those specifications based on breakpoints in Figma. Do all screen widths now use the same styling? Should we remove those breakpoints overrides?
So from what I understand is we should do it like this (we can let Randy confirm). But this should unblock you imo.
-
There is a large and small section in figma. For small it should be below 601 and large should be over.
If we aren't using those, then we should remove it. Lets sync up as much as we can with figma currently and remove the old stuff.
If you feel there's too many things changing, let us know what it is. In dialog we removed a lot of the large/small styles since they now are the same pretty much. -
Whatever variation we have and is not in figma should be removed.
-
I believe design system is defaulting to small icons across the board. Lets use the small icon for now and switch it if needed.
@ArtBlue @agliga Yes, large would be for 601+ and we're sticking with the smaller icon button for both sizes.