diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index f74cbea19134..c5430e7eacaa 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9843,6 +9843,9 @@ Map {
"enableTreeviewControllable": Object {
"type": "bool",
},
+ "enableV12DynamicFloatingStyles": Object {
+ "type": "bool",
+ },
"enableV12Overflowmenu": Object {
"type": "bool",
},
diff --git a/packages/react/src/components/FeatureFlags/__tests__/FeatureFlags-test.js b/packages/react/src/components/FeatureFlags/__tests__/FeatureFlags-test.js
index 798ac1de8431..d73ceabd2f4b 100644
--- a/packages/react/src/components/FeatureFlags/__tests__/FeatureFlags-test.js
+++ b/packages/react/src/components/FeatureFlags/__tests__/FeatureFlags-test.js
@@ -226,6 +226,7 @@ describe('FeatureFlags', () => {
enableTreeviewControllable: false,
});
});
+
it('should handle boolean props and flags object with no overlapping keys', () => {
const checkFlags = jest.fn();
const checkFlag = jest.fn();
@@ -267,6 +268,7 @@ describe('FeatureFlags', () => {
enableExperimentalFocusWrapWithoutSentinels: true,
});
});
+
it('should handle boolean props correctly when no flags object is provided', () => {
const checkFlags = jest.fn();
const checkFlag = jest.fn();
@@ -308,4 +310,328 @@ describe('FeatureFlags', () => {
enableTreeviewControllable: false,
});
});
+
+ describe('should support a prop for each feature flag', () => {
+ it('enable-v12-tile-default-icons - enableV12TileDefaultIcons', () => {
+ const checkFlags = jest.fn();
+ const checkFlag = jest.fn();
+
+ function TestComponent() {
+ const featureFlags = useFeatureFlags();
+ const enableV12TileDefaultIcons = useFeatureFlag(
+ 'enable-v12-tile-default-icons'
+ );
+
+ checkFlags({
+ enableV12TileDefaultIcons: featureFlags.enabled(
+ 'enable-v12-tile-default-icons'
+ ),
+ });
+
+ checkFlag({
+ enableV12TileDefaultIcons,
+ });
+
+ return null;
+ }
+
+ // Render the default
+ const { rerender } = render(
+
+
+
+ );
+
+ // Ensure the default value is as defined and as expected
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableV12TileDefaultIcons: false,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableV12TileDefaultIcons: false,
+ });
+
+ // Enable the flag
+ rerender(
+
+
+
+ );
+
+ // Ensure that when enabled, this flag does not error
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableV12TileDefaultIcons: true,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableV12TileDefaultIcons: true,
+ });
+ });
+
+ it('enable-v12-tile-radio-icons - enableV12TileRadioIcons', () => {
+ const checkFlags = jest.fn();
+ const checkFlag = jest.fn();
+
+ function TestComponent() {
+ const featureFlags = useFeatureFlags();
+ const enableV12TileRadioIcons = useFeatureFlag(
+ 'enable-v12-tile-radio-icons'
+ );
+
+ checkFlags({
+ enableV12TileRadioIcons: featureFlags.enabled(
+ 'enable-v12-tile-radio-icons'
+ ),
+ });
+
+ checkFlag({
+ enableV12TileRadioIcons,
+ });
+
+ return null;
+ }
+
+ // Render the default
+ const { rerender } = render(
+
+
+
+ );
+
+ // Ensure the default value is as defined and as expected
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableV12TileRadioIcons: false,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableV12TileRadioIcons: false,
+ });
+
+ // Enable the flag
+ rerender(
+
+
+
+ );
+
+ // Ensure that when enabled, this flag does not error
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableV12TileRadioIcons: true,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableV12TileRadioIcons: true,
+ });
+ });
+
+ it('enable-v12-overflowmenu - enableV12Overflowmenu', () => {
+ const checkFlags = jest.fn();
+ const checkFlag = jest.fn();
+
+ function TestComponent() {
+ const featureFlags = useFeatureFlags();
+ const enableV12Overflowmenu = useFeatureFlag('enable-v12-overflowmenu');
+
+ checkFlags({
+ enableV12Overflowmenu: featureFlags.enabled(
+ 'enable-v12-overflowmenu'
+ ),
+ });
+
+ checkFlag({
+ enableV12Overflowmenu,
+ });
+
+ return null;
+ }
+
+ // Render the default
+ const { rerender } = render(
+
+
+
+ );
+
+ // Ensure the default value is as defined and as expected
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableV12Overflowmenu: false,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableV12Overflowmenu: false,
+ });
+
+ // Enable the flag
+ rerender(
+
+
+
+ );
+
+ // Ensure that when enabled, this flag does not error
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableV12Overflowmenu: true,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableV12Overflowmenu: true,
+ });
+ });
+
+ it('enable-treeview-controllable - enableTreeviewControllable', () => {
+ const checkFlags = jest.fn();
+ const checkFlag = jest.fn();
+
+ function TestComponent() {
+ const featureFlags = useFeatureFlags();
+ const enableTreeviewControllable = useFeatureFlag(
+ 'enable-treeview-controllable'
+ );
+
+ checkFlags({
+ enableTreeviewControllable: featureFlags.enabled(
+ 'enable-treeview-controllable'
+ ),
+ });
+
+ checkFlag({
+ enableTreeviewControllable,
+ });
+
+ return null;
+ }
+
+ // Render the default
+ const { rerender } = render(
+
+
+
+ );
+
+ // Ensure the default value is as defined and as expected
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableTreeviewControllable: false,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableTreeviewControllable: false,
+ });
+
+ // Enable the flag
+ rerender(
+
+
+
+ );
+
+ // Ensure that when enabled, this flag does not error
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableTreeviewControllable: true,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableTreeviewControllable: true,
+ });
+ });
+
+ it('enable-experimental-focus-wrap-without-sentinels - enableExperimentalFocusWrapWithoutSentinels', () => {
+ const checkFlags = jest.fn();
+ const checkFlag = jest.fn();
+
+ function TestComponent() {
+ const featureFlags = useFeatureFlags();
+ const enableExperimentalFocusWrapWithoutSentinels = useFeatureFlag(
+ 'enable-experimental-focus-wrap-without-sentinels'
+ );
+
+ checkFlags({
+ enableExperimentalFocusWrapWithoutSentinels: featureFlags.enabled(
+ 'enable-experimental-focus-wrap-without-sentinels'
+ ),
+ });
+
+ checkFlag({
+ enableExperimentalFocusWrapWithoutSentinels,
+ });
+
+ return null;
+ }
+
+ // Render the default
+ const { rerender } = render(
+
+
+
+ );
+
+ // Ensure the default value is as defined and as expected
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableExperimentalFocusWrapWithoutSentinels: false,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableExperimentalFocusWrapWithoutSentinels: false,
+ });
+
+ // Enable the flag
+ rerender(
+
+
+
+ );
+
+ // Ensure that when enabled, this flag does not error
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableExperimentalFocusWrapWithoutSentinels: true,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableExperimentalFocusWrapWithoutSentinels: true,
+ });
+ });
+
+ it('enable-v12-dynamic-floating-styles - enableV12DynamicFloatingStyles', () => {
+ const checkFlags = jest.fn();
+ const checkFlag = jest.fn();
+
+ function TestComponent() {
+ const featureFlags = useFeatureFlags();
+ const enableV12DynamicFloatingStyles = useFeatureFlag(
+ 'enable-v12-dynamic-floating-styles'
+ );
+
+ checkFlags({
+ enableV12DynamicFloatingStyles: featureFlags.enabled(
+ 'enable-v12-dynamic-floating-styles'
+ ),
+ });
+
+ checkFlag({
+ enableV12DynamicFloatingStyles,
+ });
+
+ return null;
+ }
+
+ // Render the default
+ const { rerender } = render(
+
+
+
+ );
+
+ // Ensure the default value is as defined and as expected
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableV12DynamicFloatingStyles: false,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableV12DynamicFloatingStyles: false,
+ });
+
+ // Enable the flag
+ rerender(
+
+
+
+ );
+
+ // Ensure that when enabled, this flag does not error
+ expect(checkFlags).toHaveBeenLastCalledWith({
+ enableV12DynamicFloatingStyles: true,
+ });
+ expect(checkFlag).toHaveBeenLastCalledWith({
+ enableV12DynamicFloatingStyles: true,
+ });
+ });
+ });
});
diff --git a/packages/react/src/components/FeatureFlags/index.tsx b/packages/react/src/components/FeatureFlags/index.tsx
index 82bf5e873949..26ba250b0f4d 100644
--- a/packages/react/src/components/FeatureFlags/index.tsx
+++ b/packages/react/src/components/FeatureFlags/index.tsx
@@ -28,6 +28,7 @@ interface FeatureFlagsProps {
enableV12Overflowmenu?: boolean;
enableTreeviewControllable?: boolean;
enableExperimentalFocusWrapWithoutSentinels?: boolean;
+ enableV12DynamicFloatingStyles?: boolean;
}
/**
* Our FeatureFlagContext is used alongside the FeatureFlags component to enable
@@ -48,6 +49,7 @@ function FeatureFlags({
enableV12Overflowmenu = false,
enableTreeviewControllable = false,
enableExperimentalFocusWrapWithoutSentinels = false,
+ enableV12DynamicFloatingStyles = false,
}: FeatureFlagsProps): JSX.Element {
const parentScope = useContext(FeatureFlagContext);
const [prevParentScope, setPrevParentScope] = useState(parentScope);
@@ -59,6 +61,7 @@ function FeatureFlags({
'enable-treeview-controllable': enableTreeviewControllable,
'enable-experimental-focus-wrap-without-sentinels':
enableExperimentalFocusWrapWithoutSentinels,
+ 'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
...flags,
};
const [scope, updateScope] = useState(() => {
@@ -107,6 +110,7 @@ FeatureFlags.propTypes = {
enableV12Overflowmenu: PropTypes.bool,
enableTreeviewControllable: PropTypes.bool,
enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool,
+ enableV12DynamicFloatingStyles: PropTypes.bool,
};
/**
diff --git a/packages/react/src/components/FeatureFlags/overview.mdx b/packages/react/src/components/FeatureFlags/overview.mdx
index b4f398cef2bd..89e2722b2de3 100644
--- a/packages/react/src/components/FeatureFlags/overview.mdx
+++ b/packages/react/src/components/FeatureFlags/overview.mdx
@@ -53,7 +53,7 @@ in the Carbon monorepo.
| `enable-v12-overflowmenu` | Enable the use of the v12 OverflowMenu leveraging the Menu subcomponents | `false` | ✅ | |
| `enable-v12-tile-radio-icons` | Enable rendering of default icons in the tile components | `false` | ✅ | ✅ |
| `enable-v12-structured-list-visible-icons` | Enable icon components within StructuredList to always be visible | `false` | | ✅ |
-| `enable-v12-dynamic-floating-styles` | Enable dynamic setting of floating styles for components like Popover, Tooltip, etc. | `false` | ✅ | ✅ |
+| `enable-v12-dynamic-floating-styles` | Enable dynamic setting of floating styles for components like Popover, Tooltip, etc. | `false` | ✅ | |
## Turning on feature flags in Javascript/react
diff --git a/packages/react/src/feature-flags.js b/packages/react/src/feature-flags.js
index da81fa8e9548..39285bcfb072 100644
--- a/packages/react/src/feature-flags.js
+++ b/packages/react/src/feature-flags.js
@@ -14,4 +14,5 @@ FeatureFlags.merge({
'enable-experimental-tile-contrast': false,
'enable-v12-tile-radio-icons': false,
'enable-v12-structured-list-visible-icons': false,
+ 'enable-v12-dynamic-floating-styles': false,
});
diff --git a/packages/react/telemetry.yml b/packages/react/telemetry.yml
index 1d8adc7250a6..783a51fde402 100644
--- a/packages/react/telemetry.yml
+++ b/packages/react/telemetry.yml
@@ -328,6 +328,7 @@ collect:
# FeatureFlags
- enableExperimentalFocusWrapWithoutSentinels
- enableTreeviewControllable
+ - enableV12DynamicFloatingStyles
- enableV12Overflowmenu
- enableV12TileDefaultIcons
- enableV12TileRadioIcons
@@ -612,12 +613,12 @@ collect:
- top-start
# General - aria-current
- date
- - "false"
+ - 'false'
- location
- page
- step
- time
- - "true"
+ - 'true'
# General - buttonKind
- danger
- danger--ghost
@@ -661,9 +662,9 @@ collect:
- left
- right
# General - level
- - "0"
- - "1"
- - "2"
+ - '0'
+ - '1'
+ - '2'
# General - loadingStatus
- active
- error