fix: remove surfaceLevel

razorpay · Jan 8, 2024 · 26cfe03 · 26cfe03
1 parent 52eac86
commit 26cfe03
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 69 deletions.
diff --git a/packages/blade/src/components/ActionList/ActionList.tsx b/packages/blade/src/components/ActionList/ActionList.tsx
@@ -10,41 +10,15 @@ import { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContex
 import { makeAccessible } from '~utils/makeAccessible';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import type { TestID } from '~utils/types';
-import type { SurfaceLevels } from '~tokens/theme/theme';
 import BaseBox from '~components/Box/BaseBox';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
-import { throwBladeError } from '~utils/logger';
 import { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';
 
-type ActionListContextProp = Pick<ActionListProps, 'surfaceLevel'>;
-const ActionListContext = React.createContext<ActionListContextProp>({ surfaceLevel: 2 });
-const useActionListContext = (): ActionListContextProp => {
-  const context = React.useContext(ActionListContext);
-
-  if (__DEV__) {
-    if (!context) {
-      throwBladeError({
-        message: 'useActionListContext has to be called inside ActionListContext.Provider',
-        moduleName: 'ActionList',
-      });
-    }
-  }
-  return context;
-};
-
 type ActionListProps = {
   children: React.ReactNode[];
-  /**
-   * Decides the backgroundColor of ActionList
-   */
-  surfaceLevel?: Exclude<SurfaceLevels, 1>;
 } & TestID;
 
-const _ActionList = ({
-  children,
-  surfaceLevel = 2,
-  testID,
-}: ActionListProps): React.ReactElement => {
+const _ActionList = ({ children, testID }: ActionListProps): React.ReactElement => {
   const {
     setOptions,
     actionListItemRef,
@@ -66,7 +40,6 @@ const _ActionList = ({
     setOptions(actionListOptions);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actionListOptions]);
-  const actionListContextValue = React.useMemo(() => ({ surfaceLevel }), [surfaceLevel]);
 
   if (
     filteredValues.length <= 0 &&
@@ -87,38 +60,34 @@ const _ActionList = ({
   // 1. We don't render the box wrapper styles which includes shadows, padding, border etc
   // 2. to ensure GorhomBottomSheetSectionList works as expected, if we add extra wrappers GorhomBottomSheet won't render the content inside
   // NOTE: That this also means inside BottomSheet, ActionList won't render any ActionListHeader or Footer.
-  return (
-    <ActionListContext.Provider value={actionListContextValue}>
-      {isInBottomSheet ? (
-        <ActionListBox
-          isInBottomSheet={isInBottomSheet}
-          actionListItemWrapperRole={actionListItemWrapperRole}
-          childrenWithId={childrenWithId}
-          sectionData={sectionData}
-          isMultiSelectable={isMultiSelectable}
-          ref={actionListItemRef as any}
-        />
-      ) : (
-        <BaseBox
-          id={`${dropdownBaseId}-actionlist`}
-          {...makeAccessible({
-            role: actionListContainerRole,
-            multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,
-            labelledBy: `${dropdownBaseId}-label`,
-          })}
-          {...metaAttribute({ name: MetaConstants.ActionList, testID })}
-        >
-          <ActionListBox
-            isInBottomSheet={isInBottomSheet}
-            actionListItemWrapperRole={actionListItemWrapperRole}
-            childrenWithId={childrenWithId}
-            sectionData={sectionData}
-            isMultiSelectable={isMultiSelectable}
-            ref={actionListItemRef as any}
-          />
-        </BaseBox>
-      )}
-    </ActionListContext.Provider>
+  return isInBottomSheet ? (
+    <ActionListBox
+      isInBottomSheet={isInBottomSheet}
+      actionListItemWrapperRole={actionListItemWrapperRole}
+      childrenWithId={childrenWithId}
+      sectionData={sectionData}
+      isMultiSelectable={isMultiSelectable}
+      ref={actionListItemRef as any}
+    />
+  ) : (
+    <BaseBox
+      id={`${dropdownBaseId}-actionlist`}
+      {...makeAccessible({
+        role: actionListContainerRole,
+        multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,
+        labelledBy: `${dropdownBaseId}-label`,
+      })}
+      {...metaAttribute({ name: MetaConstants.ActionList, testID })}
+    >
+      <ActionListBox
+        isInBottomSheet={isInBottomSheet}
+        actionListItemWrapperRole={actionListItemWrapperRole}
+        childrenWithId={childrenWithId}
+        sectionData={sectionData}
+        isMultiSelectable={isMultiSelectable}
+        ref={actionListItemRef as any}
+      />
+    </BaseBox>
   );
 };
 
@@ -159,4 +128,4 @@ const ActionList = assignWithoutSideEffects(React.memo(_ActionList), {
 });
 
 export type { ActionListProps };
-export { ActionList, useActionListContext };
+export { ActionList };
diff --git a/packages/blade/src/components/ActionList/ActionListItem.tsx b/packages/blade/src/components/ActionList/ActionListItem.tsx
@@ -6,7 +6,6 @@ import { componentIds } from './componentIds';
 import type { StyledActionListItemProps } from './styles/getBaseActionListItemStyles';
 import { validateActionListItemProps, getNormalTextColor } from './actionListUtils';
 import { getActionListItemRole, getActionListSectionRole, isRoleMenu } from './getA11yRoles';
-import { useActionListContext } from './ActionList';
 import { Divider } from '~components/Divider';
 import BaseBox from '~components/Box/BaseBox';
 import type { IconComponent } from '~components/Icons';
@@ -117,7 +116,6 @@ const _ActionListSection = ({
   _hideDivider,
   _sectionChildValues,
 }: ActionListSectionProps): React.ReactElement => {
-  const { surfaceLevel } = useActionListContext();
   const { hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, filteredValues } = useDropdown();
   const hasAutoComplete =
     hasAutoCompleteInBottomSheetHeader ||
@@ -146,13 +144,12 @@ const _ActionListSection = ({
         role: getActionListSectionRole(),
         label: title,
       })}
-      backgroundColor={`surface.background.level${surfaceLevel}.lowContrast`}
       {...metaAttribute({ name: MetaConstants.ActionListSection, testID })}
     >
       {/* We're announcing title as group label so we can hide this */}
       {isSectionVisible ? (
         <StyledActionListSectionTitle {...makeAccessible({ hidden: true })}>
-          <Text color="surface.text.muted.lowContrast" size="small" weight="semibold">
+          <Text color="surface.text.gray.muted" size="small" weight="semibold">
             {title}
           </Text>
         </StyledActionListSectionTitle>
@@ -184,7 +181,7 @@ const _ActionListItemIcon = ({ icon }: { icon: IconComponent }): React.ReactElem
     <Icon
       color={
         intent === 'negative'
-          ? 'feedback.icon.negative.lowContrast'
+          ? 'feedback.icon.negative.intense'
           : getNormalTextColor(isDisabled, { isMuted: true })
       }
       size="medium"
@@ -313,7 +310,7 @@ const _ActionListItemBody = ({
             truncateAfterLines={1}
             color={
               intent === 'negative'
-                ? 'feedback.text.negative.lowContrast'
+                ? 'feedback.text.negative.intense'
                 : getNormalTextColor(isDisabled)
             }
           >

diff --git a/packages/blade/src/components/ActionList/ActionListNoResults.tsx b/packages/blade/src/components/ActionList/ActionListNoResults.tsx
@@ -11,11 +11,11 @@ const ActionListNoResults = (): React.ReactElement => {
       justifyContent="center"
       padding="spacing.5"
     >
-      <SearchIcon size="xlarge" color="surface.text.normal.lowContrast" />
+      <SearchIcon size="xlarge" color="surface.icon.gray.muted" />
       <Text marginTop="spacing.5" weight="semibold">
         No Search Result Found
       </Text>
-      <Text marginTop="spacing.3" size="small" type="subtle">
+      <Text color="surface.text.gray.subtle" marginTop="spacing.3" size="small">
         Try searching for a different value
       </Text>
     </Box>

diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './Amount';
 export * from './Accordion';
+export * from './ActionList';
 export * from './Badge';
 export * from './BladeProvider';
 export * from './BottomSheet';