Skip to content

Commit

Permalink
docs(flags): clarify enable-v12-dynamic-floating-styles not a sass fl…
Browse files Browse the repository at this point in the history 
…ag (#17887)

* docs(flags): clarify enable-v12-dynamic-floating-styles not a sass flag

* chore: update telemetry config

* chore: update snaps
  • Loading branch information
@tay1orjones
tay1orjones authored Oct 31, 2024
1 parent ab48a0a commit c300d45
Show file tree
Hide file tree
Showing 6 changed files with 341 additions and 6 deletions.
3 changes: 3 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9843,6 +9843,9 @@ Map {
"enableTreeviewControllable": Object {
"type": "bool",
},
"enableV12DynamicFloatingStyles": Object {
"type": "bool",
},
"enableV12Overflowmenu": Object {
"type": "bool",
},
Expand Down
326 changes: 326 additions & 0 deletions packages/react/src/components/FeatureFlags/__tests__/FeatureFlags-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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(
<FeatureFlags>
<TestComponent />
</FeatureFlags>
);

// Ensure the default value is as defined and as expected
expect(checkFlags).toHaveBeenLastCalledWith({
enableV12TileDefaultIcons: false,
});
expect(checkFlag).toHaveBeenLastCalledWith({
enableV12TileDefaultIcons: false,
});

// Enable the flag
rerender(
<FeatureFlags enableV12TileDefaultIcons>
<TestComponent />
</FeatureFlags>
);

// 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(
<FeatureFlags>
<TestComponent />
</FeatureFlags>
);

// Ensure the default value is as defined and as expected
expect(checkFlags).toHaveBeenLastCalledWith({
enableV12TileRadioIcons: false,
});
expect(checkFlag).toHaveBeenLastCalledWith({
enableV12TileRadioIcons: false,
});

// Enable the flag
rerender(
<FeatureFlags enableV12TileRadioIcons>
<TestComponent />
</FeatureFlags>
);

// 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(
<FeatureFlags>
<TestComponent />
</FeatureFlags>
);

// Ensure the default value is as defined and as expected
expect(checkFlags).toHaveBeenLastCalledWith({
enableV12Overflowmenu: false,
});
expect(checkFlag).toHaveBeenLastCalledWith({
enableV12Overflowmenu: false,
});

// Enable the flag
rerender(
<FeatureFlags enableV12Overflowmenu>
<TestComponent />
</FeatureFlags>
);

// 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(
<FeatureFlags>
<TestComponent />
</FeatureFlags>
);

// Ensure the default value is as defined and as expected
expect(checkFlags).toHaveBeenLastCalledWith({
enableTreeviewControllable: false,
});
expect(checkFlag).toHaveBeenLastCalledWith({
enableTreeviewControllable: false,
});

// Enable the flag
rerender(
<FeatureFlags enableTreeviewControllable>
<TestComponent />
</FeatureFlags>
);

// 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(
<FeatureFlags>
<TestComponent />
</FeatureFlags>
);

// Ensure the default value is as defined and as expected
expect(checkFlags).toHaveBeenLastCalledWith({
enableExperimentalFocusWrapWithoutSentinels: false,
});
expect(checkFlag).toHaveBeenLastCalledWith({
enableExperimentalFocusWrapWithoutSentinels: false,
});

// Enable the flag
rerender(
<FeatureFlags enableExperimentalFocusWrapWithoutSentinels>
<TestComponent />
</FeatureFlags>
);

// 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(
<FeatureFlags>
<TestComponent />
</FeatureFlags>
);

// Ensure the default value is as defined and as expected
expect(checkFlags).toHaveBeenLastCalledWith({
enableV12DynamicFloatingStyles: false,
});
expect(checkFlag).toHaveBeenLastCalledWith({
enableV12DynamicFloatingStyles: false,
});

// Enable the flag
rerender(
<FeatureFlags enableV12DynamicFloatingStyles>
<TestComponent />
</FeatureFlags>
);

// Ensure that when enabled, this flag does not error
expect(checkFlags).toHaveBeenLastCalledWith({
enableV12DynamicFloatingStyles: true,
});
expect(checkFlag).toHaveBeenLastCalledWith({
enableV12DynamicFloatingStyles: true,
});
});
});
});
4 changes: 4 additions & 0 deletions packages/react/src/components/FeatureFlags/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ interface FeatureFlagsProps {
enableV12Overflowmenu?: boolean;
enableTreeviewControllable?: boolean;
enableExperimentalFocusWrapWithoutSentinels?: boolean;
enableV12DynamicFloatingStyles?: boolean;
}
/**
* Our FeatureFlagContext is used alongside the FeatureFlags component to enable
Expand All @@ -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);
Expand All @@ -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(() => {
Expand Down Expand Up @@ -107,6 +110,7 @@ FeatureFlags.propTypes = {
enableV12Overflowmenu: PropTypes.bool,
enableTreeviewControllable: PropTypes.bool,
enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool,
enableV12DynamicFloatingStyles: PropTypes.bool,
};

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/FeatureFlags/overview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Loading

0 comments on commit c300d45

Please sign in to comment.