From 4b39bdd1c8b4dd07f7a991d37b854f9deb771459 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 27 Feb 2019 17:56:54 -0800 Subject: [PATCH 01/19] chore: fix changelog committers --- CHANGELOG.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b2deb81ad1..2f3126f243 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,8 +13,10 @@ - Remove `postversion` script from `package.json` and update the [PR template](https://github.com/primer/css/blob/master/RELEASING.md#in-this-repo) - Rename InterUI font to "Inter", per [inter v3.3](https://github.com/rsms/inter/releases/tag/v3.3) [#696](https://github.com/primer/css/pull/696) -#### Committers: 2 +#### Committers: 4 - Ash Guillaume ([ashygee](https://github.com/ashygee)) +- David Graham ([dgraham](https://github.com/dgraham)) +- Mu-An Chiou ([muan](https://github.com/muan)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 12.0.1 @@ -27,10 +29,8 @@ ### :house: Internal - Add `postversion` npm script that commits `package.json` and `package-lock.json` with consistent commit messages (`chore: v`) -#### Committers: 4 +#### Committers: 2 - Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends)) -- David Graham ([dgraham](https://github.com/dgraham)) -- Mu-An Chiou ([muan](https://github.com/muan)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 12.0.0 From cd67010fff57b57b9ac61635f6e5379e8b488a61 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 13 Mar 2019 11:44:19 +0900 Subject: [PATCH 02/19] Fix popovers from being cut off --- pages/css/components/popover.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/pages/css/components/popover.md b/pages/css/components/popover.md index bbd6781aa3..e54a739e93 100644 --- a/pages/css/components/popover.md +++ b/pages/css/components/popover.md @@ -51,7 +51,7 @@ Defaults to caret oriented top-center. ```html title="Default (top-center)"
-
+

Popover heading

Message about this particular piece of UI.

@@ -66,7 +66,7 @@ Defaults to caret oriented top-center. ```html title="Large"
-
+

Popover heading

Message about this particular piece of UI.

@@ -94,7 +94,7 @@ Defaults to caret oriented top-center. ### Bottom-right ```html title="Bottom-right" -
+

Popover heading

@@ -109,14 +109,14 @@ Defaults to caret oriented top-center. ### Bottom-left ```html title="Bottom-left" -
+

Popover heading

Message about this particular piece of UI.

+
- ``` ### Left @@ -212,9 +212,9 @@ Defaults to caret oriented top-center. ### Top-left ```html title="Top-left" -
+
-
+

Popover heading

Message about this particular piece of UI.

@@ -227,9 +227,9 @@ Defaults to caret oriented top-center. ### Top-right ```html title="Top-right" -
+
-
+

Popover heading

Message about this particular piece of UI.

@@ -238,4 +238,3 @@ Defaults to caret oriented top-center.
``` - From 30217cf58dfd23b1d5943630a10968f8a95f1617 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 13 Mar 2019 21:00:25 +0900 Subject: [PATCH 03/19] Fix cut off tooltips --- pages/css/components/tooltips.md | 143 ++++++++++++++++--------------- 1 file changed, 75 insertions(+), 68 deletions(-) diff --git a/pages/css/components/tooltips.md b/pages/css/components/tooltips.md index 0e3035bfc0..c1d7ade15b 100644 --- a/pages/css/components/tooltips.md +++ b/pages/css/components/tooltips.md @@ -24,71 +24,75 @@ Before adding a tooltip, please consider: Is this information essential and nece ## Tooltip direction Specify the direction of a tooltip with north, south, east, and west directions: -- `.tooltipped-n` -- `.tooltipped-ne` -- `.tooltipped-e` -- `.tooltipped-se` -- `.tooltipped-s` -- `.tooltipped-sw` -- `.tooltipped-w` -- `.tooltipped-nw` - - ```html - - Tooltip North - - - Tooltip North East - - - Tooltip East - - - Tooltip South East - - - Tooltip South - - - Tooltip South West - - - Tooltip West - - - Tooltip North West - +
+ + tooltipped-nw + + + tooltipped-n + + + tooltipped-ne + +
+
+ + tooltipped-w + + + tooltipped-e + +
+
+ + tooltipped-sw + + + tooltipped-s + + + tooltipped-se + +
``` ## Tooltip alignment -Align tooltips to the left or right of an element, combined with a directional class to specify north or south. +Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented. ```html - - Tooltip North East align left 1 - - - Tooltip North East align left 2 - - - Tooltip South East align left 1 - - - Tooltip South East align left 2 - - - Tooltip North West align right 1 - - - Tooltip North West align right 2 - - - Tooltip South West align right 1 - - - Tooltip South West align right 2 - +
+ + tooltipped-nw tooltipped-align-right-1 + + + tooltipped-ne tooltipped-align-left-1 + +
+
+ + tooltipped-nw tooltipped-align-right-2 + + + tooltipped-ne tooltipped-align-left-2 + +
+
+ + tooltipped-sw tooltipped-align-right-1 + + + tooltipped-se tooltipped-align-left-1 + +
+
+ + tooltipped-sw tooltipped-align-right-2 + + + tooltipped-se tooltipped-align-left-2 + +
``` ## Tooltips with multiple lines @@ -96,18 +100,21 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi ```html - - Tooltip with multiple lines - +
+ + tooltipped-multiline + +
``` -## Tooltips No Delay +## Tooltips with no delay -By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay` +By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this. ```html - - Tooltip no delay - +
+ + tooltipped-no-delay + +
``` - From 3ae46dc9821047ec0194eb99b7766a848c8c0337 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 13 Mar 2019 21:40:17 +0900 Subject: [PATCH 04/19] Fix borders of outline labels They have minus margin that makes the border getting cut off. --- pages/css/components/labels.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/pages/css/components/labels.md b/pages/css/components/labels.md index 3730c86478..b3dc2e26f4 100644 --- a/pages/css/components/labels.md +++ b/pages/css/components/labels.md @@ -57,13 +57,13 @@ Use `Label--orange` to communicate "warning". The orange background color is ver Use `Label--outline` to create a label with gray text, a gray border, and a transparent background. The outline reduces the contrast of this label in combination with filled labels. Use this in contexts where you need it to stand out less than other labels and communicate a neutral message. ```html title="Label outline" -outlined label +outlined label ``` Use `Label--outline-green` in combination with `Label--outline` to communicate a positive message. ```html title="Label outline green" -green outlined label +green outlined label ``` @@ -138,5 +138,3 @@ Counters can also be used in `Box` headers to indicate the number of items in a
``` - - From 5dbf4a6e42b091a21d06aa934245f8e9b5f8639c Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 13 Mar 2019 21:47:11 +0900 Subject: [PATCH 05/19] Fix forms from being cut off --- pages/css/components/forms.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/css/components/forms.md b/pages/css/components/forms.md index 95a2344531..83fb0cf008 100644 --- a/pages/css/components/forms.md +++ b/pages/css/components/forms.md @@ -205,7 +205,7 @@ Use the `.select-sm` class to resize both default and custom ` @@ -256,7 +256,7 @@ You may also add emphasis to the label: Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed. ```html -
+