react-native-magnus
react-native-magnus copied to clipboard
[Docs] Fab component: icon is partially cut off with when using 'w' and 'h' props
Documentation Link
https://magnus-ui.com/docs/fab/
Describe the problem
Example Code in the docs
<Fab bg="blue600" h={50} w={50}>
<Button p="none" bg="transparent" justifyContent="flex-end">
<Div rounded="sm" bg="white" p="sm">
<Text fontSize="md">Cheer</Text>
</Div>
<Icon
name="user"
color="blue600"
h={50}
w={50}
rounded="circle"
ml="md"
bg="white"
/>
</Button>
<Button p="none" bg="transparent" justifyContent="flex-end">
<Div rounded="sm" bg="white" p="sm">
<Text fontSize="md">Boost</Text>
</Div>
<Icon
name="user"
color="blue600"
h={50}
w={50}
rounded="circle"
ml="md"
bg="white"
/>
</Button>
</Fab>
I'm trying the <Fab />
component, and I have noticed that if I follow the code example, which added the two props w={50}
for the width and h={50}
for the height, the icon is partially cut off.
Describe the improvement
I would do a PR that edits the example code, removing these two props and adds fontSize: '4xl'
for handling the size of the icon.
New Example Code
+ <Fab bg="blue600" fontSize="4xl">
<Button p="none" bg="transparent" justifyContent="flex-end">
<Div rounded="sm" bg="white" p="sm">
<Text fontSize="md">Cheer</Text>
</Div>
<Icon
name="user"
color="blue600"
h={50}
w={50}
rounded="circle"
ml="md"
bg="white"
/>
</Button>
<Button p="none" bg="transparent" justifyContent="flex-end">
<Div rounded="sm" bg="white" p="sm">
<Text fontSize="md">Boost</Text>
</Div>
<Icon
name="user"
color="blue600"
h={50}
w={50}
rounded="circle"
ml="md"
bg="white"
/>
</Button>
</Fab>