change style doc and updated style image (#1090)

* change style doc and updated style image * merge Co-authored-by: Lauren Rice <[email protected]> Co-authored-by: Vince Picone <[email protected]>
carbon-design-system · Apr 6, 2020 · a4a1b66 · a4a1b66 · vercel · Apr 6, 2020
1 parent 4f68ad7
commit a4a1b66
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 42 deletions.
diff --git a/.github/ISSUE_TEMPLATE/accessibility-issue.md b/.github/ISSUE_TEMPLATE/accessibility-issue.md
@@ -1,9 +1,9 @@
 ---
 name: Accessibility issue ♿
 about: Report an accessibility or usability issue
-title: ''
-labels: 'type: a11y ♿'
-assignees: ''
+title: ""
+labels: "type: a11y ♿"
+assignees: ""
 ---
 
 <!-- Feel free to remove sections that aren't relevant.

diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -1,9 +1,9 @@
 ---
-name: 'Bug report 🐛'
+name: "Bug report 🐛"
 about: Create a report to help us improve
-title: ''
-labels: 'type: bug 🐛'
-assignees: ''
+title: ""
+labels: "type: bug 🐛"
+assignees: ""
 ---
 
 <!-- Feel free to remove sections that aren't relevant.

diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md
@@ -1,9 +1,9 @@
 ---
-name: 'Feature request 💡'
+name: "Feature request 💡"
 about: Suggest an idea for this project
-title: ''
-labels: 'type: enhancement 💡'
-assignees: ''
+title: ""
+labels: "type: enhancement 💡"
+assignees: ""
 ---
 
 Use this template if you want to request a new feature, or a change to an existing feature.

diff --git a/.github/ISSUE_TEMPLATE/feedback.md b/.github/ISSUE_TEMPLATE/feedback.md
@@ -1,8 +1,8 @@
 ---
 name: Website feedback
 about: User feedback collected from the Carbon Design System Website.
-labels: 'type: discussion 💬'
-assignees: ''
+labels: "type: discussion 💬"
+assignees: ""
 ---
 
 <!--

diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
@@ -1,9 +1,9 @@
 ---
 name: Question ❓
 about: Usage question or discussion about the Carbon Design System Website.
-title: ''
-labels: 'type: question ❓'
-assignees: ''
+title: ""
+labels: "type: question ❓"
+assignees: ""
 ---
 
 <!--

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -1,14 +1,12 @@
 {
-  // See https://go.microsoft.com/fwlink/?LinkId=733558 
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
   // for the documentation about the tasks.json format
   "version": "2.0.0",
   "tasks": [
     {
       "type": "npm",
       "script": "lint:js",
-      "problemMatcher": [
-        "$eslint-stylish"
-      ]
+      "problemMatcher": ["$eslint-stylish"]
     }
   ]
-}
+}
diff --git a/plugins/gatsby-theme-carbon-svgs/components/shared/SvgLibrary.module.scss b/plugins/gatsby-theme-carbon-svgs/components/shared/SvgLibrary.module.scss
@@ -11,11 +11,11 @@
   flex-direction: column;
   align-items: center;
   position: sticky;
-  z-index: z('dropdown');
+  z-index: z("dropdown");
   top: 7rem;
   border-bottom: 1px solid $ui-03;
   transition: box-shadow $duration--fast-02 ease;
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     align-items: flex-end;
     flex-direction: row;
   }
@@ -26,26 +26,26 @@
 }
 
 .filter-row :global(.bx--search) {
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     width: calc(50% + 1px);
     border-right: 1px solid $ui-03;
   }
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     width: calc(66.666% + 1px);
     border-right: 1px solid $ui-03;
   }
 }
 
 .filter-row.pictograms :global(.bx--search) {
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     width: calc(75% + 1px);
   }
 }
 
 .filter-row::before {
-  content: '';
+  content: "";
   position: absolute;
-  z-index: z('dropdown');
+  z-index: z("dropdown");
   height: 1rem;
   width: 100%;
   top: -1rem;
@@ -54,15 +54,15 @@
 
 .filter-row :global(.bx--search-input) {
   border-bottom: 1px solid $ui-03;
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     border-bottom: none;
   }
 }
 
 .filter-row :global(.bx--list-box__menu) {
   background-color: $ui-background;
   max-height: 220px; // 4.5 x result height to demonstrate scrollability
-  z-index: z('dropdown');
+  z-index: z("dropdown");
 }
 
 // menu item height
@@ -74,15 +74,15 @@
   height: 3rem;
   display: flex;
   align-items: center;
-  @include carbon--type-style('body-short-02');
+  @include carbon--type-style("body-short-02");
   padding: 0;
 }
 
 .filter-row :global(.bx--dropdown__wrapper) {
   flex-grow: 1;
   width: 100%;
   height: 3rem;
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     width: auto;
   }
 }
@@ -99,14 +99,14 @@
 }
 
 .filter-row :global(.bx--list-box__label) {
-  @include carbon--type-style('body-short-02');
+  @include carbon--type-style("body-short-02");
   position: relative;
   top: 1px;
 }
 
 .svg-library {
   overflow: hidden;
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     overflow: visible;
   }
 }
@@ -129,11 +129,11 @@
   width: 100%;
   grid-template-columns: repeat(2, 1fr);
 
-  @include carbon--breakpoint('md') {
+  @include carbon--breakpoint("md") {
     grid-template-columns: repeat(4, 1fr);
   }
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     grid-template-columns: repeat(6, 1fr);
   }
 }
@@ -162,7 +162,7 @@ $svg-card-border: 1px solid $ui-03;
   }
 }
 
-@include carbon--breakpoint('md') {
+@include carbon--breakpoint("md") {
   .svg-card {
     // reset 2 column borders
     &:nth-child(-n + 2) {
@@ -183,7 +183,7 @@ $svg-card-border: 1px solid $ui-03;
   }
 }
 
-@include carbon--breakpoint('lg') {
+@include carbon--breakpoint("lg") {
   .svg-card {
     // reset 4 column borders
     &:nth-child(-n + 4) {
@@ -208,7 +208,7 @@ $svg-card-border: 1px solid $ui-03;
 .svg-grid.pictograms {
   grid-template-columns: repeat(2, 1fr);
 
-  @include carbon--breakpoint('lg') {
+  @include carbon--breakpoint("lg") {
     grid-template-columns: repeat(4, 1fr);
   }
 }
@@ -235,7 +235,7 @@ $svg-card-border: 1px solid $ui-03;
   }
 }
 
-@include carbon--breakpoint('lg') {
+@include carbon--breakpoint("lg") {
   .pictograms .svg-card {
     // reset 4 column borders
     &:nth-child(odd) {
@@ -290,7 +290,7 @@ $svg-card-border: 1px solid $ui-03;
 }
 
 .svg-card .trigger-text {
-  @include carbon--type-style('label-01');
+  @include carbon--type-style("label-01");
   color: $text-01;
   top: $spacing-04;
   left: $spacing-05;

diff --git a/src/pages/components/tabs/images/tab-style-1.png b/src/pages/components/tabs/images/tab-style-1.png
diff --git a/src/pages/components/tabs/style.mdx b/src/pages/components/tabs/style.mdx
@@ -37,7 +37,7 @@ Tab label should be set in sentence case, and should not exceed three words.
 | `.bx--tabs__nav-item` | border-bottom               | 2px      | –             |
 | `.bx--tabs__nav-link` | padding-left, padding-right | 16 / 1   | `$spacing-05` |
 | `.bx--tabs__nav-link` | padding-top, padding-bottom | 8 / 0.5  | `$spacing-03` |
-| `bx--tabs__nav-item`  | margin-left                 | 2px      | `$spacing-01` |
+| `bx--tabs__nav-item`  | margin-left                 | 1px      | -             |
 
 <div className="image--fixed">