Merge branch 'main' into 9283-multiselect-vrt

packages/carbon-react/src/components/Skeleton/Skeleton.stories.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-react';
+import { withKnobs, select, boolean, number } from '@storybook/addon-knobs';
+
+const classNames = {
+  'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small',
+  'my--skeleton__placeholder--medium': 'my--skeleton__placeholder--medium',
+  'my--skeleton__placeholder--large': 'my--skeleton__placeholder--large',
+};
+
+const placeholderProps = () => ({
+  className: select('Classes with different sizes', classNames),
+});
+
+const widths = {
+  '100%': '100%',
+  '250px': '250px',
+};
+
+const textProps = () => ({
+  heading: boolean('Skeleton text at a larger size (heading)'),
+  paragraph: boolean('Use multiple lines of text (paragraph)'),
+  lineCount: number('The number of lines in a paragraph (lineCount)', 3),
+  width: select(
+    'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
+    widths,
+    '100%'
+  ),
+});
+
+export default {
+  title: 'Components/Skeleton',
+  decorators: [withKnobs],
+};
+
+export const _SkeletonPlaceholder = () => {
+  return (
+    <div style={{ height: '250px', width: '250px' }}>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+      .my--skeleton__placeholder--small {
+        height: 100px;
+        width: 100px;
+      }
+
+      .my--skeleton__placeholder--medium {
+        height: 150px;
+        width: 150px;
+      }
+
+      .my--skeleton__placeholder--large {
+        height: 250px;
+        width: 250px;
+      }
+    `,
+        }}
+      />
+      <SkeletonPlaceholder {...placeholderProps()} />
+    </div>
+  );
+};
+
+export const _SkeletonText = () => {
+  return (
+    <div style={{ width: '300px' }}>
+      <SkeletonText {...textProps()} />
+    </div>
+  );
+};

packages/carbon-react/src/components/Skeleton/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { SkeletonPlaceholder, SkeletonText } from 'carbon-components-react';

packages/components/src/components/tile/_tile.scss

@@ -231,22 +231,6 @@
     }
   }
 
-  // Fix double border
-  .#{$prefix}--tile-input--checked + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-01;
-  }
-
-  .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected)
-    + .#{$prefix}--tile-input--checked
-    + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-05;
-  }
-
-  .#{$prefix}--tile-input--checked:first-of-type
-    + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-05;
-  }
-
   .#{$prefix}--tile-content {
     width: 100%;
     height: 100%;

packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.e2e.js

@@ -73,6 +73,7 @@ describe('CodeSnippet', () => {
 
   it('should render', () => {
     cy.findAllByText(/node/).should('be.visible');
+    cy.findAllByText(/Show more/).should('be.visible');
 
     // snapshots should always be taken _after_ an assertion that
     // a element/component should be visible. This is to ensure
@@ -95,3 +96,13 @@ describe('CodeSnippet', () => {
     cy.percySnapshot();
   });
 });
+
+// https://github.com/cypress-io/cypress/issues/8418
+const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/;
+cy.on('uncaught:exception', (err) => {
+  if (resizeObserverLoopErrRe.test(err.message)) {
+    // returning false here prevents Cypress from
+    // failing the test
+    return false;
+  }
+});

packages/react/src/components/Dropdown/Dropdown-test.e2e.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'carbon-components/scss/components/dropdown/_dropdown.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { generateItems, generateGenericItem } from '../ListBox/test-helpers';
+import Dropdown from '../Dropdown';
+import DropdownSkeleton from '../Dropdown/Dropdown.Skeleton';
+
+describe('Dropdown', () => {
+  beforeEach(() => {
+    const items = generateItems(5, generateGenericItem);
+    const label = 'Dropdown menu options';
+    const style = { marginBottom: '1rem' };
+    mount(
+      <>
+        <Dropdown
+          style={{ marginBottom: '14rem' }}
+          items={items}
+          label={label}
+        />
+        <Dropdown style={style} items={items} label={label} size="sm" />
+        <Dropdown style={style} items={items} label={label} size="md" />
+        <Dropdown style={style} items={items} label={label} size="lg" />
+        <Dropdown style={style} items={items} label={label} size="xl" />
+        <Dropdown style={style} items={items} label={label} disabled />
+        <Dropdown
+          style={style}
+          items={items}
+          label={label}
+          helperText="This is helper text"
+        />
+        <Dropdown style={style} items={items} label={label} warn />
+        <Dropdown
+          style={style}
+          items={items}
+          label={label}
+          warn
+          warnText="This is warn text"
+        />
+        <Dropdown
+          style={style}
+          items={items}
+          label={label}
+          invalid
+          invalidText="This is invalid text"
+        />
+        <Dropdown style={style} items={items} label={label} light />
+        <Dropdown
+          style={style}
+          items={items}
+          label={label}
+          light
+          invalid
+          invalidText="This is invalid text"
+        />
+        <Dropdown style={style} items={items} label={label} type="inline" />
+        <DropdownSkeleton style={style} size="sm" />
+        <DropdownSkeleton style={style} size="md" />
+        <DropdownSkeleton style={style} size="lg" />
+        <DropdownSkeleton style={style} size="xl" />
+      </>
+    );
+  });
+
+  it('should render', () => {
+    cy.findAllByText(/Dropdown menu options/)
+      .should('have.length', 13)
+      .last()
+      .should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+
+  it('should render listbox when clicked', () => {
+    cy.findAllByText(/Dropdown menu options/)
+      .first()
+      .click();
+
+    cy.findAllByText(/Item 0/)
+      .first()
+      .should('be.visible');
+    cy.findAllByText(/Item 4/)
+      .first()
+      .should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+});

packages/react/src/components/Dropdown/Dropdown.Skeleton.js

@@ -55,7 +55,7 @@ DropdownSkeleton.propTypes = {
   ),
 
   /**
-   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+   * Specify the size of the ListBox.
    */
   size: ListBoxPropTypes.ListBoxSize,
 };

packages/styles/scss/components/__tests__/skeleton-test.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/skeleton-styles', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:meta';
+      @use '../skeleton-styles';
+
+      $_: get('mixin', meta.mixin-exists('skeleton-styles', 'skeleton-styles'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

packages/styles/scss/components/_index.scss

@@ -41,6 +41,7 @@
 @use 'radio-button';
 @use 'search';
 @use 'select';
+@use 'skeleton-styles';
 @use 'slider';
 @use 'structured-list';
 @use 'tabs';

packages/styles/scss/components/skeleton-styles/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'skeleton-styles';
+@use 'skeleton-styles';
+
+@include skeleton-styles.skeleton-styles;

packages/styles/scss/components/skeleton-styles/_skeleton-styles.scss

@@ -0,0 +1,47 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// 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 '../../config' as *;
+@use '../../utilities/skeleton' as *;
+@use '../../utilities/convert' as *;
+@use '../../spacing' as *;
+
+/// Skeleton styles
+/// @access public
+/// @group skeleton
+@mixin skeleton-styles {
+  //skeleton icon
+  .#{$prefix}--icon--skeleton {
+    @include skeleton;
+
+    display: inline-block;
+    width: rem(16px);
+    height: rem(16px);
+  }
+
+  //skeleton placeholder
+  .#{$prefix}--skeleton__placeholder {
+    @include skeleton;
+
+    width: rem(100px);
+
+    height: rem(100px);
+  }
+
+  //skeleton text
+  .#{$prefix}--skeleton__text {
+    @include skeleton;
+
+    width: 100%;
+    height: 1rem;
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$prefix}--skeleton__heading {
+    height: 1.5rem;
+  }
+}