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