Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Oct 31, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0d162b7
docs(flags): clarify enable-v12-dynamic-floating-styles not a sass flag
tay1orjones Oct 25, 2024
f563f35
chore: update telemetry config
tay1orjones Oct 25, 2024
d427d9f
chore: update snaps
tay1orjones Oct 25, 2024
0aa1ef3
Merge branch 'main' into fix-floating-ui-flag
tay1orjones Oct 25, 2024
6855963
Merge branch 'fix-floating-ui-flag' of github.com:tay1orjones/carbon …
tay1orjones Oct 31, 2024
ea5d089
Merge branch 'main' of github.com:carbon-design-system/carbon into fi…
tay1orjones Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading