Skip to content
This repository was archived by the owner on Jan 23, 2024. It is now read-only.

docs: wrap examples with overflow issues in the TableContainer component #488

Closed
wants to merge 8 commits into from
Closed

docs: wrap examples with overflow issues in the TableContainer component #488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
84331e8
fix(flex): wrap example in section `Flex and Spacer vs Grid vs Stack`…
TylerAPfledderer Mar 29, 2022
bb6aa35
fix(form-control): wrap example in section "Sample usage for a radio …
TylerAPfledderer Mar 30, 2022
220ea91
fix(number-input): wrap example in section "Changing the size of the …
TylerAPfledderer Mar 30, 2022
4fa943e
fix(code): wrap example in section "Colors" with TableContainer to pr…
TylerAPfledderer Mar 30, 2022
49e99a1
fix(toast): wrap example in section "Custom container styles" with Ta…
TylerAPfledderer Mar 30, 2022
34ef223
fix(tooltip): wrap example in section "Placement" with TableContainer…
TylerAPfledderer Mar 30, 2022
7ddb537
fix(image): wrap example in section "Usage" with TableContainer to pr…
TylerAPfledderer Mar 30, 2022
2ec2365
fix(image): wrap example in section "Size" with TableContainer to pre…
TylerAPfledderer Mar 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 10 additions & 7 deletions pages/docs/components/data-display/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ description:
---

`Code` is a component used to display inline code. It is composed from the
[Box](/docs/components/layout/box) component with a font family of `mono` for displaying
code.
[Box](/docs/components/layout/box) component with a font family of `mono` for
displaying code.

<ComponentLinks
theme={{ componentName: 'code' }}
Expand Down Expand Up @@ -37,11 +37,14 @@ You can change the color scheme of the component by passing the `colorScheme`
prop.

```jsx
<Stack direction='row'>
<Code children='console.log(welcome)' />
<Code colorScheme='red' children="var chakra = 'awesome!'" />
<Code colorScheme='yellow' children='npm install chakra' />
</Stack>
// TableContainer is used as a wrapper to prevent overflow in mobile screens
<TableContainer>
<Stack direction='row'>
<Code children='console.log(welcome)' />
<Code colorScheme='red' children="var chakra = 'awesome!'" />
<Code colorScheme='yellow' children='npm install chakra' />
</Stack>
</TableContainer>
```

## Props
Expand Down
25 changes: 14 additions & 11 deletions pages/docs/components/feedback/toast.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,17 +240,20 @@ function Example() {
// Or via trigger
// Style here will overwrite the entire style above
return (
<Button
onClick={() => {
toast({
containerStyle: {
border: '20px solid red',
},
})
}}
>
Click me to show toast with custom container style.
</Button>
// TableContainer is used as a wrapper to prevent overflow in mobile screens
<TableContainer>
<Button
onClick={() => {
toast({
containerStyle: {
border: '20px solid red',
},
})
}}
>
Click me to show toast with custom container style.
</Button>
</TableContainer>
)
}
```
Expand Down
27 changes: 15 additions & 12 deletions pages/docs/components/form/form-control.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,21 @@ import {
### Sample usage for a radio or checkbox group

```jsx
<FormControl as='fieldset'>
<FormLabel as='legend'>Favorite Naruto Character</FormLabel>
<RadioGroup defaultValue='Itachi'>
<HStack spacing='24px'>
<Radio value='Sasuke'>Sasuke</Radio>
<Radio value='Nagato'>Nagato</Radio>
<Radio value='Itachi'>Itachi</Radio>
<Radio value='Sage of the six Paths'>Sage of the six Paths</Radio>
</HStack>
</RadioGroup>
<FormHelperText>Select only if you're a fan.</FormHelperText>
</FormControl>
// TableContainer is used as a wrapper to prevent overflow in mobile screens
<TableContainer>
<FormControl as='fieldset'>
<FormLabel as='legend'>Favorite Naruto Character</FormLabel>
<RadioGroup defaultValue='Itachi'>
<HStack spacing='24px'>
<Radio value='Sasuke'>Sasuke</Radio>
<Radio value='Nagato'>Nagato</Radio>
<Radio value='Itachi'>Itachi</Radio>
<Radio value='Sage of the six Paths'>Sage of the six Paths</Radio>
</HStack>
</RadioGroup>
<FormHelperText>Select only if you're a fan.</FormHelperText>
</FormControl>
</TableContainer>
```

### Error message
Expand Down
69 changes: 36 additions & 33 deletions pages/docs/components/form/number-input.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,39 +183,42 @@ Like the `Input` component, you can pass the `size` prop to change the size of
the input.

```jsx
<Stack shouldWrapChildren direction='row'>
<NumberInput size='xs' maxW={16} defaultValue={15} min={10}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>

<NumberInput size='sm' maxW={20} defaultValue={15} min={10}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>

<NumberInput size='md' maxW={24} defaultValue={15} min={10}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>

<NumberInput size='lg' maxW={32} defaultValue={15} min={10}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</Stack>
// TableContainer is used as a wrapper to prevent overflow in mobile screens
<TableContainer>
<Stack shouldWrapChildren direction='row'>
<NumberInput size='xs' maxW={16} defaultValue={15} min={10}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>

<NumberInput size='sm' maxW={20} defaultValue={15} min={10}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>

<NumberInput size='md' maxW={24} defaultValue={15} min={10}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>

<NumberInput size='lg' maxW={32} defaultValue={15} min={10}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</Stack>
</TableContainer>
```

### Changing the styles
Expand Down
5 changes: 3 additions & 2 deletions pages/docs/components/layout/flex.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,8 @@ different widths differently.
container and also have equal spacing between them.

```jsx
<Box>
// TableContainer is used as a wrapper to prevent overflow in mobile screens
<TableContainer>
<Text>Flex and Spacer: Full width, equal Spacing</Text>
<Flex>
<Box w='70px' h='10' bg='red.500' />
Expand All @@ -112,7 +113,7 @@ different widths differently.
<Box w='170px' h='10' bg='teal.500' />
<Box w='180px' h='10' bg='teal.500' />
</HStack>
</Box>
</TableContainer>
```

A good use case for `Spacer` is to create a navbar with a signup/login button
Expand Down
42 changes: 24 additions & 18 deletions pages/docs/components/media-and-icons/image.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,31 +27,37 @@ import { Image } from '@chakra-ui/react'
## Usage

```jsx
<Box boxSize='sm'>
<Image src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
</Box>
// TableContainer is used as a wrapper to prevent overflow in mobile screens
<TableContainer>
<Box boxSize='sm'>
<Image src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
</Box>
</TableContainer>
```

## Size

The size of the image can be adjusted using the `boxSize` prop.

```jsx
<Stack direction='row'>
<Image
boxSize='100px'
objectFit='cover'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Image
boxSize='150px'
objectFit='cover'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Image boxSize='200px' src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
</Stack>
// TableContainer is used as a wrapper to prevent overflow in mobile screens
<TableContainer>
<Stack direction='row'>
<Image
boxSize='100px'
objectFit='cover'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Image
boxSize='150px'
objectFit='cover'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Image boxSize='200px' src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
</Stack>
</TableContainer>
```

## Image with border radius
Expand Down
Loading