Skip to content

Commit 4034ad9

Browse files
feat(ConversationHistoryNav): Add support for high contrast (#729)
Override menu borders and add desired borders.
1 parent 8458ab4 commit 4034ad9

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
.pf-v6-c-menu {
3434
--pf-v6-c-menu--PaddingBlockStart: 0;
3535
--pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
36+
// override high contrast style
37+
--pf-v6-c-menu--BorderWidth: 0;
3638
overflow: initial;
3739
position: relative;
3840
}
@@ -56,13 +58,26 @@
5658
.pf-chatbot__menu-item {
5759
--pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
5860
--pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
61+
// override high contrast style
62+
--pf-v6-c-menu__list-item--BorderWidth: 0;
5963
padding-block-start: var(--pf-t--global--spacer--xs);
6064
padding-block-end: var(--pf-t--global--spacer--xs);
6165
color: var(--pf-t--global--text--color--regular);
6266
font-size: var(--pf-t--global--font--size--body--lg);
6367
font-weight: var(--pf-t--global--font--weight--body--default);
6468
border-radius: var(--pf-t--global--border--radius--small);
6569
}
70+
71+
li.pf-chatbot__menu-item:hover::after {
72+
position: absolute;
73+
inset: 0;
74+
pointer-events: none;
75+
content: '';
76+
border: var(--pf-t--global--border--width--action--plain--hover) solid
77+
var(--pf-t--global--border--color--high-contrast);
78+
border-radius: inherit;
79+
}
80+
6681
// allows focus state to have border radius
6782
.pf-v6-c-menu__list-item.pf-chatbot__menu-item {
6883
overflow: hidden;
@@ -76,6 +91,16 @@
7691
background-color: var(--pf-t--global--background--color--action--plain--clicked);
7792
}
7893

94+
li.pf-chatbot__menu-item--active::after {
95+
position: absolute;
96+
inset: 0;
97+
pointer-events: none;
98+
content: '';
99+
border: var(--pf-t--global--border--width--action--plain--clicked) solid
100+
var(--pf-t--global--border--color--high-contrast);
101+
border-radius: inherit;
102+
}
103+
79104
button.pf-chatbot__menu-item--active {
80105
background-color: initial;
81106
}

0 commit comments

Comments
 (0)