Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(props): improve parsing of customPropTypes.every() #3185

Merged
merged 4 commits into from
Sep 30, 2018
Merged

docs(props): improve parsing of customPropTypes.every() #3185

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
603be90
docs(Grid): add messages from SUI docs and warning about width prop
layershifter Sep 30, 2018
670ebda
fix(Grid): improve propTypes check for width props
layershifter Sep 30, 2018
841a803
docs(props): improve parsing of customPropTypes.every()
layershifter Sep 30, 2018
984688b
Merge branch 'master' of github.com:Semantic-Org/Semantic-UI-React in…
layershifter Sep 30, 2018
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
Next Next commit
docs(Grid): add messages from SUI docs and warning about width prop
  • Loading branch information
@layershifter
layershifter committed Sep 30, 2018
commit 603be90d10d0324031f4a2c162c0303565177ab9
28 changes: 26 additions & 2 deletions docs/src/examples/collections/Grid/ResponsiveVariations/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react'
import { Icon, Message } from 'semantic-ui-react'

import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
Expand Down Expand Up @@ -45,14 +46,37 @@ const GridResponsiveVariationsExamples = () => (
title='Device Visibility'
description='A column or row can appear only for a specific device, or screen sizes.'
examplePath='collections/Grid/ResponsiveVariations/GridExampleOnly'
/>
>
<Message info>
See SUI Container's{' '}
<a
href='https://semantic-ui.com/elements/container.html'
rel='noopener noreferrer'
target='_blank'
>
documentation <Icon name='external alternate' />
</a>{' '}
for information on breakpoint calculations.
</Message>
</ComponentExample>
<ComponentExample examplePath='collections/Grid/ResponsiveVariations/GridExampleOnlyMultiple' />

<ComponentExample
title='Responsive Width'
description='A column can specify a width for a specific device.'
examplePath='collections/Grid/ResponsiveVariations/GridExampleResponsiveWidth'
/>
>
<Message info>
<p>
It's recommended to use a responsive pattern like <code>doubling</code> or{' '}
<code>stackable</code> to reduce complexity when designing responsively, however in some
circumstances specifying exact widths for screen sizes may be necessary.
</p>
<p>
Responsive width props are not compatible with the <code>width</code> prop.
</p>
</Message>
</ComponentExample>
</ExampleSection>
)

Expand Down