Merge branch 'master' into 7920-tag-and-filter-tag-valign

packages/components/src/components/number-input/_number-input.scss

@@ -381,54 +381,6 @@
     background-color: $hover-light-ui;
   }
 
-  .#{$prefix}--number--mobile {
-    width: auto;
-    min-width: rem(144px);
-
-    .#{$prefix}--number__control-btn,
-    &.#{$prefix}--number--light .#{$prefix}--number__control-btn {
-      position: static;
-      width: rem(40px);
-      height: rem(40px);
-      background-color: $ui-01;
-
-      &:hover,
-      &:focus {
-        background-color: $hover-ui;
-      }
-
-      &:focus {
-        outline-width: 2px;
-        outline-offset: -2px;
-      }
-
-      svg {
-        position: static;
-      }
-    }
-
-    input[type='number'] {
-      width: auto;
-      min-width: rem(64px);
-      margin: 0;
-      padding: 0;
-      text-align: center;
-      background-color: $field-01;
-      border-right: 1px solid $ui-03;
-      border-left: 1px solid $ui-03;
-    }
-
-    &.#{$prefix}--number--light {
-      input[type='number'] {
-        background-color: $field-02;
-      }
-
-      .#{$prefix}--number__control-btn {
-        background-color: $ui-02;
-      }
-    }
-  }
-
   // Size Variant styles
   .#{$prefix}--number--xl input[type='number'] {
     height: rem(48px);
@@ -448,12 +400,6 @@
     }
   }
 
-  .#{$prefix}--number--xl.#{$prefix}--number--mobile
-    .#{$prefix}--number__control-btn {
-    width: rem(48px);
-    height: rem(48px);
-  }
-
   .#{$prefix}--number--sm input[type='number'] {
     height: rem(32px);
   }
@@ -472,12 +418,6 @@
     }
   }
 
-  .#{$prefix}--number--sm.#{$prefix}--number--mobile
-    .#{$prefix}--number__control-btn {
-    width: rem(32px);
-    height: rem(32px);
-  }
-
   //No label positioning adjustment
   .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text {
     margin-top: 0;

packages/components/src/components/tabs/_tabs.scss

@@ -453,6 +453,7 @@
       padding: 0;
       overflow: auto hidden;
       list-style: none;
+      outline: 0;
       transition: max-height $duration--fast-01 motion(standard, productive);
 
       // hide scrollbars

packages/feature-flags/README.md

@@ -24,83 +24,76 @@ The `@carbon/feature-flags` provides a runtime-based feature flag system that
 you can use to enable or disable experimental features from Carbon or in your
 own code.
 
-To enable a feature flag, you will need to enable it in each of the environments
-that you're using it in. Often times, this will mean JavaScript, Sass, or both.
-
-To enable a flag in JavaScript, you would use `enableFeatureFlag`:
+To check if a feature flag is enabled, you can use the `enabled` function in
+JavaScript:
 
 ```js
-import { enableFeatureFlag } from '@carbon/feature-flags';
+import { enabled } from '@carbon/feature-flags';
 
-enableFeatureFlag('feature-flag-name');
+enabled('feature-flag-name');
 ```
 
-To enable a flag in Sass, you would set the `$feature-flags` variable:
+In Sass, you would use the `enabled` function or mixin:
 
 ```scss
-@import '@carbon/feature-flags/scss/feature-flags';
+@use '@carbon/feature-flags';
 
-$feature-flags: map-merge(
-  $feature-flags,
-  (
-    'feature-flag-name': true,
-  )
-);
-```
+// Return true if the flag is enabled
+@if feature-flags.enabled('feature-flag-name') {
+  //
+}
 
-### Managing and using feature flags
+@include enabled('feature-flag-name') {
+  // only include contents if the flag is enabled
+}
+```
 
-You can use the `@carbon/feature-flags` package to build on top of existing
-feature flags, or to add your own.
+### Managing feature flags
 
-You can add and toggle flags in JavaScript and Sass. In JavaScript, this would
-look like:
+You can change whether a feature flag is enabled. In JavaScript, you can use the
+`enable`, `disable`, and `merge` functions to accomplish this.
 
 ```js
-import {
-  addFeatureFlag,
-  enableFeatureFlag,
-  disableFeatureFlag,
-  featureFlagEnabled,
-} from '@carbon/feature-flags';
-
-// Specify a default value for the flag
-addFeatureFlag('feature-flag-name', false);
-
-// You can use `featureFlagEnabled` to conditionally run
-// branches of your code
-if (featureFlagEnabled('feature-flag-name')) {
-  // Run code if the flag is enabled
-}
+import { enable, disable, merge } from '@carbon/feature-flags';
 
-// You can also modify the value of the flag
-disableFeatureFlag('feature-flag-name');
-enableFeatureFlag('feature-flag-name');
+// Enable `feature-flag-a`
+enable('feature-flag-a');
+
+// Disable `feature-flag-a`
+disable('feature-flag-a);
+
+// Set a variety of feature flags to a specific value
+merge({
+  'feature-flag-a': true,
+  'feature-flag-b': false,
+  'feature-flag-c': true,
+});
 ```
 
-In Sass, you would write the following:
+In Sass, you can configure whether a feature flag is enabled when you include
+the module or by using `enable`, `disable`, and `merge`.
 
 ```scss
-@import '@carbon/feature-flags/scss/feature-flags';
+@use '@carbon/feature-flags' with (
+  $feature-flags: (
+    'feature-flag-a': false,
+    'feature-flag-b': true,
+  ),
+);
+
+// Enable `feature-flag-a`
+@include feature-flags.enable('feature-flag-a');
+
+// Disable `feature-flag-b`
+@include feature-flags.disable('feature-flag-b');
 
-$feature-flags: map-merge(
-  $feature-flags,
+// Set a variety of feature flags to a specific value
+@include feature-flags.merge(
   (
-    'feature-flag-name': true,
+    'feature-flag-a': true,
+    'feature-flag-b': true,
   )
 );
-
-@if feature-flag-enabled('feature-flag-name') {
-  // ...
-}
-
-// You can also run this as a mixin to conditionally include
-// code
-.my-selector {
-  @include feature-flag-enabled('feature-flag-name') {
-    // ...
-  }
-}
 ```
 
 ## 🙌 Contributing