react-native-magnus icon indicating copy to clipboard operation
react-native-magnus copied to clipboard

[Docs] Fab component: icon is partially cut off with when using 'w' and 'h' props

Open ThGnommy opened this issue 1 year ago • 0 comments

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.

image

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>

ThGnommy avatar Apr 13 '23 14:04 ThGnommy