Merge branch 'master' into 1835-tile

docs/style.md

@@ -0,0 +1,143 @@
+<!-- alex disable hooks -->
+
+<!--
+Inspired by Uber's Go Style Guide:
+https://github.com/uber-go/guide/blob/85bf203f4371a8ae9e5e9a4d52ea77b17ca04ae6/style.md
+
+Editing this document:
+
+- Update the table of contents as new sections are added or removed. You can use
+  `yarn doctoc docs/style.md` to accomplish this
+- Use tables for side-by-side code samples. See below.
+
+Code Samples:
+
+Use 2 spaces to indent. Horizontal real estate is important in side-by-side
+samples.
+
+For side-by-side code samples, use the following snippet.
+
+~~~
+<table>
+<thead><tr><th>Unpreferred</th><th>Preferred</th></tr></thead>
+<tbody>
+<tr><td>
+
+```jsx
+UNPREFERRED CODE GOES HERE
+```
+
+</td><td>
+
+```jsx
+PREFERRED CODE GOES HERE
+```
+
+</td></tr>
+</tbody></table>
+~~~
+
+(You need the empty lines between the <td> and code samples for it to be
+treated as Markdown.)
+
+If you need to add labels or descriptions below the code samples, add another
+row before the </tbody></table> line.
+
+~~~
+<tr>
+<td>DESCRIBE UNPREFERRED CODE</td>
+<td>DESCRIBE PREFERRED CODE</td>
+</tr>
+~~~
+
+-->
+
+# Carbon Style Guide
+
+<!-- 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
+
+- [Introduction](#introduction)
+- [React](#react)
+  - [Guidelines](#guidelines)
+    - [Writing a component](#writing-a-component)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
+
+## Introduction
+
+This guide covers how we prefer to write code for the Carbon Design System. As a
+result, this document will evolve and change over time as we explore new
+concepts, learn from our mistakes, and grow the number of languages that we
+target or support as a design system.
+
+Guidelines or practices outlined in this document are meant to help us as a
+group build stable and reliable sofware. What this means to the developer may
+change depending on the environment in which one writes code.
+
+At the end of the day, we as a group hold the following values about writing
+code:
+
+- No abstraction is better than the wrong abstraction
+- Prefer learning patterns over libraries or frameworks
+- Prefer few abstractions and lots of repetition
+- When creating abstractions, only fix or update code if repetition or patterns
+  lead to bugs. Make sure the abstraction is worth its weight
+
+_Inspired by
+[Minimal API Surface Area](https://www.youtube.com/watch?v=4anAwXYqLG8)_
+
+## React
+
+### Guidelines
+
+#### Writing a component
+
+In general, we prefer to author components using functions instead of classes.
+This means that we take advantage of built-in and custom
+[hooks](https://reactjs.org/docs/hooks-intro.html) to provide state-based
+behavior inside of a component.
+
+At a high-level, the structure of a component will mirror the following:
+
+```jsx
+import PropTypes from 'prop-types';
+import React, { useState, useEffect } from 'react';
+
+function MyComponent({
+  // Prefer default argument values to `defaultProps`
+  initialValue = 0,
+}) {
+  // State-related behavior
+  const [state, setState] = useState(initialValue);
+  // Constants and other variables
+  const value = 1;
+
+  // Handlers
+  function onClick() {
+    // ...
+  }
+
+  // Effects
+  useEffect(() => {
+    // ...
+  }, []);
+
+  // Output
+  return <button onClick={onClick}>Output</button>;
+}
+
+MyComponent.propTypes = {
+  /**
+   * Description of what this prop is for
+   */
+  initialValue: PropTypes.number,
+};
+```
+
+_Note: not every component will mirror the structure above. Some will need to
+incorporate `useEffect`, some will not. You can think of the outline above as
+slots that you can fill if you need this functionality in a component._

packages/components/demo/scss/_page.scss

@@ -95,10 +95,6 @@ td {
       @include type-style('productive-heading-01');
       font-weight: 300;
       line-height: 1.25;
-
-      &#helvetica-neue-light {
-        font-weight: 300;
-      }
     }
 
     h2 {

packages/components/docs/sass.md

@@ -19614,6 +19614,7 @@ Pagination styles
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input--inline__wrapper {
+    display: flex;
     height: 100%;
   }
 

packages/components/src/components/data-table/data-table.config.js

@@ -221,7 +221,7 @@ const rows = [
     secondaryText: 'Secondary Text',
     port: '80',
     rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups Testing a really long text here",
+    attachedGroups: 'Maureen’s VM Groups Testing a really long text here',
     status: 'Active',
     menu: {
       label: 'Overflow menu description',
@@ -242,7 +242,7 @@ const rows = [
     secondaryText: 'Secondary Text',
     port: '80',
     rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
+    attachedGroups: 'Maureen’s VM Groups',
     status: 'Active',
     menu: {
       label: 'Overflow menu description',
@@ -262,7 +262,7 @@ const rows = [
     protocol: 'HTTP',
     port: '80',
     rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
+    attachedGroups: 'Maureen’s VM Groups',
     status: 'Active',
     menu: {
       label: 'Overflow menu description',
@@ -282,7 +282,7 @@ const rows = [
     protocol: 'HTTP',
     port: '80',
     rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
+    attachedGroups: 'Maureen’s VM Groups',
     status: 'Active',
     menu: {
       label: 'Overflow menu description',
@@ -302,7 +302,7 @@ const rows = [
     protocol: 'HTTP',
     port: '80',
     rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
+    attachedGroups: 'Maureen’s VM Groups',
     status: 'Active',
     menu: {
       label: 'Overflow menu description',
@@ -329,7 +329,7 @@ const rowsExpandable = [
     protocol: 'HTTP',
     port: '80',
     rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
+    attachedGroups: 'Maureen’s VM Groups',
     status: 'Active',
   },
   {
@@ -348,7 +348,7 @@ const rowsExpandable = [
     protocol: 'HTTP',
     port: '80',
     rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
+    attachedGroups: 'Maureen’s VM Groups',
     status: 'Active',
   },
 ];

packages/components/src/components/modal/modal.config.js

@@ -12,6 +12,7 @@ const { prefix } = require('../../globals/js/settings');
 module.exports = {
   context: {
     prefix,
+    hasBody: true,
   },
   variants: [
     {
@@ -120,6 +121,62 @@ module.exports = {
         size: 'lg',
       },
     },
+    {
+      name: 'titleonly-xs',
+      label: 'Title Only Modal (XS)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasBody: false,
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'xs',
+      },
+    },
+    {
+      name: 'titleonly-sm',
+      label: 'Title Only Modal (Small)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasBody: false,
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'sm',
+      },
+    },
+    {
+      name: 'titleonly-nofooter-xs',
+      label: 'Title Only Passive Modal (XS)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasBody: false,
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'xs',
+      },
+    },
+    {
+      name: 'titleonly-nofooter-sm',
+      label: 'Title Only Passive Modal (Small)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasBody: false,
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'sm',
+      },
+    },
     {
       name: 'danger',
       label: 'Danger Modal',

packages/components/src/components/modal/modal.hbs

@@ -13,7 +13,7 @@
   <div class="{{@root.prefix}}--modal-container{{#if size}} {{@root.prefix}}--modal-container--{{size}}{{/if}}">
     <div class="{{@root.prefix}}--modal-header">
       <p class="{{@root.prefix}}--modal-header__label {{@root.prefix}}--type-delta" id="modal-{{idSuffix}}-label">Optional label</p>
-      <p class="{{@root.prefix}}--modal-header__heading {{@root.prefix}}--type-beta" id="modal-{{idSuffix}}-heading">Modal heading</p>
+      <p class="{{@root.prefix}}--modal-header__heading {{@root.prefix}}--type-beta" id="modal-{{idSuffix}}-heading">{{#if hasBody}}Modal heading{{else}}Passive modal title as the message. Should be direct and 3 lines or less.{{/if}}</p>
       <button class="{{@root.prefix}}--modal-close" type="button" data-modal-close aria-label="close modal" {{#unless hasFooter}} data-modal-primary-focus{{/unless}}>
         {{ carbon-icon 'Close16' class=(add @root.prefix '--modal-close__icon') }}
       </button>
@@ -28,7 +28,7 @@
         <input id="text-input-{{idSuffix}}" type="text" class="{{@root.prefix}}--text-input" placeholder="Optional placeholder text"
           data-modal-primary-focus>
       </div>
-      {{else}}
+      {{else if hasBody}}
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
         vitae
         tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla

packages/components/src/components/pagination/_pagination.scss

@@ -43,6 +43,7 @@ $css--helpers: true;
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input--inline__wrapper {
+    display: flex;
     height: 100%;
   }
 

packages/components/src/globals/scss/__tests__/css--font-face-test.js

@@ -24,22 +24,6 @@ $css--font-face: false;
     expect(result.css.toString()).toMatchSnapshot();
   });
 
-  it('should output helvetica if $css--font-face is true and $css--plex is false', async () => {
-    const { result } = await render(`
-$css--reset: false;
-$css--font-face: true;
-$css--plex: false;
-@import '../css--font-face';
-`);
-
-    expect(result.css.toString()).toEqual(
-      expect.stringContaining('@font-face')
-    );
-    expect(result.css.toString()).toEqual(
-      expect.stringContaining(`font-family: 'IBM Helvetica'`)
-    );
-  });
-
   describe('experimental', () => {
     it('should output @font-face blocks from elements if components-x flag is enabled', async () => {
       const { result } = await render(`