Skip to content

Commit c1c88ff

Browse files
bagrubbagrub
authored
Merge pull request #373 from US-CBP/feature/theme-segmented-button
update theme toggle to a segmented button group
2 parents a8e425e + eadfba1 commit c1c88ff

File tree

5 files changed

+67
-85
lines changed

5 files changed

+67
-85
lines changed

‎packages/web-components/src/components/cbp-app/cbp-app.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { Component, Prop, Host, h, Env } from '@stencil/core';
1212
})
1313
export class CbpApp {
1414

15+
private darkMode: MediaQueryList;
16+
1517
/** Optionally specifies light/dark mode. This is only needed if the application can change the theme separate from OS settings. */
1618
@Prop({reflect: true}) theme: "light" | "dark" | "system" = "system"
1719

@@ -30,11 +32,17 @@ export class CbpApp {
3032
}
3133

3234
componentDidLoad() {
33-
const darkMode = window?.matchMedia(`(prefers-color-scheme: dark)`);
35+
this.darkMode = window?.matchMedia(`(prefers-color-scheme: dark)`);
3436
// Only set up the listener if we're using the system default, otherwise it's being set manually via reactive property
3537
if (this.theme == "system") {
36-
darkMode.addEventListener('change', mql => this.handleThemeChange(mql)); // Add an event listener to the media query
37-
this.handleThemeChange(darkMode); // Run the theme change handler once on load
38+
this.darkMode.addEventListener('change', mql => this.handleThemeChange(mql)); // Add an event listener to the media query
39+
this.handleThemeChange(this.darkMode); // Run the theme change handler once on load
40+
}
41+
}
42+
43+
componentWillUpdate() {
44+
if(this.theme === 'system'){
45+
this.theme = this.darkMode.matches ? "dark" : "light";
3846
}
3947
}
4048

‎packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default {
1919
'circle-xmark',
2020
'clock',
2121
'clone',
22+
'computer',
2223
'ellipsis-vertical',
2324
'envelope',
2425
'external-link-alt',
@@ -31,6 +32,7 @@ export default {
3132
'lock',
3233
'magnifying-glass',
3334
'minus',
35+
'moon',
3436
'pen-to-square',
3537
'plus',
3638
'right-to-bracket',
@@ -41,6 +43,7 @@ export default {
4143
'square',
4244
'star',
4345
'star-solid',
46+
'sun',
4447
'times',
4548
'triangle-exclamation',
4649
'up-right-from-square',

‎packages/web-components/src/components/cbp-icon/cbp-icon.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,11 @@ export class CbpIcon {
117117
viewbox: "0 0 512 512",
118118
path: "M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4l0 0 0 0 0 0 0 0 .3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z",
119119
},
120+
"computer": {
121+
name: "computer",
122+
viewbox: "0 0 640 640",
123+
path: "M380.8 96C372.7 110.1 368 126.5 368 144L368 160L96 160L96 384L368 384L368 448L96 448C60.7 448 32 419.3 32 384L32 160C32 124.7 60.7 96 96 96L380.8 96zM368 496C368 513.5 372.7 529.9 380.8 544L152 544C138.7 544 128 533.3 128 520C128 506.7 138.7 496 152 496L368 496zM464 96L560 96C586.5 96 608 117.5 608 144L608 496C608 522.5 586.5 544 560 544L464 544C437.5 544 416 522.5 416 496L416 144C416 117.5 437.5 96 464 96zM488 160C474.7 160 464 170.7 464 184C464 197.3 474.7 208 488 208L536 208C549.3 208 560 197.3 560 184C560 170.7 549.3 160 536 160L488 160zM488 256C474.7 256 464 266.7 464 280C464 293.3 474.7 304 488 304L536 304C549.3 304 560 293.3 560 280C560 266.7 549.3 256 536 256L488 256zM544 400C544 382.3 529.7 368 512 368C494.3 368 480 382.3 480 400C480 417.7 494.3 432 512 432C529.7 432 544 417.7 544 400z"
124+
},
120125
"ellipsis-vertical": {
121126
name: "ellipsis-vertical",
122127
viewbox: "0 0 128 512",
@@ -187,6 +192,11 @@ export class CbpIcon {
187192
viewbox: "0 0 448 512",
188193
path: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z",
189194
},
195+
"moon": {
196+
name: "moon",
197+
viewbox: "0 0 640 640",
198+
path: "M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C473.9 463.8 469 464 464 464C362.4 464 280 381.6 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z"
199+
},
190200
"pen-to-square": {
191201
name: "pen-to-square",
192202
viewbox: "0 0 512 512",
@@ -275,6 +285,11 @@ export class CbpIcon {
275285
viewbox: "0 0 576 512",
276286
path: "M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z",
277287
},
288+
"sun": {
289+
name: "sun",
290+
viewbox: "0 0 640 640",
291+
path: "M210.2 53.9C217.6 50.8 226 51.7 232.7 56.1L320.5 114.3L408.3 56.1C415 51.7 423.4 50.9 430.8 53.9C438.2 56.9 443.4 63.5 445 71.3L465.9 174.5L569.1 195.4C576.9 197 583.5 202.4 586.5 209.7C589.5 217 588.7 225.5 584.3 232.2L526.1 320L584.3 407.8C588.7 414.5 589.5 422.9 586.5 430.3C583.5 437.7 576.9 443.1 569.1 444.6L465.8 465.4L445 568.7C443.4 576.5 438 583.1 430.7 586.1C423.4 589.1 414.9 588.3 408.2 583.9L320.4 525.7L232.6 583.9C225.9 588.3 217.5 589.1 210.1 586.1C202.7 583.1 197.3 576.5 195.8 568.7L175 465.4L71.7 444.5C63.9 442.9 57.3 437.5 54.3 430.2C51.3 422.9 52.1 414.4 56.5 407.7L114.7 320L56.5 232.2C52.1 225.5 51.3 217.1 54.3 209.7C57.3 202.3 63.9 196.9 71.7 195.4L175 174.6L195.9 71.3C197.5 63.5 202.9 56.9 210.2 53.9zM239.6 320C239.6 275.6 275.6 239.6 320 239.6C364.4 239.6 400.4 275.6 400.4 320C400.4 364.4 364.4 400.4 320 400.4C275.6 400.4 239.6 364.4 239.6 320zM448.4 320C448.4 249.1 390.9 191.6 320 191.6C249.1 191.6 191.6 249.1 191.6 320C191.6 390.9 249.1 448.4 320 448.4C390.9 448.4 448.4 390.9 448.4 320z"
292+
},
278293
"user": {
279294
name: "user",
280295
viewbox: "0 0 448 512",

‎packages/web-components/src/stories/Archetype_Passenger.stories.tsx‎

Lines changed: 19 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -237,38 +237,22 @@ function renderUserPref(username) {
237237
</cbp-flex-item>
238238
</cbp-flex>
239239
<br />
240-
<cbp-toggle
240+
<cbp-segmented-button-group
241241
id="darkmode"
242-
status-text-on="Dark Mode Active"
243-
status-text-off="Light Mode Active"
244-
sx='{
245-
"--cbp-toggle-circle-color":"var(--cbp-color-white)",
246-
"--cbp-toggle-circle-color-border":"var(--cbp-color-white)",
247-
"--cbp-toggle-color-bg":"var(--cbp-color-yellow-30)",
248-
"--cbp-toggle-color-bg-hover":"var(--cbp-color-yellow-30)",
249-
"--cbp-toggle-color-bg-focus":"var(--cbp-color-yellow-30)",
250-
"--cbp-toggle-circle-color-dark":"var(--cbp-color-white)",
251-
"--cbp-toggle-circle-color-selected-dark":"var(--cbp-color-white)",
252-
"--cbp-toggle-circle-color-border-dark":"var(--cbp-color-white)",
253-
"--cbp-toggle-circle-color-border-selected-dark":"var(--cbp-color-white)",
254-
"--cbp-toggle-color-bg-hover-dark":"var(--cbp-color-mint-cool-60)",
255-
"--cbp-toggle-color-bg-focus-dark":"var(--cbp-color-mint-cool-60)",
256-
"--cbp-toggle-color-bg-selected":"var(--cbp-color-mint-cool-60)",
257-
"--cbp-toggle-color-bg-selected-dark":"var(--cbp-color-mint-cool-60)",
258-
"--cbp-toggle-grid-columns":"var(--cbp-toggle-control-width) 1fr",
259-
"border-top":"var(--cbp-border-size-md) solid var(--cbp-color-gray-cool-20)",
260-
"border-bottom":"var(--cbp-border-size-md) solid var(--cbp-color-gray-cool-20)",
261-
"padding":"var(--cbp-space-3x) 0"
262-
}'
263242
>
264-
<cbp-hide visually-hide>Theme</cbp-hide>
265-
<input
266-
type="checkbox"
267-
name="themeSwitch"
268-
value="undefined"
269-
/>
270-
</cbp-toggle>
271-
243+
<cbp-button value="system" pressed="true">
244+
<cbp-icon name="computer"></cbp-icon>
245+
System
246+
</cbp-button>
247+
<cbp-button value="light">
248+
<cbp-icon name="sun"></cbp-icon>
249+
Light
250+
</cbp-button>
251+
<cbp-button value="dark">
252+
<cbp-icon name="moon"></cbp-icon>
253+
Dark
254+
</cbp-button>
255+
</cbp-segemented-button-group>
272256
</cbp-panel>
273257
</cbp-drawer>
274258
`
@@ -901,18 +885,12 @@ function manifestPane(manifestArgs) {
901885

902886

903887
function initThemeSwitcher() {
904-
const ThemeToggle = document.querySelector('cbp-toggle#darkmode') as HTMLCbpToggleElement;
905-
const DarkMode = window?.matchMedia(`(prefers-color-scheme: dark)`);
906-
// Set the initial toggle state based on the system setting (checked = dark)
907-
ThemeToggle.checked = DarkMode.matches;
908-
888+
const ThemeSegement = document.querySelector('cbp-segmented-button-group#darkmode') as HTMLCbpSegmentedButtonGroupElement
909889
const AppComponent = document.querySelector('cbp-app') as HTMLCbpAppElement;
910-
ThemeToggle.addEventListener('toggleClick', (e)=> {
911-
//console.log('Toggle Clicked: ', e);
912-
// Toggle the `theme` property on `cbp-app` based on this toggle
913-
AppComponent.theme = e.detail.checked ? "dark" : "light";
914-
// If you wanted to persist this setting, you could use sessionStorage or localStorage
915-
});
890+
ThemeSegement.addEventListener('buttonClick', (e: any) => {
891+
let value = e.detail.value;
892+
AppComponent.theme = value;
893+
})
916894
}
917895

918896

‎packages/web-components/src/stories/templates.stories.tsx‎

Lines changed: 19 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -76,18 +76,12 @@ export default {
7676

7777

7878
function initThemeSwitcher() {
79-
const ThemeToggle = document.querySelector('cbp-toggle#darkmode') as HTMLCbpToggleElement;
80-
const DarkMode = window?.matchMedia(`(prefers-color-scheme: dark)`);
81-
// Set the initial toggle state based on the system setting (checked = dark)
82-
ThemeToggle.checked = DarkMode.matches;
83-
79+
const ThemeSegement = document.querySelector('cbp-segmented-button-group#darkmode') as HTMLCbpSegmentedButtonGroupElement
8480
const AppComponent = document.querySelector('cbp-app') as HTMLCbpAppElement;
85-
ThemeToggle.addEventListener('toggleClick', (e)=> {
86-
//console.log('Toggle Clicked: ', e);
87-
// Toggle the `theme` property on `cbp-app` based on this toggle
88-
AppComponent.theme = e.detail.checked ? "dark" : "light";
89-
// If you wanted to persist this setting, you could use sessionStorage or localStorage
90-
});
81+
ThemeSegement.addEventListener('buttonClick', (e: any) => {
82+
let value = e.detail.value;
83+
AppComponent.theme = value;
84+
})
9185
}
9286

9387

@@ -529,38 +523,22 @@ function renderUserPref(username) {
529523
</cbp-flex-item>
530524
</cbp-flex>
531525
<br />
532-
<cbp-toggle
526+
<cbp-segmented-button-group
533527
id="darkmode"
534-
status-text-on="Dark Mode Active"
535-
status-text-off="Light Mode Active"
536-
sx='{
537-
"--cbp-toggle-circle-color":"var(--cbp-color-white)",
538-
"--cbp-toggle-circle-color-border":"var(--cbp-color-white)",
539-
"--cbp-toggle-color-bg":"var(--cbp-color-yellow-30)",
540-
"--cbp-toggle-color-bg-hover":"var(--cbp-color-yellow-30)",
541-
"--cbp-toggle-color-bg-focus":"var(--cbp-color-yellow-30)",
542-
"--cbp-toggle-circle-color-dark":"var(--cbp-color-white)",
543-
"--cbp-toggle-circle-color-selected-dark":"var(--cbp-color-white)",
544-
"--cbp-toggle-circle-color-border-dark":"var(--cbp-color-white)",
545-
"--cbp-toggle-circle-color-border-selected-dark":"var(--cbp-color-white)",
546-
"--cbp-toggle-color-bg-hover-dark":"var(--cbp-color-mint-cool-60)",
547-
"--cbp-toggle-color-bg-focus-dark":"var(--cbp-color-mint-cool-60)",
548-
"--cbp-toggle-color-bg-selected":"var(--cbp-color-mint-cool-60)",
549-
"--cbp-toggle-color-bg-selected-dark":"var(--cbp-color-mint-cool-60)",
550-
"--cbp-toggle-grid-columns":"var(--cbp-toggle-control-width) 1fr",
551-
"border-top":"var(--cbp-border-size-md) solid var(--cbp-color-gray-cool-20)",
552-
"border-bottom":"var(--cbp-border-size-md) solid var(--cbp-color-gray-cool-20)",
553-
"padding":"var(--cbp-space-3x) 0"
554-
}'
555528
>
556-
<cbp-hide visually-hide>Theme</cbp-hide>
557-
<input
558-
type="checkbox"
559-
name="themeSwitch"
560-
value="undefined"
561-
/>
562-
</cbp-toggle>
563-
529+
<cbp-button value="system" pressed="true">
530+
<cbp-icon name="computer"></cbp-icon>
531+
System
532+
</cbp-button>
533+
<cbp-button value="light">
534+
<cbp-icon name="sun"></cbp-icon>
535+
Light
536+
</cbp-button>
537+
<cbp-button value="dark">
538+
<cbp-icon name="moon"></cbp-icon>
539+
Dark
540+
</cbp-button>
541+
</cbp-segemented-button-group>
564542
</cbp-panel>
565543
</cbp-drawer>
566544
`

0 commit comments

Comments
 (0)