@scality/core-ui 0.193.0 → 0.195.0

package/src/lib/components/error-pages/ErrorPage401.component.tsx

@@ -42,7 +42,7 @@ function ErrorPage401({
   return (
     <ErrorPageContainer className="sc-error-page401" {...rest}>
       <Row>
-        <Icon name="Exclamation-triangle" size="2x" color="statusWarning" />
+        <Icon name="Exclamation-circle" size="2x" color="statusWarning" />
         <Title>{translations[locale].unexpected_error}</Title>
       </Row>
       <Row>

package/src/lib/components/error-pages/ErrorPage404.component.tsx

@@ -36,7 +36,7 @@ function ErrorPage404({ locale = 'en', onReturnHomeClick, ...rest }: Props) {
   return (
     <ErrorPageContainer className="sc-error-page404" {...rest}>
       <Row>
-        <Icon name="Exclamation-triangle" size="2x" color="statusWarning" />
+        <Icon name="Exclamation-circle" size="2x" color="statusWarning" />
         <Title>{translations[locale].not_exist}</Title>
       </Row>
       <Row>

package/src/lib/components/error-pages/ErrorPage500.component.tsx

@@ -49,7 +49,7 @@ function ErrorPage500({
   return (
     <ErrorPageContainer className="sc-error-page500" {...rest}>
       <Row>
-        <Icon name="Exclamation-triangle" size="2x" color="statusWarning" />
+        <Icon name="Exclamation-circle" size="2x" color="statusWarning" />
         <Title>{translations[locale].unexpected_error}</Title>
       </Row>
       <Row>

package/src/lib/components/form/Form.component.tsx

@@ -18,7 +18,7 @@ import { Box } from '../box/Box';
 import { Icon, IconName } from '../icon/Icon.component';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { ScrollbarWrapper } from '../scrollbarwrapper/ScrollbarWrapper.component';
-import { Text } from '../text/Text.component';
+import { HelperText, Text } from '../text/Text.component';
 
 const DESCRIPTION_PREFIX = 'describe-';
 const LABEL_PREFIX = 'label-';
@@ -202,33 +202,19 @@ const FormGroup = ({
         >
           {content}
           {error ? (
-            <Text
-              variant="Smaller"
-              color="statusCritical"
-              isEmphazed
-              id={`${DESCRIPTION_PREFIX}${id}`}
-            >
-              {error}
-            </Text>
+            <HelperText color="statusCritical" id={`${DESCRIPTION_PREFIX}${id}`}>{error}</HelperText>
           ) : help ? (
             <div
               style={{
                 opacity: disabled ? 0.5 : 1,
               }}
             >
-              <Text
-                variant="Smaller"
-                color="textSecondary"
-                isEmphazed
-                id={`${DESCRIPTION_PREFIX}${id}`}
-              >
-                {help}
-              </Text>
+              <HelperText color="textSecondary" id={`${DESCRIPTION_PREFIX}${id}`}>{help}</HelperText>
             </div>
           ) : (
-            <Text variant="Smaller" isEmphazed>
+            <HelperText>
               &nbsp;
-            </Text>
+            </HelperText>
           )}
         </Stack>
       </Box>

package/src/lib/components/icon/CustomsIcons.tsx

@@ -50,3 +50,39 @@ export const RemoteGroup = ({ ariaLabel, color, size }) => {
     </svg>
   );
 };
+
+export const Bucket = ({ ariaLabel, color, size }) => {
+  const getColor = useGetColor(color);
+  return (
+    <svg
+      viewBox="0 0 32 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
+      aria-label={ariaLabel}
+    >
+      <path
+        d="M30.0239 0C31.2114 0 32.1489 1.125 31.9614 2.3125L28.5239 24.5625C28.2114 26.5625 26.5239 28 24.5239 28H7.46143C5.46143 28 3.77393 26.5625 3.52393 24.5625L0.0239303 2.3125C-0.16357 1.125 0.77393 0 2.02393 0H30.0239ZM27.6489 4H4.33643L6.21143 16H25.7739L27.6489 4Z"
+        fill={getColor}
+      />
+    </svg>
+  );
+};
+
+export const Buckets = ({ ariaLabel, color, size }) => {
+  const getColor = useGetColor(color);
+  return (
+    <svg
+      viewBox="0 0 37 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
+      aria-label={ariaLabel}
+    >
+      <path
+        d="M35.1063 9.33301C35.9032 9.33313 36.5329 10.0834 36.4071 10.875L34.0995 25.708C33.8897 27.0412 32.7571 27.9999 31.4149 28H24.1278C26.417 27.5019 28.221 25.649 28.5985 23.2334V23.2305L29.0975 20H32.2538L33.5126 12H30.3329L30.745 9.33301H35.1063ZM28.0223 0C29.1305 0.000168028 30.0049 1.04998 29.8299 2.1582L26.6219 22.9248C26.3303 24.7915 24.7552 26.1338 22.8885 26.1338H6.96373C5.09707 26.1338 3.52226 24.7915 3.28893 22.9248L0.0223272 2.1582C-0.152604 1.04996 0.721996 0.000113715 1.88854 0H28.0223ZM4.04674 3.7334L5.79674 14.9336H24.0555L25.8055 3.7334H4.04674ZM22.4901 12H17.8671L18.0135 12.9336H15.2987L14.9725 10.875C14.8467 10.0834 15.4756 9.33323 16.3143 9.33301H22.9071L22.4901 12Z"
+        fill={getColor}
+      />
+    </svg>
+  );
+};

package/src/lib/components/icon/Icon.component.tsx

@@ -10,142 +10,12 @@ import {
 import styled, { css } from 'styled-components';
 import { CoreUITheme } from '../../style/theme';
 import { Loader } from '../loader/Loader.component';
-import { RemoteGroup, RemoteUser } from './CustomsIcons';
+import { Bucket, Buckets, RemoteGroup, RemoteUser } from './CustomsIcons';
+import { iconTable } from './iconTable';
 
 // Module-level cache for imported icons
 const iconCache: Record<string, any> = {};
 
-export const iconTable = {
-  Account: 'fas faWallet',
-  Backend: 'fas faNetworkWired',
-  Tape: 'fas faTape',
-  'Node-backend': 'fas faServer',
-  'Volume-backend': 'fas faHdd',
-  'Node-pdf': 'fas faDatabase',
-  'Volume-pdf': 'fas faCompactDisc',
-  Network: 'fas faProjectDiagram',
-  Bucket: 'fas faGlassWhiskey',
-  'Cloud-backend': 'fas faCloud',
-  Datacenter: 'fas faWarehouse',
-  'Simple-user': 'fas faUser',
-  User: 'fas faUserCog',
-  Group: 'fas faUsers',
-  Alert: 'fas faBell',
-  Bell: 'far faBell',
-  'Lat-menu': 'fas faBars',
-  Dashboard: 'fas faDesktop',
-  Workflow: 'fas faRoute',
-  Expiration: 'fas faStopwatch',
-  Replication: 'fas faCoins',
-  Transition: 'fas faRocket',
-  Discovery: 'fas faReply',
-  Metrics: 'fas faChartLine',
-  Edit: 'fas faEdit',
-  Logs: 'far faFileAlt',
-  Lock: 'fa faLock',
-  'Lock-open': 'fa faLockOpen',
-  'Create-add': 'fas faPlus',
-  Delete: 'fas faTrash',
-  Save: 'fas faSave',
-  'External-link': 'fas faExternalLinkAlt',
-  Link: 'fas faLink',
-  Unlink: 'fas faUnlink',
-  Close: 'fas faTimes',
-  'Dropdown-down': 'fas faCaretDown',
-  'Dropdown-up': 'fas faCaretUp',
-  Search: 'fas faSearch',
-  More: 'fas faEllipsisV',
-  Info: 'fas faQuestionCircle',
-  Sync: 'fas faSync',
-  Export: 'fas faFileExport',
-  Copy: 'far faClone',
-  'Simple-upload': 'fas faUpload',
-  Upload: 'fas faFileUpload',
-  'Add-plus': 'fas faPlusSquare',
-  Minus: 'fas faMinus',
-  'Remove-minus': 'fas faMinusSquare',
-  Sort: 'fas faSort',
-  'Sort-up': 'fas faSortUp',
-  'Sort-down': 'fas faSortDown',
-  Calendar: 'fas faCalendarWeek',
-  'Calendar-minus': 'fas faCalendarMinus',
-  'Arrow-up': 'fas faArrowUp',
-  'Arrow-down': 'fas faArrowDown',
-  'Arrow-right': 'fas faArrowRight',
-  'Arrow-left': 'fas faArrowLeft',
-  'Arrow-alt-circle-up': 'fas faArrowAltCircleUp',
-  Folder: 'far faFolder',
-  File: 'far faFile',
-  'File-invoice': 'fas faFileInvoice',
-  License: 'fas faFileInvoice',
-  'Deletion-marker': 'fas faBan',
-  'Map-marker': 'fas faMapMarkerAlt',
-  Location: 'fas faMapMarkerAlt',
-  'Info-circle': 'fas faInfoCircle',
-  'Exclamation-triangle': 'fas faExclamationTriangle',
-  'Exclamation-circle': 'fas faExclamationCircle',
-  Exclamation: 'fas faExclamation',
-  Check: 'fas faCheck',
-  Protected: 'fas faShieldAlt',
-  'Chevron-left': 'fas faChevronLeft',
-  'Chevron-right': 'fas faChevronRight',
-  'Chevron-down': 'fas faChevronDown',
-  'Chevron-up': 'fas faChevronUp',
-  'Angle-right': 'fas faAngleRight',
-  'Angle-double-right': 'fas faAngleDoubleRight',
-  Language: 'fas faLanguage',
-  Theme: 'fas faPalette',
-  Documentation: 'fas faClipboardList',
-  Support: 'fas faComments',
-  EULA: 'fas faFileContract',
-  'Log-out': 'fas faSignOutAlt',
-  Hourglass: 'far faHourglass',
-  Pause: 'fas faPause',
-  'Pause-circle': 'far faPauseCircle',
-  'Play-circle': 'far faPlayCircle',
-  Upgrade: 'fas faLevelUpAlt',
-  Expansion: 'fas faExpandAlt',
-  Rebalance: 'fas faBalanceScale',
-  Maintenance: 'fas faHardHat',
-  Role: 'fas faHatCowboy',
-  'Change-erasure': 'fas faExchangeAlt',
-  'Circle-health': 'fas faCircle',
-  'Circle-empty': 'far faCircle',
-  'Dot-circle': 'fas faDotCircle',
-  'Check-circle': 'fas faCheckCircle',
-  'Times-circle': 'fas faTimesCircle',
-  Toolbox: 'fas faToolbox',
-  Cubes: 'fas faCubes',
-  Policy: 'fas faFileSignature',
-  Pen: 'fa faPen',
-  Pencil: 'fas faPencilAlt',
-  Eye: 'fas faEye',
-  EyeSlash: 'fas faEyeSlash',
-  Snowflake: 'fas faSnowflake',
-  Key: 'fas faKey',
-  Filter: 'fas faFilter',
-  Download: 'fas faDownload',
-  Certificate: 'fas faCertificate',
-  Redo: 'fas faRedoAlt',
-  Eraser: 'fas faEraser',
-  'ID-card': 'fas faIdCard',
-  Setting: 'fas faCog', //TODO: Rename to Gear in FA v6 <i class="fa-sharp fa-solid fa-gear"></i>
-  Desktop: 'fas faDesktop',
-  Globe: 'fas faGlobe',
-  Satellite: 'fas faSatelliteDish',
-  LightMode: 'fas faSun',
-  DarkMode: 'fas faMoon',
-  News: 'fas faBullhorn',
-  Ring: 'fas faRing',
-  Stop: 'fas faStop',
-  Play: 'fas faPlay',
-  Mail: 'fas faEnvelope',
-  ThumbsUp: 'far faThumbsUp',
-  ThumbsDown: 'far faThumbsDown',
-  Sidebar: 'fas faColumns',
-  Bookopen: 'fas faBookOpen',
-};
-
 type IconProps = {
   'aria-label'?: string;
   color?: string;
@@ -164,10 +34,18 @@ export const customIcons: Record<
   'Remote-group': ({ 'aria-label': ariaLabel, color, size }) => (
     <RemoteGroup ariaLabel={ariaLabel} color={color} size={size} />
   ),
+  Bucket: ({ 'aria-label': ariaLabel, color, size }) => (
+    <Bucket ariaLabel={ariaLabel} color={color} size={size} />
+  ),
+  Buckets: ({ 'aria-label': ariaLabel, color, size }) => (
+    <Buckets ariaLabel={ariaLabel} color={color} size={size} />
+  ),
 };
 
 customIcons['Remote-user'].displayName = 'RemoteUser';
 customIcons['Remote-group'].displayName = 'RemoteGroup';
+customIcons['Bucket'].displayName = 'Bucket';
+customIcons['Buckets'].displayName = 'Buckets';
 
 const IconStyled = styled(FontAwesomeIcon)`
   ${(props) => {
@@ -272,10 +150,12 @@ function NonWrappedIcon({
     }
 
     // Handle FontAwesome icons with dynamic import
-    import(`@fortawesome/${fontAwesomeType}/${iconClass}.js`).then((module) => {
-      setIcon(module[iconClass]);
-      iconCache[cacheKey] = module[iconClass];
-    });
+    import(
+      /* webpackExclude: /import\.macro\.js$/ */
+      `@fortawesome/${fontAwesomeType}/${iconClass}.js`).then((module) => {
+        setIcon(module[iconClass]);
+        iconCache[cacheKey] = module[iconClass];
+      });
     return () => setIcon(undefined);
   }, [name, iconInfo]);
 
@@ -312,4 +192,4 @@ function Icon({ withWrapper, ...props }: Props) {
   return <NonWrappedIcon {...props} />;
 }
 
-export { Icon };
+export { Icon, iconTable };

package/src/lib/components/icon/iconTable.ts

@@ -0,0 +1,137 @@
+/**
+ * Maps human-readable icon names to FontAwesome icon info.
+ * Format: 'iconType iconClass' where:
+ * - iconType: 'fas' (solid), 'far' (regular)
+ * - iconClass: the FA v7 icon class name (e.g., 'faWallet')
+ *
+ * Updated to FA v7 naming conventions.
+ */
+export const iconTable = {
+  Account: 'fas faWallet',
+  Backend: 'fas faNetworkWired',
+  Tape: 'fas faTape',
+  'Node-backend': 'fas faServer',
+  'Volume-backend': 'fas faHardDrive',
+  'Node-pdf': 'fas faDatabase',
+  'Volume-pdf': 'fas faCompactDisc',
+  Network: 'fas faDiagramProject',
+  'Cloud-backend': 'fas faCloud',
+  Datacenter: 'fas faWarehouse',
+  'Simple-user': 'fas faUser',
+  User: 'fas faUserGear',
+  Group: 'fas faUsers',
+  Alert: 'fas faBell',
+  Bell: 'far faBell',
+  'Lat-menu': 'fas faBars',
+  Dashboard: 'fas faDesktop',
+  Workflow: 'fas faRoute',
+  Expiration: 'fas faStopwatch',
+  Replication: 'fas faCoins',
+  Transition: 'fas faRocket',
+  Discovery: 'fas faReply',
+  Metrics: 'fas faChartLine',
+  Edit: 'fas faPenToSquare',
+  Logs: 'far faFileLines',
+  Lock: 'fas faLock',
+  'Lock-open': 'fas faLockOpen',
+  'Create-add': 'fas faPlus',
+  Delete: 'fas faTrash',
+  Save: 'fas faFloppyDisk',
+  'External-link': 'fas faArrowUpRightFromSquare',
+  Link: 'fas faLink',
+  Unlink: 'fas faLinkSlash',
+  Close: 'fas faXmark',
+  'Dropdown-down': 'fas faCaretDown',
+  'Dropdown-up': 'fas faCaretUp',
+  Search: 'fas faMagnifyingGlass',
+  More: 'fas faEllipsisVertical',
+  Info: 'fas faCircleQuestion',
+  Sync: 'fas faRotate',
+  Export: 'fas faFileExport',
+  Copy: 'far faClone',
+  'Simple-upload': 'fas faUpload',
+  Upload: 'fas faFileArrowUp',
+  'Add-plus': 'fas faSquarePlus',
+  Minus: 'fas faMinus',
+  'Remove-minus': 'fas faSquareMinus',
+  Sort: 'fas faSort',
+  'Sort-up': 'fas faSortUp',
+  'Sort-down': 'fas faSortDown',
+  Calendar: 'fas faCalendarWeek',
+  'Calendar-minus': 'fas faCalendarMinus',
+  'Arrow-up': 'fas faArrowUp',
+  'Arrow-down': 'fas faArrowDown',
+  'Arrow-right': 'fas faArrowRight',
+  'Arrow-left': 'fas faArrowLeft',
+  'Arrow-alt-circle-up': 'fas faCircleArrowUp',
+  Folder: 'far faFolder',
+  File: 'far faFile',
+  'File-invoice': 'fas faFileInvoice',
+  License: 'fas faFileInvoice',
+  'Deletion-marker': 'fas faBan',
+  'Map-marker': 'fas faLocationDot',
+  Location: 'fas faLocationDot',
+  'Info-circle': 'fas faCircleInfo',
+  'Exclamation-triangle': 'fas faTriangleExclamation',
+  'Exclamation-circle': 'fas faCircleExclamation',
+  Exclamation: 'fas faExclamation',
+  Check: 'fas faCheck',
+  Protected: 'fas faShieldHalved',
+  'Chevron-left': 'fas faChevronLeft',
+  'Chevron-right': 'fas faChevronRight',
+  'Chevron-down': 'fas faChevronDown',
+  'Chevron-up': 'fas faChevronUp',
+  'Angle-right': 'fas faAngleRight',
+  'Angle-double-right': 'fas faAnglesRight',
+  Language: 'fas faLanguage',
+  Theme: 'fas faPalette',
+  Documentation: 'fas faClipboardList',
+  Support: 'fas faComments',
+  EULA: 'fas faFileContract',
+  'Log-out': 'fas faRightFromBracket',
+  Hourglass: 'far faHourglass',
+  Pause: 'fas faPause',
+  'Pause-circle': 'far faCirclePause',
+  'Play-circle': 'far faCirclePlay',
+  Upgrade: 'fas faArrowTurnUp',
+  Expansion: 'fas faUpRightAndDownLeftFromCenter',
+  Rebalance: 'fas faScaleBalanced',
+  Maintenance: 'fas faHelmetSafety',
+  Role: 'fas faHatCowboy',
+  'Change-erasure': 'fas faArrowRightArrowLeft',
+  'Circle-health': 'fas faCircle',
+  'Circle-empty': 'far faCircle',
+  'Dot-circle': 'fas faCircleDot',
+  'Check-circle': 'fas faCircleCheck',
+  'Times-circle': 'fas faCircleXmark',
+  Toolbox: 'fas faToolbox',
+  Cubes: 'fas faCubes',
+  Policy: 'fas faFileSignature',
+  Pen: 'fas faPen',
+  Pencil: 'fas faPencil',
+  Eye: 'fas faEye',
+  EyeSlash: 'fas faEyeSlash',
+  Snowflake: 'fas faSnowflake',
+  Key: 'fas faKey',
+  Filter: 'fas faFilter',
+  Download: 'fas faDownload',
+  Certificate: 'fas faCertificate',
+  Redo: 'fas faRotateRight',
+  Eraser: 'fas faEraser',
+  'ID-card': 'fas faIdCard',
+  Setting: 'fas faGear',
+  Desktop: 'fas faDesktop',
+  Globe: 'fas faGlobe',
+  Satellite: 'fas faSatelliteDish',
+  LightMode: 'fas faSun',
+  DarkMode: 'fas faMoon',
+  News: 'fas faBullhorn',
+  Ring: 'fas faRing',
+  Stop: 'fas faStop',
+  Play: 'fas faPlay',
+  Mail: 'fas faEnvelope',
+  ThumbsUp: 'far faThumbsUp',
+  ThumbsDown: 'far faThumbsDown',
+  Sidebar: 'fas faTableColumns',
+  Bookopen: 'fas faBookOpen',
+};

package/src/lib/components/iconhelper/IconHelper.test.tsx

@@ -35,7 +35,7 @@ describe('IconHelper', () => {
       expect(screen.getByText(tooltipMessage)).toBeVisible();
     });
   });
-  it('should be able to change accessible label with title', async () => {
+  it('should render with title prop (passed to FontAwesome as native tooltip)', async () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
@@ -46,7 +46,7 @@ describe('IconHelper', () => {
       </Wrapper>,
     );
     await waitFor(() => {
-      expect(screen.getByLabelText('Info Helper Testing')).toBeInTheDocument();
+      expect(screen.getByRole('img', { name: /Info/i })).toBeInTheDocument();
     });
   });
 });

package/src/lib/components/infomessage/InfoMessage.component.tsx

@@ -32,7 +32,7 @@ export const InfoMessage = ({ title, content, link, linkText }: Props) => {
     >
       <Stack>
         <Icon name="Info-circle" color={theme.infoPrimary} size="lg" />
-        {typeof title === 'string' ? <Text isEmphazed>{title}</Text> : title}
+        {typeof title === 'string' ? <Text color="textPrimary" isEmphazed>{title}</Text> : title}
       </Stack>
       <Text color="textSecondary" isGentleEmphazed>
         {content}

package/src/lib/components/inputlist/InputList.component.tsx

@@ -1,7 +1,7 @@
 import { HTMLProps, forwardRef } from 'react';
 import { RefCallBack } from 'react-hook-form';
 import { Box } from '../box/Box';
-import { Input } from '../inputv2/inputv2';
+import { Input, InputSize } from '../inputv2/inputv2';
 import { AddButton, SubButton } from './InputButtons';
 
 export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
@@ -15,6 +15,7 @@ export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
   disabled?: boolean;
   maxItems?: number;
   value: T[];
+  size?: InputSize;
 };
 
 function InternalInputList<
@@ -33,6 +34,7 @@ function InternalInputList<
     maxItems,
     value,
     name,
+    size = '1/2',
     ...rest
   }: InputListProps<T>,
   _,
@@ -64,7 +66,7 @@ function InternalInputList<
           <Input
             id={`${name}[${index}]`}
             aria-label={`${name}${index}`}
-            size="1/2"
+            size={size}
             value={val}
             onChange={(evt) => {
               const tempValues = [...value];

package/src/lib/components/inputv2/inputv2.tsx

@@ -81,19 +81,19 @@ const InputBorder = styled.div<{
   height: ${spacing.r32};
   border: ${spacing.r1} solid
     ${(props) =>
-      props.hasError ? props.theme.statusCritical : props.theme.border};
+    props.hasError ? props.theme.statusCritical : props.theme.border};
   border-radius: ${spacing.r4};
   &:hover {
     ${(props) =>
-      !props.disabled &&
-      `border: ${spacing.r1} solid ${props.theme.infoPrimary};`}
+    !props.disabled &&
+    `border: ${spacing.r1} solid ${props.theme.infoPrimary};`}
   }
   &:focus-within {
     border: ${spacing.r1} solid ${(props) => props.theme.infoPrimary};
   }
 `;
 
-const SelfCenterredIcon = styled(Icon)<{ color: keyof CoreUITheme }>`
+const SelfCenterredIcon = styled(Icon) <{ color: keyof CoreUITheme }>`
   align-self: center;
   color: ${(props) => props.theme[props.color]};
 `;
@@ -108,6 +108,7 @@ export type InputProps = {
   rightIcon?: IconName;
   rightIconColor?: keyof CoreUITheme;
   size?: InputSize;
+  noPlaceholderPrefix?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -122,6 +123,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       rightIconColor = 'textSecondary',
       placeholder,
       size,
+      noPlaceholderPrefix,
       ...inputProps
     },
     ref,
@@ -131,7 +133,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       disabled: disabledFromFieldContext,
       error: errorFromFieldContext,
     } = useFieldContext();
-    placeholder = placeholder ? `Example: ${placeholder}` : undefined;
+    placeholder = placeholder
+      ? noPlaceholderPrefix
+        ? placeholder
+        : `Example: ${placeholder}`
+      : undefined;
 
     return (
       <InputBorder

package/src/lib/components/searchinput/SearchInput.component.tsx

@@ -117,6 +117,7 @@ const SearchInput = forwardRef(
           aria-label="search"
           name="search"
           placeholder={placeholder}
+          noPlaceholderPrefix
           value={debouncedValue}
           onChange={handleChange}
           onReset={reset}

package/src/lib/components/searchinput/SearchInput.test.tsx

@@ -15,7 +15,7 @@ describe('SearchInput', () => {
     clearButton: () => screen.queryByRole('button'),
   };
   it('should render the SearchInput component', async () => {
-    render(<SearchInputRender value="" onChange={() => {}} />);
+    render(<SearchInputRender value="" onChange={() => { }} />);
     await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     const searchInput = selectors.searchInput();
@@ -24,15 +24,15 @@ describe('SearchInput', () => {
 
   it('should render the SearchInput component with placeholder', () => {
     render(
-      <SearchInputRender value="" onChange={() => {}} placeholder="Search" />,
+      <SearchInputRender value="" onChange={() => { }} placeholder="Search" />,
     );
 
-    const searchInput = screen.queryByPlaceholderText('Example: Search');
+    const searchInput = screen.queryByPlaceholderText('Search');
     expect(searchInput).toBeInTheDocument();
   });
 
   it('should render the SearchInput component with disabled prop', () => {
-    render(<SearchInputRender value="" onChange={() => {}} disabled />);
+    render(<SearchInputRender value="" onChange={() => { }} disabled />);
 
     const searchInput = selectors.searchInput();
     expect(searchInput).toBeInTheDocument();
@@ -55,7 +55,7 @@ describe('SearchInput', () => {
   });
 
   it('should have a clear button when the input is not empty', () => {
-    render(<SearchInputRender value="" onChange={() => {}} />);
+    render(<SearchInputRender value="" onChange={() => { }} />);
 
     // clear button should not be rendered as value is empty
     let clearButton = selectors.clearButton();
@@ -72,7 +72,7 @@ describe('SearchInput', () => {
   it('should call the onReset function when the clear button is clicked and clear the input value', async () => {
     const onReset = jest.fn();
     render(
-      <SearchInputRender value="test" onChange={() => {}} onReset={onReset} />,
+      <SearchInputRender value="test" onChange={() => { }} onReset={onReset} />,
     );
     const searchInput = selectors.searchInput();
     const clearButton = selectors.clearButton();

package/src/lib/components/tablev2/Tablestyle.tsx

@@ -8,7 +8,6 @@ import { HeaderGroup } from 'react-table';
 import { Icon } from '../icon/Icon.component';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 import { spacing } from '../../spacing';
-import { Box } from '../box/Box';
 
 const borderSize = '4px';
 export const SortIncentive = styled.span`
@@ -65,7 +64,6 @@ export const HeadRow = styled.div<HeadRowType>`
   overflow: hidden;
   border-bottom: 1px solid
     ${(props) => props.theme[props.separationLineVariant]};
-  padding-right: ${borderSize};
   padding-left: ${spacing.r16};
 `;
 
@@ -105,7 +103,7 @@ export const TableRow = styled.div<TableRowType>`
     if (props.selectedId && props.isSelected) {
       return css`
         background-color: ${props.theme.highlight};
-        border-right: ${borderSize} solid ${props.theme.selectedActive};
+        box-shadow: inset -${borderSize} 0 0 ${props.theme.selectedActive};
       `;
     }
   }}
@@ -124,7 +122,7 @@ export const TableRowMultiSelectable = styled.div<TableRowMultiSelectableType>`
     if (props.isSelected) {
       return css`
         background-color: ${(props) => props.theme.highlight};
-        border-right: ${borderSize} solid ${props.theme.selectedActive};
+        box-shadow: inset -${borderSize} 0 0 ${props.theme.selectedActive};
       `;
     }
   }}