Merge branch 'main' into 6756-side-panel-framer-motion-removal

e2e/components/NotificationsPanel/NotificationsPanel-test.avt.e2e.js

@@ -15,7 +15,7 @@ test.describe('NotificationsPanel @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'NotificationsPanel',
-      id: 'ibm-products-patterns-notifications-notificationspanel--default',
+      id: 'ibm-products-components-notifications-panel-notificationspanel--default',
       globals: {
         carbonTheme: 'white',
       },
@@ -28,7 +28,7 @@ test.describe('NotificationsPanel @avt', () => {
   test('@avt-notification-panel-focus-trap', async ({ page }) => {
     await visitStory(page, {
       component: 'NotificationsPanel',
-      id: 'ibm-products-patterns-notifications-notificationspanel--default',
+      id: 'ibm-products-components-notifications-panel-notificationspanel--default',
       globals: {
         carbonTheme: 'white',
       },

packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -8,7 +8,7 @@
 @use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/spacing' as *;
 @use '@carbon/react/scss/motion' as *;
-@use '@carbon/styles/scss/components/tag' as *;
+@use '@carbon/styles/scss/components/tag/tokens' as *;
 @use '@carbon/styles/scss/utilities/focus-outline';
 @use '../../../global/styles/project-settings' as c4p-settings;
 @use '@carbon/styles/scss/type';

packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -15,7 +15,7 @@
 @use '@carbon/react/scss/utilities';
 @use '@carbon/react/scss/motion' as *;
 @use '@carbon/react/scss/utilities/focus-outline';
-@use '@carbon/styles/scss/components/tag';
+@use '@carbon/styles/scss/components/tag/tokens' as *;
 
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/react/scss/colors' as *;

packages/ibm-products-styles/src/components/EditTearsheet/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2025, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/react/scss/components/toggle/toggle';
+@use '@carbon/react/scss/components/ui-shell/side-nav';

packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 2022, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -17,10 +17,6 @@
 // Other Carbon settings.
 @use '@carbon/react/scss/grid' as *;
 
-// EditTearsheet uses the following Carbon components:
-@use '@carbon/react/scss/components/toggle/toggle';
-@use '@carbon/react/scss/components/ui-shell/side-nav';
-
 // EditTearsheet uses the following IBM Products components:
 // TearsheetShell
 @use '../Tearsheet/tearsheet';

packages/ibm-products-styles/src/components/EditTearsheet/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2025, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './edit-tearsheet';

packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -15,17 +15,6 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/react/scss/grid';
-
-// UserAvatar uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by UserAvatar
-@use '@carbon/react/scss/components/tooltip';
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-
 $block-class: #{$pkg-prefix}--user-avatar;
 
 $sizes: (

packages/ibm-products-styles/src/components/_index-released-only-with-carbon.scss

@@ -20,6 +20,7 @@
 @use './CreateTearsheet/index-with-carbon' as *;
 @use './Datagrid/index-with-carbon' as *;
 @use './EditInPlace/index-with-carbon' as *;
+@use './EditTearsheet/index-with-carbon' as *;
 @use './EmptyStates/index-with-carbon' as *;
 @use './ExportModal/index-with-carbon' as *;
 @use './ExpressiveCard/index-with-carbon' as *;

packages/ibm-products-styles/src/components/_index-with-carbon.scss

@@ -44,6 +44,7 @@
 @use './EditSidePanel/index-with-carbon' as *;
 @use './OptionsTile/index-with-carbon' as *;
 @use './EditInPlace/index-with-carbon' as *;
+@use './EditTearsheet/index-with-carbon' as *;
 @use './DataSpreadsheet/index-with-carbon' as *;
 @use './Datagrid/index-with-carbon' as *;
 @use './EditUpdateCards/index-with-carbon' as *;

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js

@@ -267,6 +267,7 @@ const inputData = {
       config: {
         component: CustomInput,
         operators: customOperators,
+        valueFormatter: (value) => value?.toUpperCase(),
       },
     },
   ],
@@ -396,7 +397,7 @@ const defaultProps = {
   getConditionState: () => {},
   variant: NON_HIERARCHICAL_VARIANT,
 };
-
+const testInputText = 'testID123';
 const inputConfigOptionType = {
   properties: [
     {
@@ -786,12 +787,12 @@ describe(componentName, () => {
     );
 
     const inputText = document.querySelector('#id');
-    fireEvent.change(inputText, { target: { value: 'testID123' } });
+    fireEvent.change(inputText, { target: { value: testInputText } });
 
     const container = document.querySelector(`.${blockClass}`);
     await act(() => userEvent.click(container));
 
-    const selectedItem = screen.getByRole('button', { name: 'testID123' });
+    const selectedItem = screen.getByRole('button', { name: testInputText });
 
     expect(selectedItem);
   });
@@ -815,12 +816,12 @@ describe(componentName, () => {
     await act(() => userEvent.click(isOperator));
 
     const inputText = document.querySelector('#id_long');
-    fireEvent.change(inputText, { target: { value: 'testID123' } });
+    fireEvent.change(inputText, { target: { value: testInputText } });
 
     const container = document.querySelector(`.${blockClass}`);
     await act(() => userEvent.click(container));
 
-    const selectedItem = screen.getByRole('button', { name: 'testID123' });
+    const selectedItem = screen.getByRole('button', { name: testInputText });
 
     expect(selectedItem);
   });
@@ -1612,12 +1613,15 @@ describe(componentName, () => {
     );
 
     const inputText = document.querySelector('#customInput');
-    fireEvent.change(inputText, { target: { value: 'testID123' } });
+    fireEvent.change(inputText, { target: { value: testInputText } });
 
     const container = document.querySelector(`.${blockClass}`);
     await act(() => userEvent.click(container));
-
-    const selectedItem = screen.getByRole('button', { name: 'testID123' });
+    // the value formatter will format to uppercase
+    // cspell: disable
+    const selectedItem = screen.getByRole('button', {
+      name: testInputText.toUpperCase(),
+    });
 
     expect(selectedItem);
   });

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx

@@ -255,6 +255,7 @@ ConditionBuilder.propTypes = {
               label: PropTypes.string.isRequired,
             })
           ),
+          valueFormatter: PropTypes.func,
         }),
       })
     ),

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts

@@ -90,7 +90,9 @@ export interface PropertyConfigNumber {
 
 export type PropertyConfigDate = {
   type: 'date';
-  config: object;
+  config: {
+    valueFormatter?: (value: string) => string;
+  };
 };
 
 export type PropertyConfigTime = {
@@ -108,6 +110,7 @@ export type PropertyConfigCustom = {
       label: string;
       id: string;
     }[];
+    valueFormatter?: (value: string) => string;
   };
 };
 

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx

@@ -120,7 +120,7 @@ export const ConditionBuilderItem = ({
     }
     const propertyId =
       rest['data-name'] == 'valueField' && type
-        ? getValue[type](label, config)
+        ? getValue(type, label, config)
         : labelText;
 
     return {

packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js

@@ -661,6 +661,10 @@ export const inputData = {
       config: {
         component: CustomInput,
         operators: customOperators,
+        valueFormatter: (value) => {
+          // add any customization to the value to be populated
+          return value;
+        },
       },
     },
   ],

packages/ibm-products/src/components/ConditionBuilder/utils/util.js

@@ -112,35 +112,42 @@ const formatDate = (date) => {
   return `${day}/${month}/${year}`;
 };
 
-export const getValue = {
-  text: (value) => value,
-  textarea: (value) => value,
-  time: (value) => value,
-  number: (value) => value,
-  option: (value) => {
-    if (value && typeof value !== 'string') {
-      const selectedValues = Array.isArray(value) ? value : [value];
-      return selectedValues.map((option) => option.label).join(', ');
-    }
+export const getValue = (type, value, config) => {
+  if (config?.valueFormatter && ['date', 'custom'].includes(type)) {
+    return config.valueFormatter(value);
+  } else {
+    const formatters = {
+      text: (value) => value,
+      textarea: (value) => value,
+      time: (value) => value,
+      number: (value) => value,
+      option: (value) => {
+        if (value && typeof value !== 'string') {
+          const selectedValues = Array.isArray(value) ? value : [value];
+          return selectedValues.map((option) => option.label).join(', ');
+        }
 
-    return value;
-  },
-  date: (value) => {
-    if (Array.isArray(value) && value.length > 1) {
-      const start =
-        value?.[0] && !isNaN(new Date(value[0]))
-          ? formatDate(new Date(value[0]))
-          : '';
-      const end =
-        value?.[1] && !isNaN(new Date(value[1]))
-          ? formatDate(new Date(value[1]))
-          : '';
-      return `${start} To ${end}`;
-    } else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
-      return formatDate(new Date(value[0]));
-    } else {
-      return value;
-    }
-  },
-  custom: (value) => value,
+        return value;
+      },
+      date: (value) => {
+        if (Array.isArray(value) && value.length > 1) {
+          const start =
+            value?.[0] && !isNaN(new Date(value[0]))
+              ? formatDate(new Date(value[0]))
+              : '';
+          const end =
+            value?.[1] && !isNaN(new Date(value[1]))
+              ? formatDate(new Date(value[1]))
+              : '';
+          return `${start} To ${end}`;
+        } else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
+          return formatDate(new Date(value[0]));
+        } else {
+          return value;
+        }
+      },
+      custom: (value) => value,
+    };
+    return formatters[type](value, config);
+  }
 };

packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.stories.jsx

@@ -16,6 +16,7 @@ import {
   HeaderGlobalAction,
 } from '@carbon/react';
 import { User, Notification } from '@carbon/react/icons';
+import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
 import styles from './_storybook-styles.scss?inline';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import { UnreadNotificationBell } from './preview-components/UnreadNotificationBell';
@@ -30,17 +31,17 @@ const storyBlockClass = `${pkg.prefix}--notifications-panel__story`;
 const blockClass = `${pkg.prefix}--notifications-panel`;
 
 export default {
-  title: 'IBM Products/Patterns/Notifications/NotificationsPanel',
+  title: 'IBM Products/Components/Notifications panel/NotificationsPanel',
   component: NotificationsPanel,
   tags: ['autodocs'],
   parameters: {
     styles,
     layout: 'fullscreen',
-    /*
-docs: {
-      page: mdx,
+    docs: {
+      page: () => (
+        <StoryDocsPage altGuidelinesHref="https://pages.github.ibm.com/carbon/ibm-products/components/notification-panel/usage/" />
+      ),
     },
-*/
   },
 };