From d18ead0f48dbefbc87f2695aa9909d3afd2bc641 Mon Sep 17 00:00:00 2001
From: Daniel Darritchon <daniel.darritchon@front.com>
Date: Fri, 17 Oct 2025 13:51:55 -0300
Subject: [PATCH 1/2] ExpandableSection tewaks

---
 .../__docs__/stories/basic.stories.tsx        | 45 ++++++++++++++-----
 .../expandableSection/expandableSection.tsx   | 28 +++++++-----
 2 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/src/components/expandableSection/__docs__/stories/basic.stories.tsx b/src/components/expandableSection/__docs__/stories/basic.stories.tsx
index 92bcd368..07e35668 100644
--- a/src/components/expandableSection/__docs__/stories/basic.stories.tsx
+++ b/src/components/expandableSection/__docs__/stories/basic.stories.tsx
@@ -3,7 +3,7 @@ import React, {useState} from 'react';
 import styled from 'styled-components';
 
 import {Icon} from '../../../../elements/icon/icon';
-import {greys, palette} from '../../../../helpers/colorHelpers';
+import {alphas, greys, palette} from '../../../../helpers/colorHelpers';
 import {VisualSizesEnum} from '../../../../helpers/fontHelpers';
 import {DefaultStyleProvider} from '../../../../utils/defaultStyleProvider';
 import {Button} from '../../../button/button';
@@ -59,7 +59,7 @@ export const Basic: StoryObj<typeof ExpandableSection> = {
   render: () => (
     <DefaultStyleProvider>
       <StyledCenteredDiv>
-        <ExpandableSection title="Basic Expandable Section">
+        <ExpandableSection title="Basic Expandable Section" backgroundColor={greys.white}>
           <StyledContentDiv>
             This is the content of the expandable section. It can contain any React elements that you want to
             display when the section is expanded.
@@ -68,6 +68,7 @@ export const Basic: StoryObj<typeof ExpandableSection> = {
 
         <ExpandableSection
           title="With Actions"
+          backgroundColor={greys.white}
           actions={
             <StyledActionsContainer>
               <Button type="icon" size={VisualSizesEnum.SMALL}>
@@ -84,7 +85,7 @@ export const Basic: StoryObj<typeof ExpandableSection> = {
           </StyledContentDiv>
         </ExpandableSection>
 
-        <ExpandableSection title="Complex Content">
+        <ExpandableSection title="Complex Content" backgroundColor={greys.white}>
           <StyledContentDiv>
             <h4>Complex Content Example</h4>
             <p>This section demonstrates that you can include any type of content:</p>
@@ -116,6 +117,7 @@ const ControlledComponent = () => {
 
         <ExpandableSection
           title="Controlled Expandable Section"
+          backgroundColor={greys.white}
           isOpen={isOpen}
           onToggle={setIsOpen}
           actions={
@@ -141,17 +143,17 @@ export const MultipleSections: StoryObj<typeof ExpandableSection> = {
   render: () => (
     <DefaultStyleProvider>
       <StyledCenteredDiv>
-        <ExpandableSection title="Section 1">
+        <ExpandableSection title="Section 1" backgroundColor={greys.white}>
           <StyledContentDiv>Content for section 1. Each section operates independently.</StyledContentDiv>
         </ExpandableSection>
 
-        <ExpandableSection title="Section 2">
+        <ExpandableSection title="Section 2" backgroundColor={greys.white}>
           <StyledContentDiv>
             Content for section 2. Multiple sections can be open at the same time.
           </StyledContentDiv>
         </ExpandableSection>
 
-        <ExpandableSection title="Section 3">
+        <ExpandableSection title="Section 3" backgroundColor={greys.white}>
           <StyledContentDiv>
             Content for section 3. The sections have a square, card-like appearance with proper spacing and
             borders.
@@ -168,6 +170,7 @@ export const Customized: StoryObj<typeof ExpandableSection> = {
       <StyledCenteredDiv>
         <ExpandableSection
           title="Text Before Icon"
+          backgroundColor={alphas.transparent}
           showTextBeforeIcon
           actions={
             <Button type="icon" size={VisualSizesEnum.SMALL}>
@@ -183,17 +186,36 @@ export const Customized: StoryObj<typeof ExpandableSection> = {
           </StyledContentDiv>
         </ExpandableSection>
 
-        <ExpandableSection title="Text First + Custom Icon" showTextBeforeIcon iconName="ChevronDown">
+        <ExpandableSection
+          title="Text First + Custom Icon"
+          backgroundColor={greys.white}
+          showTextBeforeIcon
+          iconName="ChevronDown">
           <StyledContentDiv>
             This section combines both customizations: text before icon and a custom chevron icon.
           </StyledContentDiv>
         </ExpandableSection>
 
-        <ExpandableSection title="Custom Hover Color" hoverBackgroundColor="#e3f2fd">
+        <ExpandableSection title="No Icon" backgroundColor={greys.white} iconName="">
+          <StyledContentDiv>
+            This section has no expand/collapse icon. The section can still be clicked to expand and collapse.
+          </StyledContentDiv>
+        </ExpandableSection>
+
+        <ExpandableSection
+          title="Custom Hover Color"
+          backgroundColor={greys.white}
+          hoverBackgroundColor="#e3f2fd">
           <StyledContentDiv>
             This section has a custom light blue hover background color instead of the default grey.
           </StyledContentDiv>
         </ExpandableSection>
+
+        <ExpandableSection title="No Icon" backgroundColor={greys.white} iconName="">
+          <StyledContentDiv>
+            This section has no expand/collapse icon. The section can still be clicked to expand and collapse.
+          </StyledContentDiv>
+        </ExpandableSection>
       </StyledCenteredDiv>
     </DefaultStyleProvider>
   )
@@ -206,6 +228,7 @@ export const ActionsOnHover: StoryObj<typeof ExpandableSection> = {
         <StyledHoverWrapper>
           <ExpandableSection
             title="Actions Show on Hover"
+            backgroundColor={greys.white}
             actions={
               <StyledHoverActionsContainer className="hover-actions">
                 <Button type="icon" size={VisualSizesEnum.SMALL}>
@@ -263,7 +286,8 @@ export const CustomTitleComponent: StoryObj<typeof ExpandableSection> = {
               Custom Title with Icon
               <StyledBadge>New</StyledBadge>
             </StyledCustomTitle>
-          }>
+          }
+          backgroundColor={greys.white}>
           <StyledContentDiv>
             This expandable section demonstrates using a custom React component as the title. The title
             includes an icon, styled text, and a badge component. This provides much more flexibility than
@@ -277,7 +301,8 @@ export const CustomTitleComponent: StoryObj<typeof ExpandableSection> = {
               <span style={{fontWeight: 'bold', color: '#dc2626'}}>⚠️</span>
               <span>Important Notice</span>
             </div>
-          }>
+          }
+          backgroundColor={greys.white}>
           <StyledContentDiv>
             You can also use inline styles or any other React elements as the title. This example shows a
             warning icon with styled text.
diff --git a/src/components/expandableSection/expandableSection.tsx b/src/components/expandableSection/expandableSection.tsx
index 8b9d88f5..429ed93c 100644
--- a/src/components/expandableSection/expandableSection.tsx
+++ b/src/components/expandableSection/expandableSection.tsx
@@ -21,8 +21,8 @@ interface ExpandableSectionProps {
   actions?: React.ReactNode;
   /** Whether to show the text before the icon (default: false) */
   showTextBeforeIcon?: boolean;
-  /** Custom icon name to use instead of the default CaretExpand */
-  iconName?: 'CaretExpand' | 'ChevronDown';
+  /** Custom icon name to use instead of the default CaretExpand. If empty or undefined, no icon will be shown. */
+  iconName?: 'CaretExpand' | 'ChevronDown' | '';
   /** Border radius for the expandable section (default: 8px) */
   borderRadius?: string;
   /** Background color for the header on hover (default: greys.shade10) */
@@ -33,18 +33,24 @@ interface ExpandableSectionProps {
   showContentBorder?: boolean;
   /** Maximum height when expanded (default: 1000px) */
   maxHeight?: string;
+  /** Background color for the expandable section (default: greys.white) */
+  backgroundColor?: string;
 }
 
 /*
  * Styles
  */
 
-const StyledExpandableSectionDiv = styled.div<{borderRadius?: string; showBorder?: boolean}>`
+const StyledExpandableSectionDiv = styled.div<{
+  borderRadius?: string;
+  showBorder?: boolean;
+  backgroundColor?: string;
+}>`
   display: flex;
   flex-direction: column;
   border: ${({showBorder = true}) => (showBorder ? `1px solid ${greys.shade30}` : 'none')};
   border-radius: ${({borderRadius}) => borderRadius || '8px'};
-  background: ${greys.white};
+  background: ${({backgroundColor}) => backgroundColor || greys.white};
   overflow: hidden;
 `;
 
@@ -54,7 +60,6 @@ const StyledHeaderDiv = styled.div<{hoverBackgroundColor?: string}>`
   justify-content: space-between;
   padding: 16px 20px;
   cursor: pointer;
-  background: ${greys.white};
   transition: background-color 0.2s ease;
 
   &:hover {
@@ -74,7 +79,6 @@ const StyledTitleDiv = styled.div`
   font-size: ${fontSizes.large};
   font-weight: ${fontWeights.medium};
   line-height: 24px;
-  color: ${greys.shade80};
 `;
 
 const StyledCaretIconDiv = styled.div<{isOpen: boolean}>`
@@ -115,7 +119,8 @@ export const ExpandableSection: FC<ExpandableSectionProps> = (props) => {
     hoverBackgroundColor,
     showBorder = true,
     showContentBorder = true,
-    maxHeight = '1000px'
+    maxHeight = '1000px',
+    backgroundColor
   } = props;
   const [internalIsOpen, setInternalIsOpen] = useState(false);
 
@@ -128,14 +133,17 @@ export const ExpandableSection: FC<ExpandableSectionProps> = (props) => {
   };
 
   const titleElement = typeof title === 'string' ? <StyledTitleDiv>{title}</StyledTitleDiv> : title;
-  const iconElement = (
+  const iconElement = iconName ? (
     <StyledCaretIconDiv isOpen={isOpen}>
       <Icon name={iconName} size={16} />
     </StyledCaretIconDiv>
-  );
+  ) : null;
 
   return (
-    <StyledExpandableSectionDiv borderRadius={borderRadius} showBorder={showBorder}>
+    <StyledExpandableSectionDiv
+      borderRadius={borderRadius}
+      showBorder={showBorder}
+      backgroundColor={backgroundColor}>
       <StyledHeaderDiv onClick={handleToggle} hoverBackgroundColor={hoverBackgroundColor}>
         <StyledTitleContainerDiv>
           {showTextBeforeIcon ? (

From 1fa20a474b420739dacd934cf2b6830cb3a4a69e Mon Sep 17 00:00:00 2001
From: Daniel Darritchon <daniel.darritchon@front.com>
Date: Wed, 22 Oct 2025 15:06:35 -0300
Subject: [PATCH 2/2] using color-semantic/border/tertiary for dropdown border
 color

---
 CHANGELOG.md                       | 3 +--
 src/elements/dropdown/dropdown.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30af4330..750adbd8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,9 @@
 
 ## [0.17.0](https://github.com/frontapp/front-ui-kit/compare/v0.16.1...v0.17.0) (2025-10-22)
 
-
 ### Features
 
-* large plus icon ([#291](https://github.com/frontapp/front-ui-kit/issues/291)) ([cdf4ce3](https://github.com/frontapp/front-ui-kit/commit/cdf4ce381448bedff2d3cece4f1e91b9c8626b7a))
+- large plus icon ([#291](https://github.com/frontapp/front-ui-kit/issues/291)) ([cdf4ce3](https://github.com/frontapp/front-ui-kit/commit/cdf4ce381448bedff2d3cece4f1e91b9c8626b7a))
 
 ## [0.16.1](https://github.com/frontapp/front-ui-kit/compare/v0.16.0...v0.16.1) (2025-10-21)
 
diff --git a/src/elements/dropdown/dropdown.tsx b/src/elements/dropdown/dropdown.tsx
index abf4f9d5..7b95d024 100644
--- a/src/elements/dropdown/dropdown.tsx
+++ b/src/elements/dropdown/dropdown.tsx
@@ -74,7 +74,7 @@ const StyledDropdownWrapperDiv = styled.div<StyledDropdownWrapperDivProps>`
   border-radius: 8px;
   background: white;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  border: 1px solid ${greys.shade40};
+  border: 1px solid ${greys.shade20};
   width: 100%;
   overflow: auto;
   ${(p) => css`