Move Feature Flag out of Experimental (carbon-design-system#17806)

* feat: adding feature flag item to stable * feat: added combobox floating styles * fix: imported all dynamic floating styles to stable * feat: added remaning feature flags * fix: fixed a tile and overflow paths in avt tests * test: fixed tests * fix: removed parameter from main.js * fix: fixed naming * fix: moved flag details to the top level
irfadkp · Oct 24, 2024 · c81578a · c81578a
1 parent 070f047
commit c81578a
Show file tree

Hide file tree

Showing 34 changed files with 1,021 additions and 1,477 deletions.
diff --git a/e2e/components/OverflowMenu/OverflowMenu-test.e2e.js b/e2e/components/OverflowMenu/OverflowMenu-test.e2e.js
@@ -29,22 +29,6 @@ test.describe('OverflowMenu', () => {
           theme,
         });
       });
-
-      test('feature flags default @vrt', async ({ page }) => {
-        await snapshotStory(page, {
-          component: 'OverflowMenu',
-          id: 'experimental-feature-flags-overflowmenu--overflow-menu',
-          theme,
-        });
-      });
-
-      test('feature flags render custom icon @vrt', async ({ page }) => {
-        await snapshotStory(page, {
-          component: 'OverflowMenu',
-          id: 'experimental-feature-flags-overflowmenu--custom-icon',
-          theme,
-        });
-      });
     });
   });
 });
diff --git a/e2e/components/Tile/Tile-test.e2e.js b/e2e/components/Tile/Tile-test.e2e.js
@@ -105,55 +105,55 @@ test.describe('Tile', () => {
       test('feature flags clickable @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tile',
-          id: 'experimental-feature-flags-tile--clickable',
+          id: 'components-tile-feature-flag--clickable',
           theme,
         });
       });
 
       test('feature flags clickable with layer @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tile',
-          id: 'experimental-feature-flags-tile--clickable-with-layer',
+          id: 'components-tile-feature-flag--clickable-with-layer',
           theme,
         });
       });
 
       test('feature flags selectable @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tile',
-          id: 'experimental-feature-flags-tile--selectable',
+          id: 'components-tile-feature-flag--selectable',
           theme,
         });
       });
 
       test('feature flags multi select @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tile',
-          id: 'experimental-feature-flags-tile--multi-select',
+          id: 'components-tile-feature-flag--multi-select',
           theme,
         });
       });
 
       test('feature flags radio @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tile',
-          id: 'experimental-feature-flags-tile--radio',
+          id: 'components-tile-feature-flag--radio',
           theme,
         });
       });
 
       test('feature flags radio with layer @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tile',
-          id: 'experimental-feature-flags-tile--radio-with-layer',
+          id: 'components-tile-feature-flag--radio-with-layer',
           theme,
         });
       });
 
       test('feature flags expandable @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tile',
-          id: 'experimental-feature-flags-tile--expandable',
+          id: 'components-tile-feature-flag--expandable',
           theme,
         });
       });
@@ -163,15 +163,15 @@ test.describe('Tile', () => {
       }) => {
         await snapshotStory(page, {
           component: 'Tile',
-          id: 'experimental-feature-flags-tile--expandable-with-interactive',
+          id: 'components-tile-feature-flag--expandable-with-interactive',
           theme,
         });
       });
 
       test('feature flags expandable with layer @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tile',
-          id: 'experimental-feature-flags-tile--expandable-with-layer',
+          id: 'components-tile-feature-flag--expandable-with-layer',
           theme,
         });
       });

diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -265,19 +265,30 @@ const parameters = {
         return titleA.localeCompare(titleB);
       }
 
+      if (titleA !== titleB) {
+        if (idA.includes('flag-details') && !idB.includes('flag-details')) {
+          return -1;
+        }
+        if (idB.includes('flag-details') && !idA.includes('flag-details')) {
+          return 1;
+        }
+        return titleA.localeCompare(titleB);
+      }
+
       // To sort the stories, we first build up a list of matches based on
       // keywords. Each keyword has a specific weight that will be used to
       // determine order later on.
-      const UNKNOWN_KEYWORD = 4;
+      const UNKNOWN_KEYWORD = 5;
       const keywords = new Map([
         ['welcome', 0],
         ['overview', 1],
         ['default', 2],
         ['usage', 3],
-        ['playground', 5],
-        ['development', 6],
-        ['deprecated', 7],
-        ['unstable', 8],
+        ['flag-details', 4],
+        ['playground', 6],
+        ['development', 7],
+        ['deprecated', 8],
+        ['unstable', 9],
       ]);
       const matches = new Map();
 

diff --git a/packages/react/src/components/ComboBox/ComboBox.featureflag.stories.js b/packages/react/src/components/ComboBox/ComboBox.featureflag.stories.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+import { ComboBox } from '../ComboBox';
+import { WithFeatureFlags } from '../../../.storybook/templates/WithFeatureFlags';
+
+export default {
+  title: 'Components/ComboBox/Feature Flag',
+  component: ComboBox,
+  tags: ['!autodocs'],
+  decorators: [
+    (Story) => (
+      <WithFeatureFlags
+        flags={{
+          'enable-v12-dynamic-floating-styles': true,
+        }}>
+        <Story />
+      </WithFeatureFlags>
+    ),
+  ],
+};
+
+const comboBoxItems = [
+  {
+    id: 'option-0',
+    text: 'An example option that is really long to show what should be done to handle long text',
+  },
+  {
+    id: 'option-1',
+    text: 'Option 1',
+  },
+  {
+    id: 'option-2',
+    text: 'Option 2',
+  },
+  {
+    id: 'option-3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
+  },
+  {
+    id: 'option-4',
+    text: 'Option 4',
+  },
+  {
+    id: 'option-5',
+    text: 'Option 5',
+  },
+];
+
+export const FloatingStyles = (args) => (
+  <ComboBox
+    onChange={() => {}}
+    id="carbon-combobox"
+    items={comboBoxItems}
+    itemToString={(item) => (item ? item.text : '')}
+    titleText="ComboBox title"
+    helperText="Combobox helper text"
+    {...args}
+  />
+);
+
+FloatingStyles.args = {
+  direction: 'bottom',
+};
+
+FloatingStyles.argTypes = {
+  direction: {
+    options: ['top', 'bottom'],
+    control: {
+      type: 'radio',
+    },
+  },
+};
diff --git a/packages/react/src/components/ComboBox/Combobox.DynamicStyles.featureflag.mdx b/packages/react/src/components/ComboBox/Combobox.DynamicStyles.featureflag.mdx
@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Components/ComboBox/Feature Flag" name="Flag details" />
+
+# Dynamically set floating styles
+
+Components with `autoAlign` use the
+[`floating-ui`](https://github.com/floating-ui/floating-ui) library to handle
+the dynamic positioning of floating elements relative to their trigger / anchor
+element. This also includes collision detection that repositions the floating
+element as necessary to keep it visible within the viewport. In the majority of
+cases, the styling from the `floating-ui` 'fixed' positioning strategy prevents
+the floating element from being
+[clipped](https://floating-ui.com/docs/misc#clipping) by an ancestor element.
+
+The `enable-v12-dynamic-floating-styles` flag enables this dynamic styling
+without the collision detection.
+
+**Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
+includes both the dynamic positioning styles and collision detection.
+
+## Enable dynamic setting of floating styles
+
+```js
+<FeatureFlags
+  flags={{
+    'enable-v12-dynamic-floating-styles': true,
+  }}>
+  <ComboBox
+    onChange={() => {}}
+    id="carbon-combobox"
+    items={comboBoxItems}
+    itemToString={(item) => (item ? item.text : '')}
+    titleText="ComboBox title"
+    helperText="Combobox helper text"
+    {...args}
+  />
+</FeatureFlags>
+```
diff --git a/...ages/react/src/components/ComboButton/ComboButton.DynamicStyles.featureflag.mdx b/...ages/react/src/components/ComboButton/ComboButton.DynamicStyles.featureflag.mdx
@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Components/ComboButton/Feature Flag" name="Flag details" />
+
+# Dynamically set floating styles
+
+Components with `autoAlign` use the
+[`floating-ui`](https://github.com/floating-ui/floating-ui) library to handle
+the dynamic positioning of floating elements relative to their trigger / anchor
+element. This also includes collision detection that repositions the floating
+element as necessary to keep it visible within the viewport. In the majority of
+cases, the styling from the `floating-ui` 'fixed' positioning strategy prevents
+the floating element from being
+[clipped](https://floating-ui.com/docs/misc#clipping) by an ancestor element.
+
+The `enable-v12-dynamic-floating-styles` flag enables this dynamic styling
+without the collision detection.
+
+**Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
+includes both the dynamic positioning styles and collision detection.
+
+## Enable dynamic setting of floating styles
+
+```js
+<FeatureFlags
+  flags={{
+    'enable-v12-dynamic-floating-styles': true,
+  }}>
+  <ComboButton menuAlignment={args.menuAlignment} label="Primary action">
+    <MenuItem label="Second action with a long label description" />
+    <MenuItem label="Third action" />
+    <MenuItem label="Fourth action" disabled />
+  </ComboButton>
+</FeatureFlags>
+```
diff --git a/packages/react/src/components/ComboButton/ComboButton.featureflag.stories.js b/packages/react/src/components/ComboButton/ComboButton.featureflag.stories.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+import { ComboButton } from '../ComboButton';
+import { WithFeatureFlags } from '../../../.storybook/templates/WithFeatureFlags';
+import { MenuItem } from '../Menu';
+
+export default {
+  title: 'Components/ComboButton/Feature Flag',
+  component: ComboButton,
+  tags: ['!autodocs'],
+  decorators: [
+    (Story) => (
+      <WithFeatureFlags
+        flags={{
+          'enable-v12-dynamic-floating-styles': true,
+        }}>
+        <Story />
+      </WithFeatureFlags>
+    ),
+  ],
+};
+
+export const FloatingStyles = (args) => (
+  <ComboButton menuAlignment={args.menuAlignment} label="Primary action">
+    <MenuItem label="Second action with a long label description" />
+    <MenuItem label="Third action" />
+    <MenuItem label="Fourth action" disabled />
+  </ComboButton>
+);
+
+FloatingStyles.args = {
+  menuAlignment: 'bottom',
+};
+
+FloatingStyles.argTypes = {
+  menuAlignment: {
+    options: ['top', 'bottom'],
+    control: {
+      type: 'radio',
+    },
+  },
+};
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx b/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta isTemplate />
+<Meta title="Components/ComposedModal/Feature Flag" name="Flag details" />
 
 # ComposedModal