Feature: TabMenu #3
Conversation
| @@ -1980,6 +1980,80 @@ | |||
| minimatch "^3.0.4" | |||
| strip-json-comments "^3.1.1" | |||
|
|
|||
| "@evocateur/libnpmaccess@^3.1.2": | |||
There was a problem hiding this comment.
Lots of changes here just from running yarn in the root. Not sure if these are expected, or problematic?
packages/pancake-uikit/src/__tests__/components/__snapshots__/tabmenu.test.tsx.snap
Outdated
Show resolved
Hide resolved
|
| import { Text } from "../Text"; | ||
|
|
||
| const Tab: React.FC<TabProps> = ({ isActive = false, onClick, tabMenuLength = 1, children }) => { | ||
| const tabWidthPercentage = 100 / tabMenuLength; |
There was a problem hiding this comment.
Why calculate the percentage and not use flex or grid?
There was a problem hiding this comment.
Also a good point - I was hung up on modifying the width style because it seemed to use a fixed width at desktop sizes in the designs, but looking again... it isn't.
There was a problem hiding this comment.
Nice suggestion. Used flex-grow instead. Just confirming the behaviour with Bugs is all good.
17.March.2021.-.Loom.Recording.mp4
There was a problem hiding this comment.
There were a few tiny padding tweaks but it has the Bugs 👍
|
@ChefHutch Just fix the formatting |
…on implementing tests
- Refactored progress to remove excess class names
* build: Bump storybook * feat(uikit): BalanceInput * build: Updated storybook build command * build: Update storybook command
* build: Update Lerna config * chore: Update package.json
- @pancakeswap-libs/eslint-config-pancake@1.0.1 - @pancakeswap-libs/uikit@0.15.1
- Add changelog
* build: Add release command * chore: Remove NP
ChefHutch
force-pushed
the
feature/tab-bar
branch
from
e6caf40 to
3ff5c57
Compare
|
Aaaabsolutely wrecked this with a rebase to change first commit author, migrated to > #19 |
Borked this with a rebase, moved to > #19
Added new components to the UIKit:
Exported:
TabMenuProps, TabPropsNot exported:
Details
onClicksset theactiveIndexdepending on the index of the child that has been clickedStyledTabMenuis responsible for the space between the buttons, and the elements' bottom-borderStyledTabis a styled html button, with dynamic color/background-color depending on whether it is selected. Below 572px the tab elements flex-grow to fill the available space. overflow-y is set to scroll so these elements become scrollable if they break out of the container.Questions
Tabbe separated into its own package?