@nuskin/foundation-ui-components 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.10.0",
+    "version": "1.11.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/autocomplete/helper/RecentClearAll.tsx

@@ -1,4 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
+
 import { NsTypography } from '../../typography';
 
 type AutoCompleteButtonProps = {
@@ -9,20 +10,24 @@ type AutoCompleteButtonProps = {
     recentSearchText: string;
 };
 export const StyledClear = styled(NsTypography)`
+    margin: 4px 8px;
     :hover {
         opacity: 0.5;
     }
 `;
+const TypoWrapper = styled(NsTypography)`
+    margin: 4px 8px;
+`;
 export const RecentClearAll = (props: AutoCompleteButtonProps) => {
     const { show, onClick, text, testId, recentSearchText } = props;
     if (!show) {
         return null;
     }
     return (
-        <li className="justify-between flex p-3" onClick={onClick}>
-            <NsTypography data-testid={testId} variant="body-m" weight="bold">
+        <li className="justify-between flex p-0 m-0" onClick={onClick}>
+            <TypoWrapper data-testid={testId} variant="body-m" weight="bold">
                 {recentSearchText}
-            </NsTypography>
+            </TypoWrapper>
             <StyledClear
                 data-testid={testId}
                 variant="body-m"

package/src/common/autocomplete/helper/SeeMoreButton.tsx

@@ -1,7 +1,9 @@
 import { Dispatch, MutableRefObject, SetStateAction, useCallback } from 'react';
-import { styled, ColorUtils } from '@nuskin/foundation-theme';
 
-import { NsTypography, OptionsProps } from '../..';
+import { ColorUtils, styled } from '@nuskin/foundation-theme';
+
+import { NsTypography, OptionsProps } from '../../';
+
 const { getGenomeColor } = ColorUtils;
 export const ListStyled = styled.div`
     display: flex;
@@ -9,7 +11,8 @@ export const ListStyled = styled.div`
     flex-direction: row;
     align-items: center;
     gap: 10px;
-    padding: 4px 12px;
+    padding: 0;
+    margin: 4px 8px;
     cursor: pointer;
     &:hover {
         background: ${({ theme }) => getGenomeColor(theme, 'A10')};
@@ -51,7 +54,7 @@ export const SeeMoreButton = (props: SeeMoreButtonProps) => {
         return null;
     }
     return (
-        <ListStyled className="text-left p-3" onClick={handleSeeMore}>
+        <ListStyled className="text-left p-0" onClick={handleSeeMore}>
             <NsTypography
                 data-testid="autocomplete-loadmore-id"
                 variant="body-m"

package/src/common/autocomplete/helper/renderGroupName.tsx

@@ -1,12 +1,18 @@
 import { AutocompleteRenderGroupParams } from '@mui/material';
-import { NsTypography, OptionsProps } from '../..';
+import { styled } from '@nuskin/foundation-theme';
 
+import { OptionsProps } from '../../autocomplete';
+import { NsTypography } from '../../typography';
+
+const GroupNameTypography = styled(NsTypography)`
+    margin: 4px 8px;
+`;
 export const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
     <li key={key}>
         {group ? (
-            <NsTypography variant="body-m" weight="bold" className="p-3">
+            <GroupNameTypography variant="body-m" weight="bold" className="p-0 m-0 border-solid">
                 {group}
-            </NsTypography>
+            </GroupNameTypography>
         ) : null}
         <ul className="p-0">{children}</ul>
     </li>