From 9e8bb23ff546e2b40a213d219b7d8b35e6fefaad Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 26 Mar 2018 13:56:20 -0700 Subject: [PATCH 1/6] splice out Markdown loaders for raw-loader See: https://github.com/primer/primer/issues/463#issuecomment-376301969 --- .storybook/webpack.config.js | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 59c421d1d3..e7cd9da4d0 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,6 +1,6 @@ -const path = require("path"); +const path = require('path'); -const modulesPath = path.resolve(__dirname, "../modules") +const modulesPath = path.resolve(__dirname, '../modules') module.exports = (config, env) => { @@ -9,26 +9,34 @@ module.exports = (config, env) => { .filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin') } - config.module.rules.push( - { - test: /\.md$/, - use: "raw-loader", - }, + const rules = config.module.rules + + rules.forEach((rule, index) => { + if ('README.md'.match(rule.test)) { + console.warn('replacing MD rule:', rule) + rules.splice(index, 1, { + test: /\.md$/, + loader: 'raw-loader', + }) + } + }) + + rules.push( { test: /\.scss$/, loaders: [ - "style-loader", - "css-loader", + 'style-loader', + 'css-loader', { - loader: "postcss-loader", + loader: 'postcss-loader', options: { config: { - path: require.resolve("./postcss.config.js"), + path: require.resolve('./postcss.config.js'), }, }, }, { - loader: "sass-loader", + loader: 'sass-loader', options: { includePaths: [ modulesPath, From d0c95fdffcd85eae397ef2fabb1e8798845ef21b Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 26 Mar 2018 14:01:55 -0700 Subject: [PATCH 2/6] :speak_no_evil: --- .storybook/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index e7cd9da4d0..be4eb6596b 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -13,7 +13,7 @@ module.exports = (config, env) => { rules.forEach((rule, index) => { if ('README.md'.match(rule.test)) { - console.warn('replacing MD rule:', rule) + // console.warn('replacing MD rule:', rule) rules.splice(index, 1, { test: /\.md$/, loader: 'raw-loader', From f94586ddaad4de4fabc3cd19ea7b556f71100906 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 26 Mar 2018 15:05:40 -0700 Subject: [PATCH 3/6] add reference buttons to all popover examples --- modules/primer-popover/README.md | 75 ++++++++++++++++++++------------ 1 file changed, 47 insertions(+), 28 deletions(-) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index a32d5b8570..69d244557e 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -44,7 +44,7 @@ Popovers are used to bring attention to specific user interface elements, typica {:toc} -Popover's consist of: +A popover consist of: - The block element, `.Popover`, which simply positions its content absolutely atop other body content. - The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual "caret." @@ -60,10 +60,14 @@ The `Popover-message` element also supports several modifiers, most of which pos Each of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like: -- `.Popover-message--top-right` - `.Popover-message--right-top` -- `.Popover-message--bottom-left` +- `.Popover-message--top-right` +- `.Popover-message--right-bottom` +- `.Popover-message--bottom-right` - `.Popover-message--left-bottom` +- `.Popover-message--bottom-left` +- `.Popover-message--left-top` +- `.Popover-message--top-left` Lastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px. @@ -138,11 +142,14 @@ Defaults to caret oriented top-center. ### Right-aligned example ```html title="Right" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` @@ -150,11 +157,14 @@ Defaults to caret oriented top-center. ### Left-aligned example ```html title="Left" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` @@ -162,11 +172,14 @@ Defaults to caret oriented top-center. ### Bottom-aligned example ```html title="Bottom" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` @@ -174,11 +187,14 @@ Defaults to caret oriented top-center. ### Bottom-right-aligned example ```html title="Bottom-right" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` @@ -186,11 +202,14 @@ Defaults to caret oriented top-center. ### Bottom-left-aligned example ```html title="Bottom-left" -
-
-

Popover heading

-

Message about this particular piece of UI.

- +
+ +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
``` From 450e1e2b0d8d837c4b90404a1e707e946f59c7d8 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 26 Mar 2018 15:06:01 -0700 Subject: [PATCH 4/6] refactor storiesFromMarkdown() a bit --- .storybook/lib/storiesFromMarkdown.js | 44 ++++++++++++++++----------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/.storybook/lib/storiesFromMarkdown.js b/.storybook/lib/storiesFromMarkdown.js index 564600dfdb..28febca009 100644 --- a/.storybook/lib/storiesFromMarkdown.js +++ b/.storybook/lib/storiesFromMarkdown.js @@ -19,17 +19,22 @@ const railsOcticonToReact = (html) => { return html } -const nodeToStory = (node, file) => { - const html = railsOcticonToReact(node.value) - const element = htmlParser.parse(html) +const parseBlockAttrs = (node, file) => { const pairs = node.lang.replace(/^html\s*/, '') const attrs = pairs.length ? parsePairs(pairs) : {} - const title = attrs.title || getPreviousHeading(node) || - `story @ ${file}:${node.position.start.line}` + attrs.title = attrs.title + || getPreviousHeading(node) + || `story @ ${file}:${node.position.start.line}` + node.block = attrs + return node +} + +const nodeToStory = (node, file) => { + const html = railsOcticonToReact(node.value) + const {title} = node.block return { title, - story: () => element, - attrs, + story: () => htmlParser.parse(html), html, file, node, @@ -44,14 +49,19 @@ const getPreviousHeading = node => { } export default req => { - return req.keys().reduce((stories, file) => { - const content = req(file) - const ast = parents(remark.parse(content)) - const path = file.replace(/^\.\//, '') - return stories.concat( - select(ast, 'code[lang^=html]') - .map(node => nodeToStory(node, path)) - .filter(({attrs}) => attrs.story !== "false") - ) - }, []) + return req.keys() + .filter(file => !file.match(/node_modules/)) + .reduce((stories, file) => { + const content = req(file) + const ast = parents(remark.parse(content)) + const path = file.replace(/^\.\//, '') + return stories.concat( + select(ast, 'code[lang^=html]') + .map(parseBlockAttrs) + .filter(({block}) => block.story !== "false") + .map(node => { + return nodeToStory(node, path) + }) + ) + }, []) } From bf59bd73b77a127920fcdfb4f0428c500bd52e98 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 26 Mar 2018 16:04:40 -0700 Subject: [PATCH 5/6] fix #462 .Popover-message-right-bottom caret --- modules/primer-popover/lib/popover.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss index f732ec7f11..228aff7590 100644 --- a/modules/primer-popover/lib/popover.scss +++ b/modules/primer-popover/lib/popover.scss @@ -108,7 +108,7 @@ } &::before { - margin-top: -9px; + margin-top: -($spacer-2 + 1); } &::after { @@ -164,11 +164,11 @@ } &::before { - bottom: $spacer-4; + bottom: $spacer-3; } &::after { - bottom: 21px; + bottom: $spacer-3 + 1; } } From 595d18238a9df6ac5bed33a5485ac2c94759b262 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 26 Mar 2018 16:05:04 -0700 Subject: [PATCH 6/6] flesh out all popover alignment examples and link to them from descriptions --- modules/primer-popover/README.md | 150 +++++++++++++++++++++---------- 1 file changed, 104 insertions(+), 46 deletions(-) diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index 69d244557e..113e4f80b1 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -53,23 +53,23 @@ In the examples below, `Popover-message`, in particular, uses a handful of utili The `Popover-message` element also supports several modifiers, most of which position the caret differently: -- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered. -- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered. -- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered. -- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered. +- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered. +- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered. +- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered. +- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered. Each of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like: -- `.Popover-message--right-top` -- `.Popover-message--top-right` -- `.Popover-message--right-bottom` -- `.Popover-message--bottom-right` -- `.Popover-message--left-bottom` -- `.Popover-message--bottom-left` -- `.Popover-message--left-top` -- `.Popover-message--top-left` +- [`.Popover-message--bottom-left`](#bottom-left) +- [`.Popover-message--bottom-right`](#bottom-right) +- [`.Popover-message--left-bottom`](#left-bottom) +- [`.Popover-message--left-top`](#left-top) +- [`.Popover-message--right-bottom`](#right-bottom) +- [`.Popover-message--right-top`](#right-top) +- [`.Popover-message--top-left`](#top-left) +- [`.Popover-message--top-right`](#top-right) -Lastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px. +Lastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px. ### Notes @@ -109,28 +109,56 @@ Defaults to caret oriented top-center.
``` -### Top-right-aligned example +### Bottom -```html title="Top-right" -
+```html title="Bottom" +
+
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
-
-
+
+``` + +### Bottom-right + +```html title="Bottom-right" +
+
+

Popover heading

Message about this particular piece of UI.

+
``` -### Top-right-aligned example +### Bottom-left -```html title="Top-left" -
+```html title="Bottom-left" +
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+ +``` + +### Left + +```html title="Left" +
-
-
+
+

Popover heading

Message about this particular piece of UI.

@@ -139,13 +167,13 @@ Defaults to caret oriented top-center.
``` -### Right-aligned example +### Left-bottom -```html title="Right" -
+```html title="Left-bottom" +
-
-
+
+

Popover heading

Message about this particular piece of UI.

@@ -154,13 +182,13 @@ Defaults to caret oriented top-center.
``` -### Left-aligned example +### Left-top -```html title="Left" -
+```html title="Left-top" +
-
-
+
+

Popover heading

Message about this particular piece of UI.

@@ -169,28 +197,58 @@ Defaults to caret oriented top-center.
``` -### Bottom-aligned example +### Right -```html title="Bottom" -
+```html title="Right" +
+
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
-
-
+
+``` + +### Right-bottom + +```html title="Right-bottom" +
+
+

Popover heading

Message about this particular piece of UI.

+
``` -### Bottom-right-aligned example +### Right-top -```html title="Bottom-right" +```html title="Right-top" +
+
+
+

Popover heading

+

Message about this particular piece of UI.

+ +
+
+ +
+``` + +### Top-left + +```html title="Top-left"
-
+

Popover heading

Message about this particular piece of UI.

@@ -199,13 +257,13 @@ Defaults to caret oriented top-center.
``` -### Bottom-left-aligned example +### Top-right -```html title="Bottom-left" -
+```html title="Top-right" +
-
-
+
+

Popover heading

Message about this particular piece of UI.