diff --git a/package-lock.json b/package-lock.json
index bdb98baef..bc300066c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@ebury/chameleon-components",
- "version": "2.8.16",
+ "version": "2.8.17",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@ebury/chameleon-components",
- "version": "2.8.16",
+ "version": "2.8.17",
"license": "MIT",
"dependencies": {
"@vueuse/core": "10.9.0",
diff --git a/package.json b/package.json
index 846ba8b78..b67018740 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@ebury/chameleon-components",
- "version": "2.8.16",
+ "version": "2.8.17",
"main": "src/main.ts",
"sideEffects": false,
"author": "Ebury Team (http://labs.ebury.rocks/)",
diff --git a/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.ts.snap b/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.ts.snap
index 20c9fc107..f8c381437 100644
--- a/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.ts.snap
+++ b/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.ts.snap
@@ -475,6 +475,83 @@ exports[`EcDropdown > :props > should render given popover style when it is a fu
+
+
+
+
+
+`;
+
+exports[`EcDropdown > :props > should render properly when the bottomNote prop is set 1`] = `
+
+
+
+
+
+
+
+
+
diff --git a/src/components/ec-dropdown/ec-dropdown.spec.ts b/src/components/ec-dropdown/ec-dropdown.spec.ts
index ed2ac1879..269680b05 100644
--- a/src/components/ec-dropdown/ec-dropdown.spec.ts
+++ b/src/components/ec-dropdown/ec-dropdown.spec.ts
@@ -122,6 +122,11 @@ describe('EcDropdown', () => {
expect(wrapper.element).toMatchSnapshot();
});
+ it('should render properly when the bottomNote prop is set', () => {
+ const wrapper = mountDropdown({ bottomNote: 'Testing the bottomNote prop' });
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
it('should render given popover style', () => {
const wrapper = mountDropdown({ popoverStyle: { width: '1234px' } });
expect(wrapper.element).toMatchSnapshot();
diff --git a/src/components/ec-dropdown/ec-dropdown.story.ts b/src/components/ec-dropdown/ec-dropdown.story.ts
index bba11254f..a5a22509a 100644
--- a/src/components/ec-dropdown/ec-dropdown.story.ts
+++ b/src/components/ec-dropdown/ec-dropdown.story.ts
@@ -104,6 +104,7 @@ basic.args = {
disabled: false,
isSensitive: false,
errorMessage: '',
+ bottomNote: '',
modelValue: undefined,
};
diff --git a/src/components/ec-dropdown/ec-dropdown.vue b/src/components/ec-dropdown/ec-dropdown.vue
index ff9e7f303..c3d4b96bf 100644
--- a/src/components/ec-dropdown/ec-dropdown.vue
+++ b/src/components/ec-dropdown/ec-dropdown.vue
@@ -41,6 +41,7 @@
:icon="isDropdownOpen ? IconName.SIMPLE_CHEVRON_UP : IconName.SIMPLE_CHEVRON_DOWN"
:is-in-group="isInGroup"
:bg-color-level="(isInLightMode && !isDropdownOpen) ? 7 : 8"
+ :bottom-note="bottomNote"
:show-pointer-cursor="true"
:show-input-tooltip="true"
@focus="onFocus"
@@ -103,6 +104,7 @@ const props = withDefaults(defineProps>(),
searchPlaceholder: 'Search...',
noResultsText: 'No results found',
tooltipCta: '',
+ bottomNote: '',
isInLightMode: false,
});
diff --git a/src/components/ec-dropdown/types.ts b/src/components/ec-dropdown/types.ts
index 4bd6a9a63..6dcfb7595 100644
--- a/src/components/ec-dropdown/types.ts
+++ b/src/components/ec-dropdown/types.ts
@@ -10,6 +10,7 @@ export interface DropdownProps