Finalize FAB: fixed placement and tokens-based styling #2
Conversation
Linn-Devoteam
changed the title
| | 'secondary' | ||
| | 'danger' | ||
| | 'success' | ||
| | 'warning' |
There was a problem hiding this comment.
Since info dont have a color in theme, I add a color for info in theme and it will work.
| | 'success' | ||
| | 'warning' | ||
| export type FabTextColor = 'primary' | 'secondary' | 'white' | ||
| export type Fabsize = 'SMALL' | 'MEDIUM' | 'LARGE' |
There was a problem hiding this comment.
Since the size is linked to the token and token is written in Uppercase. I change the Fabsize in token to sm, md, lg. And update the Fab component
| | 'danger' | ||
| | 'success' | ||
| | 'warning' | ||
| export type FabTextColor = 'primary' | 'secondary' | 'white' |
There was a problem hiding this comment.
why white? primary and secondary should be fine
There was a problem hiding this comment.
It depends on your current primary and secondary text colors. I can update the secondary color to white, and then it will work.
| bgColor?: FabBgColor | ||
| textColor?: FabTextColor | ||
| size?: Fabsize | ||
| position?: 'absolute' | 'fixed' | 'relative' | ||
| bottom?: number | ||
| right?: number | ||
| top?: number | ||
| left?: number | ||
| zIndex?: number |
There was a problem hiding this comment.
why are they all optional? think about what is necessary for the fab to be a fab
| left: ${({ left }) => left ?? 'auto'}; | ||
| z-index: ${({ zIndex }) => zIndex ?? 1000}; | ||
| `; | ||
| export const Container = styled.button<{ |
There was a problem hiding this comment.
a button is not a container though
There was a problem hiding this comment.
Change to div
…condary textColor to white.
…use. Change to Fab element to DIV.
Linn-Devoteam
changed the title
Pull Request
Description
This PR finalizes the
Fab(Floating Action Button) component.It includes:
+icon)react-iconsfor default icon supportonClickhandlingHow to test
Install and start the project:
npm installnpm run devAdd the Fab component to App.tsx for testing
import Fab from './components/common/atoms/Fab/Fab' function App() { const handleClick = () => { alert('Clicked!') } return ( <> < Fab onClick={handleClick} />bgColor, orsize< Fab onClick={handleClick} bgColor="secondary" size="LARGE" />Type of Change
feature: New featurechore: Maintenance, dependency updates, or refactoringtest: Adding or improving testsbug: Bug fixdocs: Documentation updatesShortcut story
https://trello.com/c/vVWL3MCh
Related Issues
Testing Performed
Screenshots/Recordings
Checklist
Additional Notes