Skip to content

Fixed BulletedList color #2258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
raquelarrojo merged 1 commit into from
Jul 16, 2025
Merged

Fixed BulletedList color #2258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 34 additions & 38 deletions packages/lib/src/bulleted-list/BulletedList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,44 +82,40 @@ const ListItem = styled.li`

const BulletedListItem = ({ children }: BulletedListItemPropsType): JSX.Element => <>{children}</>;

const DxcBulletedList = ({ children, type = "disc", icon = "" }: BulletedListPropsType): JSX.Element => {
const colorsTheme = useContext(HalstackContext);

return (
<ListContainer>
<DxcFlex direction="column" as={type === "number" ? "ol" : "ul"} gap="0.125rem">
{Children.map(children, (child, index) => (
<ListItem>
<GeneralContent>
{type === "number" ? (
<Number>
<DxcTypography color={colorsTheme.bulletedList.fontColor}>{index + 1}.</DxcTypography>
</Number>
) : type === "square" ? (
<Bullet>
<Square />
</Bullet>
) : type === "circle" ? (
<Bullet>
<Circle />
</Bullet>
) : type === "icon" ? (
<Bullet>
<Icon>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</Icon>
</Bullet>
) : (
<Bullet>
<Disc />
</Bullet>
)}
<DxcTypography color={colorsTheme.bulletedList.fontColor}>{child}</DxcTypography>
</GeneralContent>
</ListItem>
))}
</DxcFlex>
</ListContainer>
);
};
const DxcBulletedList = ({ children, type = "disc", icon = "" }: BulletedListPropsType): JSX.Element => (
<ListContainer>
<DxcFlex direction="column" as={type === "number" ? "ol" : "ul"} gap="0.125rem">
{Children.map(children, (child, index) => (
<ListItem>
<GeneralContent>
{type === "number" ? (
<Number>
<DxcTypography>{index + 1}.</DxcTypography>
</Number>
) : type === "square" ? (
<Bullet>
<Square />
</Bullet>
) : type === "circle" ? (
<Bullet>
<Circle />
</Bullet>
) : type === "icon" ? (
<Bullet>
<Icon>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</Icon>
</Bullet>
) : (
<Bullet>
<Disc />
</Bullet>
)}
<DxcTypography>{child}</DxcTypography>
</GeneralContent>
</ListItem>
))}
</DxcFlex>
</ListContainer>
);

DxcBulletedList.Item = BulletedListItem;

Expand Down
76 changes: 36 additions & 40 deletions packages/lib/src/contextual-menu/ContextualMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,46 +176,42 @@ const ContextualMenu = () => (
</>
);

const Single = () => {
const colorsTheme = useContext(HalstackContext);

return (
<DxcContainer width="300px">
<ContextualMenuContext.Provider value={{ selectedItemId: -1, setSelectedItemId: () => {} }}>
<Title title="Default" theme="light" level={3} />
<ExampleContainer>
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Focus" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-focus">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Hover" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-hover">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Active" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-active">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
</ContextualMenuContext.Provider>
<ContextualMenuContext.Provider value={{ selectedItemId: 0, setSelectedItemId: () => {} }}>
<Title title="Selected" theme="light" level={3} />
<ExampleContainer>
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Selected hover" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-hover">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Selected active" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-active">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
</ContextualMenuContext.Provider>
</DxcContainer>
);
};
const Single = () => (
<DxcContainer width="300px">
<ContextualMenuContext.Provider value={{ selectedItemId: -1, setSelectedItemId: () => {} }}>
<Title title="Default" theme="light" level={3} />
<ExampleContainer>
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Focus" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-focus">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Hover" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-hover">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Active" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-active">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
</ContextualMenuContext.Provider>
<ContextualMenuContext.Provider value={{ selectedItemId: 0, setSelectedItemId: () => {} }}>
<Title title="Selected" theme="light" level={3} />
<ExampleContainer>
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Selected hover" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-hover">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
<Title title="Selected active" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-active">
<SingleItem {...items[0]!} id={0} depthLevel={0} />
</ExampleContainer>
</ContextualMenuContext.Provider>
</DxcContainer>
);

const ItemWithEllipsis = () => (
<ExampleContainer expanded>
Expand Down
201 changes: 96 additions & 105 deletions packages/lib/src/dropdown/Dropdown.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,111 +211,102 @@ const Dropdown = () => (
</>
);

const DropdownListStates = () => {
const colorsTheme: any = useContext(HalstackContext);

return (
<>
<Title title="Dropdown Menu" theme="light" level={2} />
<ExampleContainer>
<Title
title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
theme="light"
level={3}
/>
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
gap: "20px",
height: "150px",
width: "min-content",
marginBottom: "100px",
padding: "20px",
border: "1px solid black",
borderRadius: "4px",
overflow: "auto",
zIndex: "1300",
}}
>
<DxcDropdown
label="Select a platform"
options={defaultOptions}
onSelectOption={(option) => {}}
size="medium"
/>
<button style={{ zIndex: "1", width: "100px" }}>Submit</button>
</div>
</ExampleContainer>
<Title title="Option states" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-hover">
<Title title="Hovered option" theme="light" level={4} />
<DropdownMenu
id="x1"
dropdownTriggerId="dtx1"
iconsPosition="before"
visualFocusIndex={-1}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={optionWithIcon}
styles={{ width: 240 }}
/>
</ExampleContainer>
<ExampleContainer pseudoState="pseudo-active">
<Title title="Active option" theme="light" level={4} />
<DropdownMenu
id="x2"
dropdownTriggerId="dtx2"
iconsPosition="before"
visualFocusIndex={-1}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={optionWithIcon}
styles={{ width: 240 }}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Focused option" theme="light" level={4} />
<DropdownMenu
id="x3"
dropdownTriggerId="dtx3"
iconsPosition="before"
visualFocusIndex={0}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={options}
styles={{ width: 240 }}
/>
</ExampleContainer>
<Title title="Icons" theme="light" level={3} />
<ExampleContainer>
<Title title="Before" theme="light" level={4} />
<DropdownMenu
id="x4"
dropdownTriggerId="dtx4"
iconsPosition="before"
visualFocusIndex={-1}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={optionsIcon}
styles={{ width: 240 }}
/>
<Title title="After" theme="light" level={4} />
<DropdownMenu
id="x5"
dropdownTriggerId="dtx5"
iconsPosition="after"
visualFocusIndex={-1}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={optionsIcon}
styles={{ width: 240 }}
/>
</ExampleContainer>
</>
);
};
const DropdownListStates = () => (
<>
<Title title="Dropdown Menu" theme="light" level={2} />
<ExampleContainer>
<Title
title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
theme="light"
level={3}
/>
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
gap: "20px",
height: "150px",
width: "min-content",
marginBottom: "100px",
padding: "20px",
border: "1px solid black",
borderRadius: "4px",
overflow: "auto",
zIndex: "1300",
}}
>
<DxcDropdown label="Select a platform" options={defaultOptions} onSelectOption={(option) => {}} size="medium" />
<button style={{ zIndex: "1", width: "100px" }}>Submit</button>
</div>
</ExampleContainer>
<Title title="Option states" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-hover">
<Title title="Hovered option" theme="light" level={4} />
<DropdownMenu
id="x1"
dropdownTriggerId="dtx1"
iconsPosition="before"
visualFocusIndex={-1}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={optionWithIcon}
styles={{ width: 240 }}
/>
</ExampleContainer>
<ExampleContainer pseudoState="pseudo-active">
<Title title="Active option" theme="light" level={4} />
<DropdownMenu
id="x2"
dropdownTriggerId="dtx2"
iconsPosition="before"
visualFocusIndex={-1}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={optionWithIcon}
styles={{ width: 240 }}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Focused option" theme="light" level={4} />
<DropdownMenu
id="x3"
dropdownTriggerId="dtx3"
iconsPosition="before"
visualFocusIndex={0}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={options}
styles={{ width: 240 }}
/>
</ExampleContainer>
<Title title="Icons" theme="light" level={3} />
<ExampleContainer>
<Title title="Before" theme="light" level={4} />
<DropdownMenu
id="x4"
dropdownTriggerId="dtx4"
iconsPosition="before"
visualFocusIndex={-1}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={optionsIcon}
styles={{ width: 240 }}
/>
<Title title="After" theme="light" level={4} />
<DropdownMenu
id="x5"
dropdownTriggerId="dtx5"
iconsPosition="after"
visualFocusIndex={-1}
menuItemOnClick={() => {}}
onKeyDown={() => {}}
options={optionsIcon}
styles={{ width: 240 }}
/>
</ExampleContainer>
</>
);

const TooltipTitle = () => (
<ExampleContainer expanded>
Expand Down