Commit 354f9ffd authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

Merge branch '25-cssbaseline-add-overflow-feature' into 'master'

Resolve "[CssBaseline] Add "overflow" feature"

Closes #25

See merge request !8
parents e9b4946d 91f71a38
Pipeline #1515 passed with stage
in 48 seconds
......@@ -14,6 +14,7 @@
### New features
- **[CssBaseline]** Add "cursor" feature (!7 by @chapa)
- **[CssBaseline]** Add "overflow" feature (!8 by @chapa)
- **[CssBaseline]** Add "text" feature (!6 by @chapa)
## v1.2.0 (August 27, 2019) and below
......
......@@ -21,7 +21,15 @@ const components = Object.assign(
*/
const CssBaseline = props => {
const {
features = ['color', 'cursor', 'reboot', 'spacing', 'text', 'typography']
features = [
'color',
'cursor',
'overflow',
'reboot',
'spacing',
'text',
'typography'
]
} = props;
return (
......@@ -49,6 +57,7 @@ CssBaseline.propTypes = {
PropTypes.oneOf([
'color',
'cursor',
'overflow',
'reboot',
'spacing',
'text',
......
export { default as color } from './CssBaseline.styles.color';
export { default as cursor } from './CssBaseline.styles.cursor';
export { default as overflow } from './CssBaseline.styles.overflow';
export { default as reboot } from './CssBaseline.styles.reboot';
export { default as spacing } from './CssBaseline.styles.spacing';
export { default as text } from './CssBaseline.styles.text';
......
const values = ['auto', 'hidden', 'scroll'];
export default () => ({
'@global': Object.assign(
...values.map(value => ({
[`.overflow-${value}`]: { overflow: value },
[`.overflow-x-${value}`]: { overflowX: value },
[`.overflow-y-${value}`]: { overflowY: value }
}))
)
});
import React from 'react';
const Text = () => (
<>
<h3>
Fonctionnalité <em>overflow</em>
</h3>
<p>
Lorsque cette fonctionnalité est activée, les classes présente dans cette
documentation sont disponibles (à quelques différences près, voir
ci-dessous) :{' '}
<a href='https://getbootstrap.com/docs/4.3/utilities/overflow/'>
https://getbootstrap.com/docs/4.3/utilities/overflow/
</a>
</p>
<h5>Différences à noter</h5>
<p>Les classes suivantes ont été ajoutées :</p>
<ul>
<li>
<code>.overflow-x-auto</code>
</li>
<li>
<code>.overflow-y-auto</code>
</li>
<li>
<code>.overflow-x-hidden</code>
</li>
<li>
<code>.overflow-y-hidden</code>
</li>
<li>
<code>.overflow-scroll</code>
</li>
<li>
<code>.overflow-x-scroll</code>
</li>
<li>
<code>.overflow-y-scroll</code>
</li>
</ul>
</>
);
export default Text;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment