Merge branch 'master' into 3811-icon-tooltip-sync

carbon-design-system · Sep 3, 2019 · 69767de · 69767de
2 parents 8dff5f1 + f98b1f6
commit 69767de
Show file tree

Hide file tree

Showing 30 changed files with 358 additions and 200 deletions.
diff --git a/.yarn/offline-mirror/arch-2.1.1.tgz b/.yarn/offline-mirror/arch-2.1.1.tgz
diff --git a/.yarn/offline-mirror/clipboardy-2.1.0.tgz b/.yarn/offline-mirror/clipboardy-2.1.0.tgz
diff --git a/docs/guides/sass.md b/docs/guides/sass.md
@@ -0,0 +1,126 @@
+# Sass
+
+<!-- prettier-ignore-start -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
+
+- [Overview](#overview)
+- [Global flags](#global-flags)
+- [Feature flags](#feature-flags)
+- [Optimizing your Sass builds](#optimizing-your-sass-builds)
+- [FAQ](#faq)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
+
+## Overview
+
+The `carbon-components` package ships all of the styles for the Carbon Design
+System as Sass files in the `scss` folder. You can import this file directly
+through either of the following paths:
+
+```scss
+# Specifying node_modules directly
+@import 'node_modules/carbon-components/scss/<path-to-file>';
+
+# With webpack
+@import '~carbon-components/scss/<path-to-file>';
+
+# With sass config setup to include `node_modules` in paths
+@import 'carbon-components/scss/<path-to-file>';
+```
+
+There are two folders in this `scss` folder:
+
+- `components`: which contain component-specific styles and mixins
+- `globals`: which contain files that effect global settings like color, type,
+  grid, and more
+
+To quickly get started, you can import `styles.scss` which contains all of the
+styles for the Carbon Design System. You can import this using the following
+path:
+
+```scss
+@import 'carbon-components/scss/globals/scss/styles.scss';
+```
+
+_Note: the `styles.scss` will include all styles for the Carbon Design System,
+even if you are not using all of its components, to learn how to optimize this
+import check out [Optimizing your Sass builds](#optimizing-your-sass-builds)._
+
+If you would like to a see a full overview of the functionality we ship in Sass,
+in particular our public API, you should checkout our published
+[SassDoc](../../packages/components/docs/sass.md).
+
+## Global flags
+
+The Carbon Design System sass setup specifies a number of global flags that you
+can configure before importing Carbon's sass files to enable or disable
+different behaviors. To enable these flags, you will need to set them before
+importing any styles from Carbon. For example:
+
+```scss
+$css--reset: false;
+@import 'carbon-components/scss/globals/scss/styles.scss';
+```
+
+For a full reference of flags, see the table below.
+
+| Global flag       | Description                                                          | Default value |
+| ----------------- | -------------------------------------------------------------------- | ------------- |
+| `$css--font-face` | Includes the font-face mixins for the current font family (IBM Plex) | `true`        |
+| `$css--helpers`   | Includes classes and utilities that are commonly used by components  | `true`        |
+| `$css--body`      | Sets a top-level reset, type style, and color for the `<body>` tag   | `true`        |
+| `$css--use-layer` | Enables use of box-shadow in `layer()` helpers                       | `true`        |
+| `$css--reset`     | Includes a top-level CSS Reset                                       | `true`        |
+
+## Feature flags
+
+The Carbon Design System takes advantage of feature flags to conditionally
+enable or disable new features that are being introduced to the system. To
+configure feature flags, you will need to update the `$feature-flags` map before
+importing any sass files from Carbon. For example:
+
+```scss
+$feature-flags: (
+  grid-columns-16: true,
+);
+@import 'carbon-components/scss/globals/scss/styles.scss';
+```
+
+## Optimizing your Sass builds
+
+If you are looking to optimize the CSS that is output by including the Carbon
+Design System, you can take advantage of the fact that every partial in Carbon's
+package can be compiled independently. Using this feature, you can mirror the
+structure of the default `styles.scss` file to include only the component styles
+that you need.
+
+At a high-level, this would look like:
+
+```scss
+// Your entrypoint for including sass files from Carbon
+$css--font-face: true;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: true;
+$css--default-type: true;
+$css--plex: true;
+
+// Include defaults typically provided through the `styles.scss` entrypoint
+@import 'carbon-components/scss/globals/scss/_css--reset.scss';
+@import 'carbon-components/scss/globals/scss/_css--font-face.scss';
+@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
+@import 'carbon-components/scss/globals/scss/_css--body.scss';
+
+// Optionally include the grid
+@import 'carbon-components/scss/globals/grid/_grid.scss';
+
+// Optionally include components that you need
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/file-uploader/file-uploader';
+```
+
+## FAQ
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -25,6 +25,7 @@
     "@octokit/rest": "^16.28.1",
     "chalk": "^2.4.2",
     "child-process-promise": "^2.2.1",
+    "clipboardy": "^2.1.0",
     "fs-extra": "^8.0.1",
     "inquirer": "^6.4.1",
     "prettier": "^1.18.2",

diff --git a/packages/cli/src/commands/changelog.js b/packages/cli/src/commands/changelog.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright IBM Corp. 2019, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const clipboard = require('clipboardy');
+const { prompt } = require('inquirer');
+const { generate } = require('../changelog');
+const { fetchLatestFromUpstream } = require('../git');
+const { createLogger, displayBanner } = require('../logger');
+const { getPackages } = require('../workspace');
+
+const logger = createLogger('changelog');
+
+/**
+ * Outputs a changelog for the list of packages in a lerna/yarn workspace for
+ * the given tag range. You can specify the range of commits to get the
+ * changelog for by using git tags, or the name of a branch. For example:
+ * v10.5.1..master or v10.5.0..v10.5.1
+ * @returns {void}
+ */
+async function changelog({ range }) {
+  displayBanner();
+
+  logger.start('Fetching latest git information from upstream');
+  await fetchLatestFromUpstream();
+  logger.stop();
+
+  logger.start('Getting a list of all packages in the project');
+  const packages = await getPackages();
+  logger.stop();
+
+  const [lastTag, tag] = range.split('..');
+  logger.start(`Generating a changelog for range: ${range}`);
+  const changelog = await generate(packages, lastTag, tag);
+  logger.stop();
+
+  const { copy } = await prompt([
+    {
+      type: 'confirm',
+      name: 'copy',
+      message: 'Would you like to copy the changelog to your clipboard?',
+    },
+  ]);
+
+  if (copy) {
+    clipboard.writeSync(changelog);
+    // eslint-disable-next-line no-console
+    console.log('Done!');
+  } else {
+    // eslint-disable-next-line no-console
+    console.log(changelog);
+  }
+}
+
+module.exports = {
+  command: 'changelog <range>',
+  desc: 'generate the changelog for the given git tag range',
+  builder(yargs) {
+    yargs.positional('range', {
+      describe: 'the git tag range to generate a changelog for',
+      type: 'string',
+    });
+  },
+  handler: changelog,
+};
diff --git a/packages/cli/src/commands/publish.js b/packages/cli/src/commands/publish.js
@@ -13,6 +13,7 @@ const semver = require('semver');
 const { generate } = require('../changelog');
 const { fetchLatestFromUpstream } = require('../git');
 const { createLogger, displayBanner } = require('../logger');
+const { getPackages } = require('../workspace');
 
 const logger = createLogger('publish');
 // Enqueue tasks to run at the end of the command where we want to "clean-up"
@@ -217,26 +218,6 @@ async function getLastGitTag() {
   return tags[0];
 }
 
-/**
- * Lists the packages for the current project using the `lerna list` command
- * @returns {Array<PackageInfo>}
- */
-async function getPackages() {
-  const { stdout: lernaListOutput } = await execa('yarn', [
-    'lerna',
-    'list',
-    '--json',
-  ]);
-  return JSON.parse(
-    // Clean-up output by stripping out `yarn` information related to the
-    // command and how long it took to run
-    lernaListOutput
-      .split('\n')
-      .slice(2, -1)
-      .join('\n')
-  ).filter(pkg => !pkg.private);
-}
-
 module.exports = {
   command: 'publish <tag>',
   desc:

diff --git a/packages/cli/src/workspace.js b/packages/cli/src/workspace.js
@@ -7,6 +7,7 @@
 
 'use strict';
 
+const execa = require('execa');
 const fs = require('fs-extra');
 const path = require('path');
 const packageJson = require('../../../package.json');
@@ -35,6 +36,27 @@ function workspace(fn) {
   return (...args) => fn(...args, env);
 }
 
+/**
+ * Lists the packages for the current project using the `lerna list` command
+ * @returns {Array<PackageInfo>}
+ */
+async function getPackages() {
+  const { stdout: lernaListOutput } = await execa('yarn', [
+    'lerna',
+    'list',
+    '--json',
+  ]);
+  return JSON.parse(
+    // Clean-up output by stripping out `yarn` information related to the
+    // command and how long it took to run
+    lernaListOutput
+      .split('\n')
+      .slice(2, -1)
+      .join('\n')
+  ).filter(pkg => !pkg.private);
+}
+
 module.exports = {
   workspace,
+  getPackages,
 };
diff --git a/packages/components/src/globals/scss/_css--reset.scss b/packages/components/src/globals/scss/_css--reset.scss
@@ -22,9 +22,9 @@
     font-family: inherit;
     vertical-align: baseline;
 
-    & > *,
-    & > *:before,
-    & > *:after {
+    *,
+    *:before,
+    *:after {
       box-sizing: inherit;
     }
   }

diff --git a/packages/icon-build-helpers/src/check.js b/packages/icon-build-helpers/src/check.js
@@ -18,7 +18,10 @@ const search = require('../src/search');
 // 1) That all icons are present in metadata
 // 2) That all icons have a category
 // 3) If an icon has a size in source, make sure it exists in metadata
-async function check({ categoriesPath, metadataPath, iconsPath }) {
+async function check(
+  { categoriesPath, metadataPath, iconsPath },
+  { shouldCheckSizes = true } = {}
+) {
   const categoriesConfig = yaml.safeLoad(
     await fs.readFile(categoriesPath, 'utf8')
   );
@@ -60,7 +63,10 @@ async function check({ categoriesPath, metadataPath, iconsPath }) {
 
     // If we're dealing with an icon at the root level
     if (variants.length === 0) {
-      if (!Array.isArray(entry.sizes) || !entry.sizes.includes(icon.size)) {
+      if (
+        shouldCheckSizes &&
+        (!Array.isArray(entry.sizes) || !entry.sizes.includes(icon.size))
+      ) {
         missingSizesFromMetadata.push(icon.basename);
         continue;
       }
@@ -108,8 +114,17 @@ async function check({ categoriesPath, metadataPath, iconsPath }) {
 
   const members = [];
   for (const category of categories) {
-    for (const subcategory of category.subcategories) {
-      for (const member of subcategory.members) {
+    if (Array.isArray(category.subcategories)) {
+      for (const subcategory of category.subcategories) {
+        for (const member of subcategory.members) {
+          if (!index.has(member)) {
+            miscategorizedOrMissingIcons.push(member);
+          }
+          members.push(member);
+        }
+      }
+    } else {
+      for (const member of category.members) {
         if (!index.has(member)) {
           miscategorizedOrMissingIcons.push(member);
         }
@@ -146,7 +161,7 @@ const aliasesSchema = Joi.array().items(Joi.string());
 const categorySchema = Joi.array().items(
   Joi.object().keys({
     name: Joi.string().required(),
-    subcategory: Joi.string().required(),
+    subcategory: Joi.string(),
   })
 );
 
@@ -159,7 +174,7 @@ const baseIconSchema = Joi.object().keys({
     Joi.string().only('glyph')
   ),
   aliases: aliasesSchema,
-  categories: categorySchema.required(),
+  categories: categorySchema,
 });
 
 const iconSchema = baseIconSchema.keys({
@@ -173,12 +188,10 @@ const categoriesSchema = Joi.array().items(
   Joi.object().keys({
     name: Joi.string().required(),
     subcategories: Joi.array().items(
-      Joi.object()
-        .keys({
-          name: Joi.string().required(),
-          members: Joi.array().items(Joi.string()),
-        })
-        .required()
+      Joi.object().keys({
+        name: Joi.string().required(),
+        members: Joi.array().items(Joi.string()),
+      })
     ),
   })
 );

diff --git a/packages/icons/svg/32/fog.svg b/packages/icons/svg/32/fog.svg
diff --git a/packages/icons/svg/32/watson-health/iCA-3D.svg b/packages/icons/svg/32/watson-health/iCA-3D.svg
diff --git a/packages/icons/tasks/ci-check.js b/packages/icons/tasks/ci-check.js
@@ -16,4 +16,5 @@ check({
   iconsPath: path.resolve(__dirname, '../svg'),
 }).catch(error => {
   console.error(error);
+  process.exit(1);
 });