Skip to content

Commit d4ea0a4

Browse files
thatblindgeyethatblindgeye
authored
Merge pull request #849 from thatblindgeye/iss823_unifiedGlass
feat(Chatbot): applied glass and felt tokens
2 parents a106a49 + d404246 commit d4ea0a4

15 files changed

Lines changed: 3170 additions & 2193 deletions

File tree

‎package-lock.json‎

Lines changed: 3056 additions & 2044 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@
3939
"@babel/preset-react": "^7.23.3",
4040
"@babel/preset-typescript": "^7.23.3",
4141
"@octokit/rest": "^18.0.0",
42-
"@patternfly/documentation-framework": "6.28.9",
43-
"@patternfly/patternfly": "^6.1.0",
42+
"@patternfly/documentation-framework": "^6.44.0",
43+
"@patternfly/patternfly": "^6.5.2",
4444
"@patternfly/react-icons": "^6.5.1",
45-
"@patternfly/react-table": "^6.1.0",
45+
"@patternfly/react-table": "^6.5.1",
4646
"@swc/core": "1.3.96",
4747
"@testing-library/dom": "^9.3.4",
4848
"@testing-library/jest-dom": "^6.4.2",

‎packages/module/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@
3333
"tag": "prerelease"
3434
},
3535
"dependencies": {
36-
"@patternfly/react-code-editor": "^6.1.0",
37-
"@patternfly/react-core": "^6.1.0",
36+
"@patternfly/react-code-editor": "^6.5.1",
37+
"@patternfly/react-core": "^6.5.1",
3838
"@patternfly/react-icons": "^6.5.1",
39-
"@patternfly/react-styles": "^6.1.0",
40-
"@patternfly/react-table": "^6.1.0",
39+
"@patternfly/react-styles": "^6.5.1",
40+
"@patternfly/react-table": "^6.5.1",
4141
"@segment/analytics-next": "^1.76.0",
4242
"clsx": "^2.1.0",
4343
"path-browserify": "^1.0.1",
@@ -66,8 +66,8 @@
6666
},
6767
"devDependencies": {
6868
"@octokit/rest": "^18.0.0",
69-
"@patternfly/documentation-framework": "6.28.9",
70-
"@patternfly/patternfly": "^6.1.0",
69+
"@patternfly/documentation-framework": "^6.44.0",
70+
"@patternfly/patternfly": "^6.5.2",
7171
"@patternfly/patternfly-a11y": "^5.0.0",
7272
"@types/dom-speech-recognition": "^0.0.4",
7373
"@types/react": "^18.2.61",

‎packages/module/src/Chatbot/Chatbot.scss‎

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@
99
flex-direction: column;
1010
width: 30rem;
1111
height: 70vh;
12-
background-color: var(
13-
--pf-t--global--background--color--floating--secondary--default,
14-
--pf-t--global--background--color--secondary--default
15-
);
12+
background-color: var(--pf-t--global--background--color--floating--secondary--default);
1613
border-radius: var(--pf-t--global--border--radius--medium);
1714
box-shadow: var(--pf-t--global--box-shadow--lg);
1815
font-size: var(--pf-t--global--font--size--md);
@@ -31,9 +28,8 @@
3128
opacity: 1;
3229
transform: translateY(0);
3330
}
34-
// for high contrast support
35-
border: var(--pf-t--global--border--width--high-contrast--regular) solid
36-
var(--pf-t--global--border--color--high-contrast);
31+
32+
border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--subtle);
3733

3834
// 32 rem is the width of the overlay chatbot plus the insets
3935
// if the screen is smaller, we want to be 100%
@@ -46,24 +42,41 @@
4642
@media screen and (max-height: 518px) {
4743
overflow: auto;
4844
}
45+
46+
&:not(&--default) {
47+
background-color: var(
48+
--pf-t--global--background--color--glass--primary--default,
49+
var(--pf-t--global--background--color--secondary--default)
50+
);
51+
}
52+
}
53+
54+
:root:where(.pf-v6-theme-felt):not(.pf-v6-theme-glass) {
55+
.pf-chatbot.pf-chatbot--default {
56+
box-shadow: var(--pf-t--global--box-shadow--md);
57+
}
4958
}
5059

5160
// ============================================================================
5261
// Chatbot Display Mode - Docked
5362
// ============================================================================
5463
.pf-chatbot--docked {
55-
// for high contrast support
5664
border: unset;
57-
border-left: var(--pf-t--global--border--width--high-contrast--regular) solid
58-
var(--pf-t--global--border--color--high-contrast);
65+
border-left: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--subtle);
5966
inset-block-end: 0;
6067
inset-inline-end: 0;
6168
padding: 0;
6269
height: 100%;
6370
border-radius: 0;
64-
box-shadow: var(--pf-t--global--box-shadow--lg--left);
6571
overflow: inherit;
6672

73+
@at-root :where(.pf-v6-theme-glass) & {
74+
border-left: var(--pf-t--global--border--width--glass--default) solid
75+
var(--pf-t--global--border--color--glass--default);
76+
box-shadow: var(--pf-t--global--box-shadow--md--left);
77+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
78+
}
79+
6780
// 30rem is the width of the docked chatbot
6881
// if the screen is smaller, we want to be 100%
6982
@media screen and (max-width: 30rem) {
@@ -75,9 +88,6 @@
7588
// Chatbot Display Mode - Fullscreen
7689
// ============================================================================
7790
.pf-chatbot--fullscreen {
78-
background-color: var(--pf-t--global--background--color--secondary--default);
79-
80-
// for high contrast support
8191
border: unset;
8292
inset-block-end: 0;
8393
inset-inline-end: 0;
@@ -86,21 +96,27 @@
8696
height: 100%;
8797
border-radius: 0;
8898
box-shadow: none;
99+
100+
@at-root :where(.pf-v6-theme-glass) & {
101+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
102+
}
89103
}
90104

91105
// ============================================================================
92106
// Chatbot Display Mode - Embedded
93107
// ============================================================================
94108
.pf-chatbot--embedded {
95-
background-color: var(--pf-t--global--background--color--secondary--default);
96-
97-
// for high contrast support
98-
border: unset;
99109
position: static;
100110
width: 100%;
101111
min-height: 100%;
102112
border-radius: 0;
103-
box-shadow: none;
113+
box-shadow: var(--pf-t--global--box-shadow--lg);
114+
115+
@at-root :where(.pf-v6-theme-glass) & {
116+
border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
117+
box-shadow: var(--pf-t--global--box-shadow--md);
118+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
119+
}
104120
}
105121

106122
.pf-chatbot-container {
@@ -143,19 +159,19 @@
143159
height: 100%;
144160
border-radius: 0;
145161
box-shadow: none;
146-
border-color: var(--pf-t--global--border--color--default);
162+
border-color: var(--pf-t--global--border--color--subtle);
147163

148-
.pf-chatbot-container {
149-
border-radius: var(--pf-t--global--border--radius--sharp);
164+
@at-root :where(.pf-v6-theme-glass) & {
165+
border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
166+
box-shadow: var(--pf-t--global--box-shadow--md);
167+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
150168
}
151169

152-
@media screen and (min-width: 768px) {
153-
// only want if drawer open - drawer closes/stops being inline on mobile
154-
border-left: var(--pf-t--global--border--width--divider--default) solid;
170+
.pf-chatbot-container {
171+
border-radius: var(--pf-t--global--border--radius--sharp);
155172
}
156173
}
157174

158-
// for high contrast support
159175
:root:where(.pf-v6-theme-high-contrast) {
160176
.pf-chatbot--drawer {
161177
border: unset;

‎packages/module/src/ChatbotContent/ChatbotContent.scss‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@
33
// ============================================================================
44
.pf-chatbot__content {
55
position: relative;
6-
background-color: var(
7-
--pf-t--global--background--color--floating--secondary--default,
8-
--pf-t--global--background--color--secondary--default
9-
);
6+
background-color: var(--pf-t--global--background--color--floating--secondary--default);
107
overflow-y: auto;
118
overflow: hidden; // needed in Red Hat Developer Hub workspace
129
flex: 1; // needed in Composer AI
@@ -21,6 +18,15 @@
2118
}
2219
}
2320

21+
.pf-chatbot:not(.pf-chatbot--default) {
22+
.pf-chatbot__content {
23+
background-color: var(
24+
--pf-t--global--background--color--glass--primary--default,
25+
var(--pf-t--global--background--color--secondary--default)
26+
);
27+
}
28+
}
29+
2430
// ============================================================================
2531
// Chatbot Display Mode - Fullscreen and Embedded
2632
// ============================================================================
@@ -29,7 +35,6 @@
2935
.pf-chatbot--fullscreen,
3036
.pf-chatbot--embedded {
3137
.pf-chatbot__content {
32-
background-color: var(--pf-t--global--background--color--secondary--default);
3338
display: flex;
3439
justify-content: center;
3540
}

‎packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,20 @@
203203
}
204204
}
205205

206+
.pf-chatbot:is(.pf-chatbot--drawer, .pf-chatbot--docked) .pf-chatbot__history {
207+
// .pf-v6-c-menu {
208+
// @at-root :where(.pf-v6-theme-glass) & {
209+
// --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
210+
// }
211+
// }
212+
213+
// .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
214+
// @at-root :where(.pf-v6-theme-glass) & {
215+
// background-color: var(--pf-t--global--background--color--floating--default);
216+
// }
217+
// }
218+
}
219+
206220
// ============================================================================
207221
// Chatbot Display Mode - Docked
208222
// ============================================================================

‎packages/module/src/ChatbotFooter/ChatbotFooter.scss‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@
66
// ============================================================================
77
.pf-chatbot__footer {
88
--pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
9-
background-color: var(
10-
--pf-t--global--background--color--floating--secondary--default,
11-
--pf-t--global--background--color--secondary--default
12-
);
9+
background-color: var(--pf-t--global--background--color--floating--secondary--default);
1310
display: flex;
1411
flex-direction: column;
1512
row-gap: var(--pf-chatbot__footer--RowGap);
@@ -19,6 +16,17 @@
1916
background-color: var(--pf-t--global--background--color--primary--default);
2017
}
2118
}
19+
20+
.pf-chatbot:not(.pf-chatnot--default) {
21+
.pf-chatbot__footer {
22+
background-color: var(--pf-t--global--background--color--secondary--default);
23+
24+
@at-root :where(.pf-v6-theme-glass) & {
25+
background-color: var(--pf-t--global--background--color--glass--primary--default);
26+
}
27+
}
28+
}
29+
2230
.pf-chatbot__footer-container {
2331
padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
2432
display: flex;
@@ -35,12 +43,6 @@
3543
.pf-chatbot--fullscreen {
3644
.pf-chatbot__footer {
3745
align-items: center;
38-
.pf-v6-c-divider {
39-
display: none;
40-
}
41-
}
42-
.pf-chatbot__footer {
43-
background-color: var(--pf-t--global--background--color--secondary--default);
4446
}
4547

4648
.pf-chatbot__footer-container {

‎packages/module/src/ChatbotHeader/ChatbotHeader.scss‎

Lines changed: 7 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@
99
grid-template-columns: 1fr auto;
1010
gap: var(--pf-t--global--spacer--sm);
1111
position: relative; // this is so focus ring on parent chatbot doesn't include header
12-
background-color: var(
13-
--pf-t--global--background--color--floating--secondary--default,
14-
--pf-t--global--background--color--secondary--default
15-
);
12+
background-color: var(--pf-t--global--background--color--floating--secondary--default);
1613
justify-content: space-between;
1714
padding: var(--pf-t--global--spacer--lg);
1815

@@ -58,28 +55,13 @@
5855
}
5956
}
6057

61-
// ============================================================================
62-
// Chatbot Display Mode - Fullscreen and Embedded
63-
// ============================================================================
64-
@media screen and (min-width: 64rem) {
65-
.pf-chatbot--fullscreen,
66-
.pf-chatbot--embedded {
67-
.pf-chatbot__header {
68-
background-color: var(--pf-t--global--background--color--primary--default);
69-
}
70-
.pf-chatbot__header__divider {
71-
display: none;
72-
}
73-
}
74-
}
75-
76-
// ============================================================================
77-
// Chatbot Display Mode - Docked and Drawer
78-
// ============================================================================
79-
.pf-chatbot--drawer,
80-
.pf-chatbot--docked {
58+
.pf-chatbot:not(.pf-chatbot--default) {
8159
.pf-chatbot__header {
82-
background-color: var(--pf-t--global--background--color--secondary--floating--default);
60+
background-color: var(--pf-t--global--background--color--secondary--default);
61+
62+
@at-root :where(.pf-v6-theme-glass) & {
63+
background-color: var(--pf-t--global--background--color--glass--primary--default);
64+
}
8365
}
8466
}
8567

@@ -98,12 +80,6 @@
9880
border-radius: inherit;
9981
}
10082

101-
.pf-v6-c-button__icon,
102-
.pf-v6-c-menu-toggle__icon,
103-
.pf-v6-c-icon__content {
104-
color: var(--pf-t--global--icon--color--subtle);
105-
}
106-
10783
.pf-v6-c-button__icon,
10884
.pf-v6-c-menu-toggle__icon {
10985
display: flex;
@@ -122,13 +98,6 @@
12298
}
12399
}
124100

125-
// Rotate icon
126-
.pf-chatbot__button--toggle-options {
127-
svg {
128-
transform: rotate(90deg);
129-
}
130-
}
131-
132101
// ============================================================================
133102
// Examples
134103
// ============================================================================
@@ -169,18 +138,3 @@
169138
.pf-chatbot__header .pf-chatbot__actions .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-compact {
170139
width: initial;
171140
}
172-
173-
// ============================================================================
174-
// High contrast
175-
// ============================================================================
176-
:root:where(.pf-v6-theme-high-contrast) {
177-
// Chatbot Display Mode - Fullscreen and Embedded
178-
@media screen and (min-width: 64rem) {
179-
.pf-chatbot--fullscreen,
180-
.pf-chatbot--embedded {
181-
.pf-chatbot__header__divider {
182-
display: var(--pf-v6-hidden-visible--Display);
183-
}
184-
}
185-
}
186-
}

‎packages/module/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
Icon,
1212
MenuToggleProps
1313
} from '@patternfly/react-core';
14-
import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
14+
import RhUiEllipsisHorizontalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-horizontal-fill-icon';
1515

1616
export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, 'toggle'> {
1717
/** Content to be displayed in the chatbot header */
@@ -56,7 +56,7 @@ export const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOption
5656
ref={toggleRef}
5757
icon={
5858
<Icon size={isCompact ? 'lg' : 'xl'} isInline>
59-
<EllipsisIcon />
59+
<RhUiEllipsisHorizontalFillIcon />
6060
</Icon>
6161
}
6262
isExpanded={isOptionsMenuOpen}

0 commit comments

Comments
 (0)