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

Jump to bottom

PopoverEducational: Add Experimental Prop for Notification (background color change) #3818

Merged
merged 5 commits into from
Oct 23, 2024
Merged

PopoverEducational: Add Experimental Prop for Notification (background color change) #3818

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
59f98b5
PopoverEducational: Add Experimental Variant for Notification
andorjen Oct 23, 2024
606eca3
update
andorjen Oct 23, 2024
e139532
update
andorjen Oct 23, 2024
ddcb153
update
andorjen Oct 23, 2024
fc7e79c
update
andorjen Oct 23, 2024
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
8 changes: 7 additions & 1 deletion packages/gestalt/src/PopoverEducational.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,11 @@ type Props = {
* An object representing the zIndex value of PopoverEducational. Learn more about [zIndex classes](https://gestalt.pinterest.systems/web/zindex_classes)
*/
zIndex?: Indexable;
/**
* This is an experimental prop that defines what background color is used for the popover.
* If set to 'notification', the background color will be darkGray, and if set to 'education', background color will be blue.
*/
_experimentalVariant?: 'notification' | 'education';
};

/**
Expand All @@ -137,6 +142,7 @@ export default function PopoverEducational({
shouldFocus = false,
size = 'sm',
zIndex,
_experimentalVariant,
Copy link
Contributor

@AlbertCarreras AlbertCarreras Oct 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: let's set the default to 'education'

}: Props) {
const { colorSchemeName } = useColorScheme();
const isDarkMode = colorSchemeName === 'darkMode';
Expand Down Expand Up @@ -170,7 +176,7 @@ export default function PopoverEducational({
<InternalPopover
accessibilityLabel={accessibilityLabel}
anchor={anchor}
color="blue"
color={_experimentalVariant === 'notification' ? 'darkGray' : 'blue'}
disableFocusTrap
disablePortal
forceDirection={forceDirection}
Expand Down
Loading