feat: introduce V9 (#825)

* feat(inputs): fixed old pr and added inputs and colors work (#756) * feat(inputs): fixed old pr and added inputs and colors work * feat(inputs): fixed inline select * chore(devenv): introduced parameterized demo HTML (#579) * feat(code-snippet): Add new Code snippet variation and styles (#761) * feat(code-snippet): Update code snippet styles and names * feat(code-snippet): Update font size * chore: cleanup html files * feat(code-snippet): Update feedback copy tooltip to match new styles * chore: cleanup javascript * feat(code-snippet): Update copy tooltip styles * chore: cleanup js * feat(code-snippet): Update click event to only happen on button * chore: Add back support for deprecated class names * feat(code-snippet): Update tooltip styles and positioning * fix: update tooltip positioning for inline snippet * V9 merge 05162018 (#773) * fix(data-table-v2): fix the icon that becomes small when column header wraps, resolves #720 (#742) * fix(tooltip): Firefox overflowing text when you have a long enough string without spaces (#737) * feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme (#746) * feat(dropdown): added inline dropdown * feat(dropdown): fixed js * docs(components): add component model explainer (#739) * fix(grid): center grid at largest breakpoint (#747) * fix(letter-spacing): Remove letter-spacing (#748) * fix(letter-spacing): remove letter-spacing across the board * fix(letter-spacing): change hard-coded letter-spacing values to use the mixin * fix(select): added disabled styling to option in select (#751) * fix(select): added disabled styling to select item * fix(select): removed disabled * fix(select): added cursor not allowed * fix(dropdown): added tabindex logic to dropdown (#749) * fix(input): remove red focus ring when input marked as required firefox (#750) * fix(multi-select): fixed width and hover color (#752) * feat(Skeleton-states): Add skeleton state styles (#713) * feat(skeleton): Add skeleton loading mixin and styles * feat(skeleton): Add skeleton icon styles * feat(skeleton): Add skeleton styles to components * feat(skeleton): Add structured list skeleton * feat: skeleton styles * feat: add skeleton demo html * feat: update skeleton html * feat(skeleton-states): Update accordion skeleton styles * feat(skeleton-states): Update accordion * chore: Update px to rem * chore: remove duplicate code * chore: Add correct color value for skeleton state * feat(skeleton-states): Update data table * fix(skeleton-states): Add helper-mixins import to components using skeleton states (#755) * fix(data-table): update data-table to use the new search component (#754) * fix(structured-list): Update header alignment to bottom to match designs (#753) * feat(truncation): add truncation classes (#757) * feat(truncation): add truncation classes * fix(truncation): update truncation classes to be more semantic * fix(truncation): use prefix variable * fix(structured-list): fixed column header text size (#766) * fix(structured-list): fixed column header text size * chore(structured-list): deleted extra file * fix(forms): Add helper-mixins import (#767) * fix(helper-classes): import vars file (#768) * fix(code-snippet): Update templates (#779) * fix(code-snippet): Update skeleton state styles * fix: swap code and pre tag nesting order * fix(code-snippet): Update hbs template for code snippet * fix: spelling error * chore: remove old files * chore: move changes from PR 774 to this * fix: Update click event to run on button * fix(pagination): bring v2 version back (#782) * chore(devenv): fix full-render demo (#783) * V9 merge 05182018 (#785) * feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme (#746) * feat(dropdown): added inline dropdown * feat(dropdown): fixed js * fix(letter-spacing): Remove letter-spacing (#748) * fix(letter-spacing): remove letter-spacing across the board * fix(letter-spacing): change hard-coded letter-spacing values to use the mixin * fix(dropdown): added tabindex logic to dropdown (#749) * feat(Skeleton-states): Add skeleton state styles (#713) * feat(skeleton): Add skeleton loading mixin and styles * feat(skeleton): Add skeleton icon styles * feat(skeleton): Add skeleton styles to components * feat(skeleton): Add structured list skeleton * feat: skeleton styles * feat: add skeleton demo html * feat: update skeleton html * feat(skeleton-states): Update accordion skeleton styles * feat(skeleton-states): Update accordion * chore: Update px to rem * chore: remove duplicate code * chore: Add correct color value for skeleton state * feat(skeleton-states): Update data table * fix(font-face): bring missing $css--font-face reference back (#778) Fixes #777. * chore(devenv): update variant labels (#784) * chore(devenv): update variant labels * chore(devenv): modal config update * feat(tooltip): add definition tooltip (#714) * feat(tooltip): add definition tooltip * feat(tooltip): add on click tooltip * chore(tooltip): simple info tooltip * fix(tooltip): fix arrowhead 1 pixel * chore(tooltip): add v2 of tooltip in seperate folder * chore(tooltip): add previous version of tooltip * chore(tooltip): add files to globals * fix(tooltip): fix simple tooltip class name * chore(tooltip): add definition tooltip to readme * chore(tooltip): add tooltip icon * chore(tooltip): change definition tooltip to seperate element * fix(tooltip): fix merge conflict again * chore(tooltip): removed v2 and added new color variables * chore(tooltip): add bold modifier * chore(tooltip): updated migration to v9 and readme files * chore(tooltip): add focus to definition * chore(tooltip): remove tab * fix(tooltip): added accessibility aria tags * chore(tooltip): change arrow to be a dom element * chore(tooltip): change aria label location * chore(tooltip): attribute name change * chore(files): remove yarn-error.log (#800) * chore(package): remove npm5 lockfile and add lockfile to gitignore (#803) * V9 merge 05212018 (#801) * feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme (#746) * feat(dropdown): added inline dropdown * feat(dropdown): fixed js * feat(Skeleton-states): Add skeleton state styles (#713) * feat(skeleton): Add skeleton loading mixin and styles * feat(skeleton): Add skeleton icon styles * feat(skeleton): Add skeleton styles to components * feat(skeleton): Add structured list skeleton * feat: skeleton styles * feat: add skeleton demo html * feat: update skeleton html * feat(skeleton-states): Update accordion skeleton styles * feat(skeleton-states): Update accordion * chore: Update px to rem * chore: remove duplicate code * chore: Add correct color value for skeleton state * feat(skeleton-states): Update data table * fix(tile): add check to make sure element exists (#786) * feat(data-table-v2): add inline edit styles for cell (#780) * fix(table): Missing border in firefox (#787) * fix(overflow-menu): added different styles for focus and hover (#788) * fix(overflow-menu): added different styles for focus and hover * fix(overflow-menu): fixed danger hover/focus * fix(data-table-v2): remove left positioning from sort icon (#789) * fix(tile): check if is--expanded is set when tile component is loaded (#791) * fix(danger-button): Add correct hover color for icon (#794) * fix(table): removes selected class from row on cancel click (#793) * chore(git): update gitignore for *.log files (#798) * fix(button): bring back primary danger button * chore(package): update lockfile to remove artifactory references (#808) * Light dropdown styles (#809) * feat(dropdown): Add light variation * feat(list-box): Add light variation * Icon updates (#810) * feat(icons): start updating icons * feat(icons): update more icons * feat(icons): continue icon work * feat(icons): finish up icon updates * fix(overflow): fix hover colors on overflow menu * fix(components): some small fixes for v9 (#812) * 732 search (#811) * chore(search): remove icons from search * fix(search): fix default close button offset * fix(form): fixed button width (#819) * fix(docs): Update Component docs (#815) * chore: Remove button docs ref glyphs * fix(docs): Update component docs * fix(code-snippet): fixed a render issue for the light version (#817) * feat(slider): Light variation (#818) * feat(slider): Add light variation * fix: Fix spelling error in all config files * feat(checkbox): Update checkboxes to match new icon set (#822) * feat(checkbox): Update checkboxes to match new icon set * feat: Update checkbox styles * fix: Add code snippet example skeleton state html (#827) * chore(tooltip): change to lowercase 'label' (#836) * fix(search): close button positioning for custom react search (#835) * fix(radio): Update radio + checkbox border colors (#834) * fix(radio-button): update border color * fix(checkbox): update checkbox colors * fix(icons): Update data table v2 & card icons (#826) * fix(icons): Update data table v2 & card icons * fix: Fix toolbar search icon from being cut off * fix(pagination): update colors (#832) * fix(multi-select): update hover color (#830) * fix(v9): small fixes to components (#838) * fix(v9): small fixes to components * fix(tooltip): align focus on icon with text * fix(multi-select): fix HTML structure of multi select (#840) * fix(pagination): fix text input position in pagination V1 (#841) * fix(tooltip): Definition tooltip positioning fix (#843) * fix(tooltip): update tooltip definition markup * fix: Add back in js positioning * chore: cleanup js comments * fix(tooltips: Tooltip a11y (#846) * fix(tooltip): update tooltip definition markup * fix(tooltip): top positioning * fix: A11y fixes * chore: update html/js/readme * chore: revert js changes. * fix(tooltip): position fix (#848) * fix(icons): update icons, other small fixes (#849) * fix(icons): update icons, other small fixes * fix(icon): add a w * fix(code-snippet): fixed feedback not showing up in firefox (#852) * chore: update dev env to work in IE11 (#853) * chore: remove deprecated components (#855) * fix(components): misc fixes for v9 (#854) * fix(inline-dropdown): removed box-shadow * fix(time-picker): fixed arrow being positioned weird in firefox * fix(code-snippet): banner showing up on ie11 * fix(form): remove margins from bx--form-item (#861) * fix(list-box): removed styles on disabled item (#862) * fix(select): position arrow based on bottom rather than top (#864) BREAKING CHANGE: update to v9
carbon-design-system · Jun 4, 2018 · df65fd9 · df65fd9
1 parent 897b2c1
commit df65fd9
Show file tree

Hide file tree

Showing 246 changed files with 4,735 additions and 5,565 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -15,3 +15,6 @@ tests/coverage
 /html
 /docs/js
 node_modules
+
+# TODO: Upgrade to ESLint4 so we can apply a specific rule (one for CJS code) for below files
+src/**/*.config.js
diff --git a/.gitignore b/.gitignore
@@ -38,3 +38,6 @@ tests/coverage
 
 # a11y testing
 .aat.yml
+
+# Generated by npm@5, but project currently uses Yarn
+package-lock.json
diff --git a/demo/.babelrc b/demo/.babelrc
@@ -11,5 +11,5 @@
     ],
     "react"
   ],
-  "plugins": ["transform-class-properties", "dev-expression"]
+  "plugins": ["transform-class-properties", "transform-object-rest-spread", "dev-expression"]
 }
diff --git a/demo/js/components/CodePage/CodePage.js b/demo/js/components/CodePage/CodePage.js
@@ -4,60 +4,36 @@ import Markdown from 'markdown-it';
 
 import ComponentExample from '../ComponentExample/ComponentExample';
 
-/**
- * @param {ComponentCollection|Component} metadata The component data.
- * @returns {string} The HTML snippet for the component.
- */
-const getContent = metadata => {
-  const { variants = {} } = metadata;
-  const { items = [] } = variants;
-  const variant = items[0];
-  return metadata.content || (variant && variant.content) || '';
-};
-
-/**
- * @param {ComponentCollection|Component} metadata The component data.
- * @returns {Component[]|Variant[]} The data of the component variants.
- */
-const getSubItems = metadata => {
-  if (metadata.isCollection) {
-    return metadata.items;
-  }
-  if (!metadata.isCollated) {
-    return metadata.variants.items;
-  }
-  return [];
-};
-
 /**
  * The page to show the component demo, its code as well as its README.
  */
 const CodePage = ({ metadata, hideViewFullRender }) => {
   const md = new Markdown({ html: true });
-  const subItems = getSubItems(metadata).filter(item => !item.isHidden);
+  const subItems = (metadata.items || []).filter(item => !item.isHidden);
+  /* eslint-disable react/no-danger */
   const componentContent =
     !metadata.isCollection && subItems.length <= 1 ? (
       <ComponentExample
         hideViewFullRender={hideViewFullRender}
         component={metadata.name}
-        htmlFile={getContent(metadata)}
+        htmlFile={metadata.renderedContent}
         useIframe={metadata.useIframe}
       />
     ) : (
       subItems.map(item => (
         <div key={item.id} className="component-variation">
           <h2 className="component-variation__name">{item.label}</h2>
+          {item.notes && metadata.notes !== item.notes && <p>{item.notes}</p>}
           <ComponentExample
             variant={item.handle.replace(/--default$/, '')}
             component={metadata.name}
-            htmlFile={getContent(item)}
+            htmlFile={item.renderedContent}
             useIframe={metadata.useIframe}
           />
         </div>
       ))
     );
 
-  /* eslint-disable react/no-danger */
   return (
     <div className="page code-page test">
       {componentContent}

diff --git a/demo/js/components/ComponentExample/ComponentExample.js b/demo/js/components/ComponentExample/ComponentExample.js
@@ -134,7 +134,8 @@ class ComponentExample extends Component {
     });
 
     const codepenLink = codepenSlug && `https://codepen.io/team/carbon/full/${codepenSlug}/`;
-    const componentLink = variant ? `/component/${component}/${variant}` : `/component/${component}`;
+    const variantSuffix = (component === variant && '--default') || '';
+    const componentLink = variant ? `/component/${variant}${variantSuffix}` : `/component/${component}`;
 
     const viewFullRender = hideViewFullRender ? null : (
       <Link className="component-example__view-full-render" target="_blank" href={codepenLink || componentLink}>

diff --git a/demo/js/components/RootPage.js b/demo/js/components/RootPage.js
@@ -6,6 +6,67 @@ import SideNav from './SideNav';
 import PageHeader from './PageHeader/PageHeader';
 import SideNavToggle from './SideNavToggle/SideNavToggle';
 
+const checkStatus = response => {
+  if (response.status >= 200 && response.status < 400) {
+    return response;
+  }
+
+  const error = new Error(response.statusText);
+  error.response = response;
+  throw error;
+};
+
+const load = (componentItems, selectedNavItemId) => {
+  const metadata = componentItems && componentItems.find(item => item.id === selectedNavItemId);
+  const subItems = metadata.items || [];
+  const hasRenderedContent =
+    !metadata.isCollection && subItems.length <= 1 ? metadata.renderedContent : subItems.every(item => item.renderedContent);
+  if (!hasRenderedContent) {
+    return fetch(`/code/${metadata.name}`)
+      .then(checkStatus)
+      .then(response => {
+        const contentType = response.headers.get('content-type');
+        return contentType && contentType.includes('application/json') ? response.json() : response.text();
+      })
+      .then(responseContent => {
+        if (Object(responseContent) === responseContent) {
+          return componentItems.map(item => {
+            if (item.id !== selectedNavItemId) {
+              return item;
+            }
+            return !item.items
+              ? {
+                  ...item,
+                  renderedContent: responseContent[`${item.handle}--default`],
+                }
+              : {
+                  ...item,
+                  items: item.items.map(
+                    subItem =>
+                      !responseContent[subItem.handle]
+                        ? subItem
+                        : {
+                            ...subItem,
+                            renderedContent: responseContent[subItem.handle],
+                          }
+                  ),
+                };
+          });
+        }
+        return componentItems.map(
+          item =>
+            item.id !== selectedNavItemId
+              ? item
+              : {
+                  ...item,
+                  renderedContent: responseContent,
+                }
+        );
+      });
+  }
+  return Promise.resolve(null);
+};
+
 /**
  * The top-most React component for dev env page.
  */
@@ -22,9 +83,19 @@ class RootPage extends Component {
     docItems: PropTypes.arrayOf(PropTypes.shape()).isRequired, // eslint-disable-line react/no-unused-prop-types
   };
 
-  constructor() {
+  constructor(props) {
     super();
-    this.state = {};
+
+    const { componentItems } = props;
+
+    this.state = {
+      /**
+       * The array of component data.
+       * @type {Object[]}
+       */
+      componentItems,
+    };
+
     window.addEventListener('popstate', evt => {
       this.switchTo(evt.state.name);
     });
@@ -42,6 +113,13 @@ class RootPage extends Component {
     }
   }
 
+  componentWillReceiveProps(props) {
+    const { componentItems } = props;
+    if (this.props.componentItems !== componentItems) {
+      this.setState({ componentItems });
+    }
+  }
+
   /**
    * The handler for changing in the state of side nav's toggle button.
    */
@@ -53,7 +131,7 @@ class RootPage extends Component {
    * The handler for the `click` event on the side nav for changing selection.
    */
   onSideNavItemClick = evt => {
-    const { componentItems } = this.props;
+    const { componentItems } = this.state;
     const selectedNavItem = componentItems && componentItems.find(item => item.id === evt.target.dataset.navId);
     if (selectedNavItem) {
       this.switchTo(selectedNavItem.id);
@@ -64,7 +142,7 @@ class RootPage extends Component {
    * @returns The component data that is currently selected.
    */
   getCurrentComponentItem() {
-    const { componentItems } = this.props;
+    const { componentItems } = this.state;
     return componentItems && componentItems.find(item => item.id === this.state.selectedNavItemId);
   }
 
@@ -74,17 +152,22 @@ class RootPage extends Component {
    */
   switchTo(selectedNavItemId) {
     this.setState({ selectedNavItemId }, () => {
-      const { componentItems } = this.props;
+      const { componentItems } = this.state;
       const selectedNavItem = componentItems && componentItems.find(item => item.id === selectedNavItemId);
       const { name } = selectedNavItem || {};
       if (name) {
         history.pushState({ name }, name, `/demo/${name}`);
       }
+      load(componentItems, selectedNavItemId).then(newComponentItems => {
+        if (newComponentItems) {
+          this.setState({ componentItems: newComponentItems });
+        }
+      });
     });
   }
 
   render() {
-    const { componentItems } = this.props;
+    const { componentItems } = this.state;
     const metadata = this.getCurrentComponentItem();
     const { name, label } = metadata || {};
     const classNames = classnames({

diff --git a/demo/polyfills/devenv.js b/demo/polyfills/devenv.js
@@ -1,4 +1,14 @@
 // Polyfill for dev env UI based on `carbon-components-react`
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-extraneous-dependencies, global-require */
+import 'core-js/modules/es6.string.includes';
 import 'core-js/modules/es7.object.values';
-/* eslint-enable import/no-extraneous-dependencies */
+import 'whatwg-fetch';
+
+if (typeof Promise === 'undefined') {
+  // Rejection tracking prevents a common issue where React gets into an
+  // inconsistent state due to an error, but it gets swallowed by a Promise,
+  // and the user has no idea what causes React's erratic future behavior.
+  require('promise/lib/rejection-tracking').enable();
+  window.Promise = require('promise/lib/es6-extensions.js');
+}
+/* eslint-enable import/no-extraneous-dependencies, global-require */
diff --git a/demo/scss/_page.scss b/demo/scss/_page.scss
@@ -75,12 +75,12 @@ td {
     }
   }
 
-  button {
-    border-radius: 0;
-  }
-
   & > *:not(.component-example):not(.component-variation),
-  & >  {
+  & > {
+    button {
+      border-radius: 0;
+    }
+
     .page__divider-heading {
       @include typescale('zeta');
       font-weight: 600;

diff --git a/demo/views/demo-live.dust b/demo/views/demo-live.dust
diff --git a/demo/views/demo-nav-data.hbs b/demo/views/demo-nav-data.hbs
@@ -0,0 +1,15 @@
+<script>
+  var needIframe = [
+    'detail-page-header',
+    'footer',
+    'grid',
+    'unified-header',
+  ];
+  var componentItems = {{{JSONstringify componentItems}}}.map(function (item) {
+    if (needIframe.indexOf(item.name) >= 0) {
+      item.useIframe = true;
+    }
+    return item;
+  });
+  var docItems = {{{JSONstringify docItems}}};
+</script>
diff --git a/demo/views/demo-nav.dust → demo/views/layouts/demo-nav.hbs b/demo/views/demo-nav.dust → demo/views/layouts/demo-nav.hbs
@@ -23,21 +23,7 @@
   <body>
     <div data-renderroot></div>
     <input aria-label="inpute-text-offleft" type="text" class="offleft" />
-    <script>
-      var needIframe = [
-        'detail-page-header',
-        'footer',
-        'grid',
-        'unified-header',
-      ];
-      var componentItems = {componentItems|js|s}.map(function (item) {
-        if (needIframe.indexOf(item.name) >= 0) {
-          item.useIframe = true;
-        }
-        return item;
-      });
-      var docItems = {docItems|js|s};
-    </script>
+    {{{body}}}
     <script src="/demo/demo.js"></script>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,5 +11,5 @@ @@
         ],
         "react"
       ],
-      "plugins": ["transform-class-properties", "dev-expression"]
+      "plugins": ["transform-class-properties", "transform-object-rest-spread", "dev-expression"]
     }