Merge branch 'main' into remove-test-tooltipdefinition-story

.nvmrc

@@ -1 +1 @@
-14
+14.17

packages/colors/package.json

@@ -42,7 +42,7 @@
     "change-case": "^4.1.1",
     "core-js": "^3.6.5",
     "fs-extra": "^8.1.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^6.0.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {

packages/components/package.json

@@ -124,7 +124,7 @@
     "gulp-nodemon": "^2.4.2",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^1.4.0",
-    "gulp-sass": "^4.0.0",
+    "gulp-sass": "^4.1.0",
     "gulp-sass-lint": "^1.4.0",
     "gulp-sourcemaps": "^2.6.0",
     "gulp-terser": "^1.0.0",
@@ -148,7 +148,7 @@
     "minimatch": "^3.0.4",
     "mkdirp": "^0.5.0",
     "mock-raf": "^1.0.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^6.0.0",
     "nodemon": "^1.18.7",
     "path-to-regexp": "^6.2.0",
     "portscanner": "^2.2.0",

packages/components/src/components/modal/_modal.scss

@@ -371,7 +371,8 @@
     overflow: hidden;
   }
 
-  .#{$prefix}--body--with-modal-open .#{$prefix}--tooltip {
+  .#{$prefix}--body--with-modal-open .#{$prefix}--tooltip,
+  .#{$prefix}--body--with-modal-open .#{$prefix}--overflow-menu-options {
     z-index: z('modal');
   }
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -2258,6 +2258,9 @@ Map {
       "onClose": Object {
         "type": "func",
       },
+      "onOpen": Object {
+        "type": "func",
+      },
       "short": Object {
         "type": "bool",
       },

packages/react/src/components/DatePicker/DatePicker-story.js

@@ -13,6 +13,7 @@ import {
   text,
   array,
 } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
 import DatePicker from '../DatePicker';
 import DatePickerInput from '../DatePickerInput';
 import DatePickerSkeleton from '../DatePicker/DatePicker.Skeleton';
@@ -48,6 +49,8 @@ const props = {
     minDate: text('Disable dates before this date (minDate)', '11/15/2020'),
     maxDate: text('Disabled dates after this date (maxDate)', '11/01/2040'),
     disable: array('Disable specific dates (disable)', ['07/15/2021'], ','),
+    onClose: action('onClose'),
+    onOpen: action('onOpen'),
   }),
   datePickerInput: () => ({
     id: 'date-picker-input-id',

packages/react/src/components/DatePicker/DatePicker.js

@@ -258,6 +258,11 @@ export default class DatePicker extends Component {
      */
     onClose: PropTypes.func,
 
+    /**
+     * The `open` event handler.
+     */
+    onOpen: PropTypes.func,
+
     /**
      * `true` to use the short version.
      */
@@ -374,7 +379,13 @@ export default class DatePicker extends Component {
           onReady: onHook,
           onMonthChange: onHook,
           onYearChange: onHook,
-          onOpen: onHook,
+          onOpen: (...args) => {
+            const { onOpen } = this.props;
+            onHook(...args);
+            if (onOpen) {
+              onOpen(...args);
+            }
+          },
           onValueUpdate: onHook,
         });
         this.addKeyboardEvents(this.cal);

packages/styles/scss/utilities/_box-shadow.scss

@@ -0,0 +1,14 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Adds box shadow
+/// @access public
+/// @example @include box-shadow;
+/// @group utilities
+@mixin box-shadow {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}

packages/styles/scss/utilities/_button-reset.scss

@@ -0,0 +1,31 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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 'component-reset';
+
+/// Resets button styles
+/// @access public
+/// @param {Bool} $width [true] - Sets width to 100% if true
+/// @example @include button-reset($width: false);
+/// @group utilities
+@mixin button-reset($width: true) {
+  @include component-reset;
+
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background: none;
+  cursor: pointer;
+
+  @if ($width == true) {
+    width: 100%;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}

packages/styles/scss/utilities/_component-reset.scss

@@ -0,0 +1,25 @@
+//
+// 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.
+//
+
+/// Resets default browser styling
+/// @access public
+/// @group utilities
+@mixin component-reset {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+}

packages/styles/scss/utilities/_convert.scss

@@ -14,6 +14,7 @@ $base-font-size: 16px !default;
 /// @param {Number} $px - Number with px unit
 /// @return {Number} Number with rem unit
 /// @access public
+/// @group utilities
 @function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11
@@ -27,6 +28,7 @@ $base-font-size: 16px !default;
 /// @param {Number} $px - Number with px unit
 /// @return {Number} Number with em unit
 /// @access public
+/// @group utilities
 @function em($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11

packages/styles/scss/utilities/_focus-outline.scss

@@ -0,0 +1,58 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Adds outline styles depending on specific type
+/// @access public
+/// @param {String} $type ['border'] - Type of outline from: `border`, `blurred`, `outline`, `invalid`, `reset`
+/// @example @include focus-outline('outline');
+/// @group utilities
+@mixin focus-outline($type: 'border') {
+  @if ($type == 'border') {
+    outline: 1px solid $focus;
+
+    @media screen and (prefers-contrast) {
+      outline-style: dotted;
+    }
+  }
+
+  @if ($type == 'blurred') {
+    box-shadow: 0 0 0 3px $focus;
+    outline: 1px solid transparent;
+  }
+
+  @if ($type == 'outline') {
+    outline: 2px solid $focus;
+    outline-offset: -2px;
+
+    @media screen and (prefers-contrast) {
+      outline-style: dotted;
+    }
+  }
+
+  @if ($type == 'outline-compat') {
+    box-sizing: border-box;
+    border: 2px solid $focus;
+
+    @media screen and (prefers-contrast) {
+      border-style: dotted;
+    }
+  }
+
+  @if ($type == 'invalid') {
+    outline: 2px solid $support-error;
+    outline-offset: -2px;
+
+    @media screen and (prefers-contrast) {
+      outline-style: dotted;
+    }
+  }
+
+  @if ($type == 'reset') {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+  }
+}

packages/styles/scss/utilities/_high-contrast-mode.scss

@@ -0,0 +1,37 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Windows HCM Mixin
+/// @access public
+/// @example @include high-contrast-mode;
+/// @group utilities
+/// Set HCM styles at the end of each file to ensure they are not overwritten
+@mixin high-contrast-mode($type: '') {
+  @media screen and (-ms-high-contrast: active),
+    (forced-colors: active),
+    (prefers-contrast) {
+    @if ($type == 'icon-fill') {
+      fill: ButtonText;
+    }
+
+    @if ($type == 'focus') {
+      color: Highlight;
+      outline: 1px solid Highlight;
+    }
+
+    @if ($type == 'outline') {
+      outline: 1px solid transparent;
+    }
+
+    @if ($type == 'disabled') {
+      color: GrayText;
+      fill: GrayText;
+    }
+
+    @content;
+  }
+}

packages/styles/scss/utilities/_index.scss

@@ -5,4 +5,18 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@forward 'box-shadow';
+@forward 'button-reset';
+@forward 'component-reset';
 @forward 'convert' show em, rem;
+@forward 'focus-outline';
+@forward 'high-contrast-mode';
+@forward 'keyframes';
+@forward 'placeholder-colors';
+@forward 'rotate';
+@forward 'skeleton';
+@forward 'text-overflow';
+@forward 'text-truncate';
+@forward 'tooltip';
+@forward 'visually-hidden';
+@forward 'z-index';

packages/styles/scss/utilities/_keyframes.scss

@@ -0,0 +1,76 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@mixin content-visible {
+  opacity: 1;
+  visibility: inherit;
+}
+
+@mixin content-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+@keyframes hide-feedback {
+  0% {
+    @include content-visible;
+  }
+  100% {
+    @include content-hidden;
+  }
+}
+
+@keyframes show-feedback {
+  0% {
+    @include content-hidden;
+  }
+  100% {
+    @include content-visible;
+  }
+}
+
+@keyframes skeleton {
+  0% {
+    opacity: 0.3;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  20% {
+    opacity: 1;
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  28% {
+    transform: scaleX(1);
+    transform-origin: right;
+  }
+  51% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+  58% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+  82% {
+    transform: scaleX(1);
+    transform-origin: right;
+  }
+  83% {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  96% {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  100% {
+    opacity: 0.3;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+}

packages/styles/scss/utilities/_placeholder-colors.scss

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Adds placeholder text color
+/// @access public
+/// @example @include placeholder-colors;
+/// @group utilities
+@mixin placeholder-colors {
+  color: $text-placeholder;
+  opacity: 1;
+}