From 468b0933ac21387c5a3401f8d2801309a9fab6ed Mon Sep 17 00:00:00 2001 From: prabhuignoto Date: Tue, 5 Mar 2024 14:32:05 +0530 Subject: [PATCH] Fix popover: fixd a minor css issue with the items updated readme --- README.md | 5 +++-- src/components/elements/list/list.styles.ts | 9 ++++++--- src/components/elements/popover/popover.styles.ts | 1 - 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 154daaaf..dd2a7418 100644 --- a/README.md +++ b/README.md @@ -189,19 +189,20 @@ Below are the available configuration options for the component: | onScrollEnd | | Detects the end of the timeline via `onScrollEnd`. | | onThemeChange | | Invokes a callback when the theme changes, triggered via `enableDarkToggle`. | | parseDetailsAsHTML | false | Parses the `cardDetailedText` as HTML. | +| responsiveBreakPoint | 1024px | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode | | scrollable | true | Makes the timeline scrollable in `VERTICAL` and `VERTICAL_ALTERNATING` modes. | | showAllCardsHorizontal | false | Displays all cards in horizontal mode. By default, only the active card is shown. | | slideItemDuration | 5000 | Sets the duration (in milliseconds) that a timeline card is active during a slideshow. | | slideShow | false | Enables slideshow control. | +| textDensity | HIGH | Configures the amount of text to be displayed in each timeline card. Can be either `HIGH` or `LOW` | | textOverlay | false | Displays text as an overlay on media elements. Refer to [Text Overlay](#text-overlay-mode) for more info. | | theme | | Customizes colors. Refer to [Theme](#theme) for more info. | | timelinePointDimension | | Defines the dimensions of circular points on the timeline. | | timelinePointShape | circle | Configures the shape of timeline points. Options: circle, square, diamond. | | titleDateFormat | 'MMM DD, YYYY' | Formats the date for each timeline item. Supports all [dayjs](https://day.js.org/) formats. | +| toolbarPosition | TOP | Configures the position of the toolbar. Can be `TOP` or `BOTTOM` | | uniqueId | | Used with `noUniqueId` to set a custom unique id for the wrapper. | | useReadMore | true | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself. | -| responsiveBreakPoint | 1024px | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode | -| textDensity | HIGH | Configures the amount of text to be displayed in each timeline card. Can be either `HIGH` or `LOW` | ### Mode diff --git a/src/components/elements/list/list.styles.ts b/src/components/elements/list/list.styles.ts index dae5148c..d9906bea 100644 --- a/src/components/elements/list/list.styles.ts +++ b/src/components/elements/list/list.styles.ts @@ -14,7 +14,7 @@ const commonStyles = ` display: flex; margin: 0; margin-bottom: 0.5rem; - padding: 0.25rem 0.5rem; + // padding: 0.25rem 0.5rem; width: 100%; &:last-child { @@ -26,11 +26,12 @@ const commonStyles = ` export const ListStyle = styled.ul` display: flex; flex-direction: column; - justify-content: flex-start; + justify-content: center; list-style: none; margin: 0; - padding: 0;popo + padding: 0; width: 100%; + align-items: center; `; // List item styles @@ -49,6 +50,8 @@ export const ListItemStyle = styled.li<{ cursor: pointer; } user-select: none; + padding: 0.25rem; + width: calc(100% - 0.5rem); `; // Title styles diff --git a/src/components/elements/popover/popover.styles.ts b/src/components/elements/popover/popover.styles.ts index 23029161..406d49b3 100644 --- a/src/components/elements/popover/popover.styles.ts +++ b/src/components/elements/popover/popover.styles.ts @@ -82,7 +82,6 @@ export const Header = styled.div` export const Content = styled.div` height: calc(100% - 30px); overflow-y: auto; - padding: 0.25rem; width: calc(100% - 0rem); `;