Skip to content
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

fix(NotificationsPanel): remove hard-coded dark theme #6862

Merged
merged 8 commits into from
Feb 12, 2025
+36 −20
Merged

fix(NotificationsPanel): remove hard-coded dark theme #6862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1f2fb22
fix: notifications panel honors set theme
paul-balchin-ibm Feb 7, 2025
81710e7
Merge remote-tracking branch 'upstream/main' into 5259_notifications-…
paul-balchin-ibm Feb 7, 2025
1e993b4
Merge remote-tracking branch 'upstream/main' into 5259_notifications-…
paul-balchin-ibm Feb 10, 2025
3e2f273
fix: added outside border and drop shadow
paul-balchin-ibm Feb 10, 2025
36a2e63
Merge remote-tracking branch 'upstream/main' into 5259_notifications-…
paul-balchin-ibm Feb 11, 2025
4ac9998
fix: added border and drop shadow
paul-balchin-ibm Feb 11, 2025
95fa105
Merge remote-tracking branch 'upstream/main' into 5259_notifications-…
paul-balchin-ibm Feb 12, 2025
dda8463
fix: removed commented code
paul-balchin-ibm Feb 12, 2025
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
38 changes: 20 additions & 18 deletions packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
//
// Copyright IBM Corp. 2020, 2021
// Copyright IBM Corp. 2020, 2025
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

// Standard imports.
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/themes' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/type';
Expand All @@ -20,11 +19,13 @@
@use '../EmptyStates/empty-state';

$block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
$block-size: 38.5rem;

@keyframes fade-in {
0% {
opacity: 0;
// stylelint-disable-next-line carbon/layout-use
transform: translateY(-38.5rem); // the height of the notification panel
transform: translateY(-$block-size); // the height of the notification panel
}

100% {
Expand All @@ -42,7 +43,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
100% {
opacity: 0;
// stylelint-disable-next-line carbon/layout-use
transform: translateY(-38.5rem); // the height of the notification panel
transform: translateY(-$block-size); // the height of the notification panel
}
}
.#{$block-class}__entrance {
Expand All @@ -60,27 +61,28 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
}

.#{$block-class}__container {
@include theme($g100);

position: fixed;
z-index: 2;
overflow: auto;
background-color: $background;
background-color: $layer-01;
border-block-end: 1px solid $border-subtle-02;
border-inline-start: 1px solid $border-subtle-02;
devadula-nandan marked this conversation as resolved.
Show resolved Hide resolved
box-shadow: 0 $spacing-01 $spacing-02 $overlay;
color: $text-primary;
inset-block-start: $spacing-09;
inset-inline-end: 0;
max-block-size: 38.5rem;
max-block-size: $block-size;
max-inline-size: 22.75rem;
min-block-size: 38.5rem;
min-block-size: $block-size;
min-inline-size: 20rem;
transition: transform $duration-fast-02 motion(standard);

.#{$block-class}__header-container {
position: sticky;
z-index: 2;
padding: $spacing-03 $spacing-05 $spacing-05;
background-color: $background;
border-block-end: 1px solid $layer-02;
background-color: $layer-01;
border-block-end: 1px solid $border-subtle-01;
devadula-nandan marked this conversation as resolved.
Show resolved Hide resolved
inset-block-start: 0;
.#{$block-class}__header-flex {
display: flex;
Expand Down Expand Up @@ -132,19 +134,19 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
align-items: flex-start;
padding: $spacing-05;
border: 0;
background-color: $background;
background-color: $layer-01;
cursor: pointer;
inline-size: 100%;
min-block-size: 6.25rem;
text-align: start;
transition: background-color $duration-moderate-02 motion(standard);
.#{$block-class}__notification-title {
color: $text-on-color;
color: $text-secondary;
margin-block-end: $spacing-02;
@include font-weight('regular');
}
.#{$block-class}__notification-title.#{$block-class}__notification-title-unread {
color: $text-on-color;
color: $text-secondary;
margin-block-end: $spacing-02;
@include font-weight('semibold');
}
Expand Down Expand Up @@ -248,7 +250,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
.#{$block-class}__notification-previous:not(:first-of-type):before {
position: absolute;
margin: 0 auto;
background-color: $layer-02;
background-color: $border-subtle-01;
block-size: 1px;
content: '';
inline-size: calc(100% - (2 * #{$spacing-05}));
Expand Down Expand Up @@ -282,16 +284,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
z-index: 2;
display: flex;
align-items: center;
background-color: $background;
background-color: $layer-01;
block-size: 2.5rem;
border-block-start: 1px solid $layer-02;
border-block-start: 1px solid $border-subtle-01;
devadula-nandan marked this conversation as resolved.
Show resolved Hide resolved
inset-block-end: 0;
min-block-size: 2.5rem;
.#{$block-class}__view-all-button {
display: flex;
align-items: center;
block-size: 2.5rem;
border-inline-end: 1px solid $layer-02;
border-inline-end: 1px solid $border-subtle-01;
devadula-nandan marked this conversation as resolved.
Show resolved Hide resolved
color: $text-primary;
inline-size: 100%;
max-inline-size: calc(100% - 2.5rem);
Expand Down
18 changes: 16 additions & 2 deletions packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,16 @@ import cx from 'classnames';
import { getDevtoolsProps } from '../../global/js/utils/devtools';
import { pkg } from '../../settings';
import { prepareProps } from '../../global/js/utils/props-helper';
import { timeAgo } from './utils';
import { useClickOutside, usePreviousValue } from '../../global/js/hooks';
import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReducedMotion';
import { timeAgo } from './utils';

// The block part of our conventional BEM class names (blockClass__E--M).
const componentName = 'NotificationsPanel';
const blockClass = `${pkg.prefix}--notifications-panel`;

export type Themes = 'light' | 'dark';

// Default values for props
const defaults = {
daysAgoText: (value) => `${value} days ago`,
Expand All @@ -49,6 +51,7 @@ const defaults = {
emptyStateLabel: 'You do not have any notifications',
hourAgoText: (value) => `${value} hour ago`,
hoursAgoText: (value) => `${value} hours ago`,
illustrationTheme: 'light' as Themes,
minuteAgoText: (value) => `${value} minute ago`,
minutesAgoText: (value) => `${value} minutes ago`,
monthAgoText: (value) => `${value} month ago`,
Expand Down Expand Up @@ -137,6 +140,11 @@ export interface NotificationsPanelProps {
*/
hoursAgoText?: (value: number) => string;

/**
* Determines the theme of the empty state's illustration.
*/
illustrationTheme: Themes;

/**
* Sets the `minute ago` label text
*/
Expand Down Expand Up @@ -279,6 +287,7 @@ export let NotificationsPanel = React.forwardRef(
emptyStateLabel = defaults.emptyStateLabel,
hourAgoText = defaults.hourAgoText,
hoursAgoText = defaults.hoursAgoText,
illustrationTheme = defaults.illustrationTheme,
minuteAgoText = defaults.minuteAgoText,
minutesAgoText = defaults.minutesAgoText,
monthAgoText = defaults.monthAgoText,
Expand Down Expand Up @@ -714,7 +723,7 @@ export let NotificationsPanel = React.forwardRef(
) : null}
{!allNotifications.length && (
<NotificationsEmptyState
illustrationTheme="dark"
illustrationTheme={illustrationTheme}
title=""
subtitle={emptyStateLabel}
/>
Expand Down Expand Up @@ -838,6 +847,11 @@ NotificationsPanel.propTypes = {
*/
hoursAgoText: PropTypes.func,

/**
* Determines the theme of the empty state's illustration.
*/
illustrationTheme: PropTypes.oneOf(['light', 'dark']),

/**
* Sets the `minute ago` label text
*/
Expand Down
Loading