refactor: remove flag PS_22149_THEME_SELECTION_COLORS (#1654)

apis/nucleus/src/__tests__/index.test.js

@@ -66,9 +66,6 @@ describe('nuked()', () => {
               element: anchorElement,
               fieldIdentifier,
               options,
-              flags: {
-                isEnabled: expect.any(Function),
-              },
               key: expect.any(String),
               stateName: '$',
             },

apis/nucleus/src/components/listbox/ListBoxInline.jsx

@@ -80,7 +80,6 @@ function ListBoxInline({ options, layout }) {
     showLock = false,
     components,
     selectDisabled = () => false,
-    flags,
     disablePortal = true,
   } = options;
 
@@ -89,8 +88,7 @@ function ListBoxInline({ options, layout }) {
   const { translator, keyboardNavigation, themeApi, constraints } = useContext(InstanceContext);
 
   const { checkboxes = checkboxesOption } = layout || {};
-  const themeSelectionColorsEnabled = flags?.isEnabled('PS_22149_THEME_SELECTION_COLORS');
-  const styles = getStyles({ app, themeApi, theme, components, checkboxes, themeSelectionColorsEnabled });
+  const styles = getStyles({ app, themeApi, theme, components, checkboxes });
 
   const isDirectQuery = isDirectQueryEnabled({ appLayout: app?.layout });
 

apis/nucleus/src/components/listbox/ListBoxPopover.jsx

@@ -42,7 +42,6 @@ export default function ListBoxPopover({
   components,
   checkboxes: checkboxesOption,
   selectDisabled = () => false,
-  flags,
   sortCriteria = [
     {
       qSortByState: 1,
@@ -102,8 +101,7 @@ export default function ListBoxPopover({
   const keyboard = useTempKeyboard({ containerRef, enabled: keyboardNavigation });
   const { checkboxes = checkboxesOption } = layout || {};
 
-  const themeSelectionColorsEnabled = flags?.isEnabled('PS_22149_THEME_SELECTION_COLORS');
-  const styles = getStyles({ themeApi, theme, components, checkboxes, themeSelectionColorsEnabled });
+  const styles = getStyles({ themeApi, theme, components, checkboxes });
 
   useEffect(() => {
     if (selections && open) {

apis/nucleus/src/components/listbox/ListBoxPopoverWrapper.jsx

@@ -22,7 +22,7 @@ export const getOptions = (usersOptions = {}) => {
   return squashedOptions;
 };
 
-export default function ListBoxPopoverWrapper({ app, fieldIdentifier, stateName, element, options = {}, flags }) {
+export default function ListBoxPopoverWrapper({ app, fieldIdentifier, stateName, element, options = {} }) {
   const [showState, setShowstate] = useState(!!options.show);
   const handleCloseShowState = () => {
     setShowstate(false);
@@ -43,7 +43,6 @@ export default function ListBoxPopoverWrapper({ app, fieldIdentifier, stateName,
       stateName={stateName}
       autoFocus={options.autoFocus}
       components={options.components}
-      flags={flags}
       sortCriteria={options.sortCriteria}
     />
   );

apis/nucleus/src/components/listbox/ListBoxPortal.jsx

@@ -55,7 +55,7 @@ export const getOptions = (usersOptions = {}) => {
 };
 
 const ListBoxWrapper = forwardRef(
-  ({ app, fieldIdentifier, qId, stateName, element, initialOptions, renderedCallback, flags }, ref) => {
+  ({ app, fieldIdentifier, qId, stateName, element, initialOptions, renderedCallback }, ref) => {
     const [options, setOptions] = useState(initialOptions);
     const { isExistingObject, hasExternalSelectionsApi } = identify({ qId, options });
 
@@ -97,7 +97,6 @@ const ListBoxWrapper = forwardRef(
         model,
         app,
         renderedCallback,
-        flags,
       }),
       [options, selections, model, app]
     );
@@ -120,7 +119,6 @@ export default function ListBoxPortal({
   stateName = '$',
   options = {},
   renderedCallback,
-  flags,
 }) {
   const listRef = React.createRef();
   const portal = ReactDOM.createPortal(
@@ -133,7 +131,6 @@ export default function ListBoxPortal({
       stateName={stateName}
       initialOptions={options}
       renderedCallback={renderedCallback}
-      flags={flags}
     />,
     element,
     uid()

apis/nucleus/src/components/listbox/__tests__/list-box-inline.test.jsx

@@ -125,7 +125,6 @@ describe('<ListboxInline />', () => {
       fetchStart: 'fetchStart',
       isPopover: false,
       components: [],
-      flags: { isEnabled: () => false },
     };
 
     useRef.mockReturnValue({ current: 'current' });

apis/nucleus/src/components/listbox/assets/__tests__/styling.test.js

@@ -161,7 +161,7 @@ describe('styling', () => {
       const POSSIBLE_COLOR = 'rgb(255, 255, 255)';
       const CONTRASTING_TO_POSSIBLE = '#000000';
 
-      themeApi.getStyle = (a, b, c) => (c === 'backgroundColor' ? POSSIBLE_COLOR : `${a},${b},${c}`);
+      themeApi.getStyle = (ns, path, prop) => (prop.includes('possible') ? POSSIBLE_COLOR : `${ns},${path},${prop}`);
       components[0].content.fontColor.color = '#FFFFFF';
       const styles2 = getStyling({ app, themeApi, theme, components });
       expect(styles2.content.color).toEqual(CONTRASTING_TO_POSSIBLE);
@@ -200,6 +200,7 @@ describe('styling', () => {
     beforeEach(() => {
       components = [];
       themeSelectionColorsEnabled = true;
+      themeApi.getStyle = () => undefined;
     });
 
     const getStylingCaller = () =>
@@ -239,6 +240,8 @@ describe('styling', () => {
     });
 
     it('should return selection colors from themeAPI', () => {
+      themeApi.getStyle = (ns, path, prop) => `${ns},${path},${prop}`;
+
       expect(getStylingCaller()).toMatchObject({
         selected: 'object.listBox,,dataColors.selected',
         alternative: 'object.listBox,,dataColors.alternative',
@@ -248,7 +251,7 @@ describe('styling', () => {
       });
     });
     it('should return selection colors from mui theme, except possible which returns background color', () => {
-      themeSelectionColorsEnabled = false;
+      themeApi.getStyle = (ns, path, prop) => (prop === 'backgroundColor' ? `${ns},${path},${prop}` : undefined);
 
       expect(getStylingCaller()).toMatchObject({
         selected: 'selected-from-theme',
@@ -260,9 +263,6 @@ describe('styling', () => {
     });
 
     it('should return selection colors from mui theme, for all states', () => {
-      themeSelectionColorsEnabled = false;
-      themeApi.getStyle = (ns, path, prop) => (prop === 'backgroundColor' ? undefined : `${ns},${path},${prop}`);
-
       expect(getStylingCaller()).toMatchObject({
         selected: 'selected-from-theme',
         alternative: 'alternative-from-theme',
@@ -273,8 +273,6 @@ describe('styling', () => {
     });
 
     it('should return selection colors from hardcoded default', () => {
-      themeSelectionColorsEnabled = false;
-      themeApi.getStyle = (ns, path, prop) => (prop === 'backgroundColor' ? undefined : `${ns},${path},${prop}`);
       theme.palette.selected = {};
 
       expect(getStylingCaller()).toMatchObject(DEFAULT_SELECTION_COLORS);

apis/nucleus/src/components/listbox/assets/styling.js

@@ -24,14 +24,7 @@ export function getOverridesAsObject(components = []) {
   return overrides;
 }
 
-function getSelectionColors({
-  getColorPickerColor,
-  theme,
-  getListboxStyle,
-  overrides,
-  checkboxes,
-  themeSelectionColorsEnabled,
-}) {
+function getSelectionColors({ getColorPickerColor, theme, getListboxStyle, overrides, checkboxes }) {
   const componentContentTextColor = overrides.theme?.content?.fontColor;
 
   // color priority: layout.component > theme content color > MUI theme
@@ -42,9 +35,6 @@ function getSelectionColors({
 
   const useContrastTextColor = !checkboxes && (overrides.theme?.content?.useContrastColor ?? true);
 
-  const getSelectionThemeColor = (state) =>
-    themeSelectionColorsEnabled ? getListboxStyle('', `dataColors.${state}`) : undefined;
-
   const componentSelectionColors = overrides.selections?.colors || {};
 
   const getSelectionStateColors = (state) => {
@@ -53,7 +43,7 @@ function getSelectionColors({
     // color priority: layout.component > theme dataColors > theme background (only for 'possible') > MUI theme > hardcoded default
     const color =
       getColorPickerColor(componentSelectionColors[state]) ||
-      getSelectionThemeColor(state) ||
+      getListboxStyle('', `dataColors.${state}`) ||
       (state === 'possible' && getListboxStyle('', 'backgroundColor')) ||
       theme.palette?.selected?.[paletteState] ||
       DEFAULT_SELECTION_COLORS[state];
@@ -100,14 +90,7 @@ function getSearchBGColor(bgCol, getListboxStyle) {
   return searchBgColorObj.isInvalid() ? bgCol : searchBgColorObj.getRGBA();
 }
 
-export default function getStyles({
-  app,
-  themeApi,
-  theme,
-  components = [],
-  checkboxes = false,
-  themeSelectionColorsEnabled = false,
-}) {
+export default function getStyles({ app, themeApi, theme, components = [], checkboxes = false }) {
   const overrides = getOverridesAsObject(components);
   const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
   const getColorPickerColor = (c) => (c?.index > 0 || c?.color ? themeApi.getColorPickerColor(c, false) : undefined);
@@ -118,7 +101,6 @@ export default function getStyles({
     getListboxStyle,
     overrides,
     checkboxes,
-    themeSelectionColorsEnabled,
   });
   const themeOverrides = overrides.theme || {};
 

apis/nucleus/src/index.js

@@ -562,7 +562,6 @@ function nuked(configuration = {}) {
                 }),
                 stateName: options.stateName || '$',
                 renderedCallback: resolve,
-                flags: halo.public.galaxy.flags,
               });
               root.add(this._instance);
             });
@@ -631,7 +630,6 @@ function nuked(configuration = {}) {
             fieldIdentifier,
             options: opts,
             stateName: options.stateName || '$',
-            flags: halo.public.galaxy.flags,
           });
           root.add(api._popoverInstance);
         },