Skip to content

Commit

Permalink
fix: paragraph width / math (#374)
Browse files Browse the repository at this point in the history
* fix: paragraph width / math

* chore: remove test styles and fix broken image on demo page

* fix: right padding should be 16 not 32

* fix: aside demo html

* fix: offset for aside column

* chore: update paragraph row class

* fix: aside
  • Loading branch information
alisonjoseph authored and vpicone committed Aug 28, 2019
1 parent cc20511 commit 3131d40
Showing 5 changed files with 58 additions and 23 deletions.
12 changes: 5 additions & 7 deletions packages/example/src/pages/components/Aside.mdx
Original file line number Diff line number Diff line change
@@ -6,14 +6,14 @@ title: Aside

The `<Aside>` component is a wrapper component that adds styling to make the text display smaller than the default body text; using `body-long-01` and adds the correct top border styles.

It should only be used within a `<Column>` component with specific parameters. `<Column colMd={2} colLg={3} offsetMd={1} noGutterSm>`
It should only be used within a `<Column>` component with specific parameters. `<Column colMd={2} colLg={3} offsetMd={1}>`

</PageDescription>

## Example

<Row>
<Column colMd={5} colLg={7}>
<Column colMd={5} colLg={8}>

It is more important than ever that we own our own ethos, make palpable our brand values, and incorporate an instantly identifiable IBMness in everything we do.

@@ -24,7 +24,7 @@ It is more important than ever that we own our own ethos, make palpable our bran
Aesthetic is defined as the philosophical theory or set of principles governing outward appearance or actions.

</Column>
<Column colMd={2} colLg={3} offsetMd={1} noGutterSm>
<Column colMd={3} colLg={3}>
<Aside>

**Good design is always good design.**
@@ -39,11 +39,9 @@ What we borrow from our own design history is not a mid-century aesthetic in sty
## Code

```jsx path=components/Aside/Aside.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Aside
<Column colMd={2} colLg={3} offsetMd={1} noGutterSm>
<Column colMd={2} colLg={3} offsetMd={1}>
<Aside>
**Good design is always good design.**

What we borrow from our own design
**Good design is always good design.** What we borrow from our own design
history is not a mid-century aesthetic in stylistic terms, but the modernist
attitudes and approach used at the time.
</Aside>
32 changes: 29 additions & 3 deletions packages/example/src/pages/demo/index.mdx
Original file line number Diff line number Diff line change
@@ -16,7 +16,33 @@ This page is meant to demonstrate some of the components in action. You can chec
</AnchorLinks>

<Row>
<Column colMd={5} colLg={7}>
<Column colMd={4} colLg={4}>

![Grid Example](../components/images/Article_05.png)

</Column>
<Column colMd={4} colLg={4}>

![Grid Example](../components/images/Article_05.png)

</Column>
<Column colMd={4} colLg={4}>

![Grid Example](../components/images/Article_05.png)

</Column>
</Row>

<PageDescription>

Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.

</PageDescription>

Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.

<Row>
<Column colMd={5} colLg={8}>

Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.

@@ -26,7 +52,7 @@ Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pin
IBMers believe in progress—that application of intelligence, reason and science can improve business, society and the human condition.

</Column>
<Column colMd={2} colLg={3} offsetLg={1} offsetMd={1} noGutterSm>
<Column colMd={2} colLg={3} offsetMd={1}>
<Aside>

<p><strong>Good design is always<br />good design.</strong></p>
@@ -66,7 +92,7 @@ Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pin

## Images

![Large blocky illustration](../images/large-image.png)
![Large blocky illustration](../../images/large-image.png)

## Videos

Original file line number Diff line number Diff line change
@@ -3,7 +3,10 @@
position: relative;
padding-top: $spacing-04;
top: -$spacing-04;
padding-right: 26%; //spacing values came from IDL site design

@include carbon--breakpoint('lg') {
padding-right: 26%; //spacing values came from IDL site design
}
}

.aside:before {
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
//---------------------------------------
// P
//---------------------------------------
.paragraph-row {
margin-bottom: $spacing-06;
}

.paragraph {
@include carbon--type-style('body-long-02');
margin-bottom: $spacing-06;

@include carbon--breakpoint('md') {
padding-right: $spacing-07;
padding-right: $spacing-05;
}
}

// Responsive by default
.paragraph--responsive {
margin-left: -$spacing-05;
padding-left: $spacing-05;

// 8 col
@@ -21,12 +23,13 @@
}
}

// If paragraph is inside a user specified row then allow the grid code to set the width
:global(.#{$prefix}--row) .paragraph {
// If paragraph is inside a user specified row then allow the grid code to set the width and padding
:global(.#{$prefix}--row .#{$prefix}--row) .paragraph {
width: 100%;
padding-left: 0;

@include carbon--breakpoint('md') {
padding-right: $spacing-07;
padding-right: 0;
}
}

@@ -113,8 +116,6 @@

// If quote is inside a user specified row then allow the grid code to set the width
:global(.#{$prefix}--row) .blockquote .paragraph {
padding-right: 0;

@include carbon--breakpoint('md') {
width: 100%;
}
15 changes: 11 additions & 4 deletions packages/gatsby-theme-carbon/src/components/markdown/P.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Row } from '../Grid';

import { paragraph, paragraphResponsive } from './Markdown.module.scss';
import {
paragraph,
paragraphResponsive,
paragraphRow,
} from './Markdown.module.scss';

export default class P extends React.Component {
static propTypes = {
@@ -28,9 +33,11 @@ export default class P extends React.Component {
});

return (
<p className={paragraphClasses} {...rest}>
{children}
</p>
<Row className={paragraphRow}>
<p className={paragraphClasses} {...rest}>
{children}
</p>
</Row>
);
}
}

1 comment on commit 3131d40

@vercel
Copy link

@vercel vercel bot commented on 3131d40 Aug 28, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.