+
) {
);
}
- return = ({
);
}
- return (
-
- {({ css: cssString, theme }) => {
- // React Modal styles
- // https://reactcommunity.org/react-modal/styles/classes/
- const styles = {
- base: cssString`
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: calc(100vw - ${theme.spacings.peta} * 2);
- max-width: 420px;
- max-height: calc(100vh - ${theme.spacings.mega} * 2);
- outline: none;
- background-color: var(--cui-bg-elevated);
- border-radius: ${theme.borderRadius.mega};
- padding: ${theme.spacings.giga};
- text-align: center;
- opacity: 0;
- transition: opacity ${TRANSITION_DURATION}ms ease-in-out;
- overflow-y: auto;
-
- ${theme.mq.untilKilo} {
- -webkit-overflow-scrolling: touch;
- }
- `,
-
- afterOpen: cssString`
- opacity: 1;
- `,
- beforeClose: cssString`
- opacity: 0;
- `,
- };
-
- const overlayStyles = {
- base: cssString`
- position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- opacity: 0;
- transition: opacity ${TRANSITION_DURATION}ms ease-in-out;
- background: var(--cui-bg-overlay);
- z-index: ${theme.zIndex.modal};
-
- ${theme.mq.kilo} {
- -webkit-overflow-scrolling: touch;
- overflow-y: auto;
- }
- `,
- afterOpen: cssString`
- opacity: 1;
- `,
- beforeClose: cssString`
- opacity: 0;
- `,
- };
-
- const reactModalProps = {
- className: styles,
- overlayClassName: overlayStyles,
- onRequestClose: onClose,
- closeTimeoutMS: TRANSITION_DURATION,
- shouldCloseOnOverlayClick: !preventClose,
- shouldCloseOnEsc: !preventClose,
- ...props,
- };
-
- function wrapOnClick(onClick?: ButtonProps['onClick']) {
- return (event: ClickEvent) => {
- onClose?.(event);
- onClick?.(event);
- };
- }
+ const reactModalProps = {
+ className: {
+ base: classes.base,
+ afterOpen: classes.open,
+ beforeClose: classes.closed,
+ },
+ overlayClassName: {
+ base: classes.overlay,
+ afterOpen: classes.open,
+ beforeClose: classes.closed,
+ },
+ onRequestClose: onClose,
+ closeTimeoutMS: TRANSITION_DURATION,
+ shouldCloseOnOverlayClick: !preventClose,
+ shouldCloseOnEsc: !preventClose,
+ ...props,
+ };
- const hasImage = Boolean(image);
+ function wrapOnClick(onClick?: ButtonProps['onClick']) {
+ return (event: ClickEvent) => {
+ onClose?.(event);
+ onClick?.(event);
+ };
+ }
- return (
-
- {!preventClose && closeButtonLabel && (
-
- {headline}
-
- {body && {body}}
- {actions && (
-
- );
- }}
-
+ return (
+
+ {!preventClose && closeButtonLabel && (
+
+ {headline}
+
+ {body && {body}}
+ {actions && (
+
);
};
diff --git a/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap b/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap
deleted file mode 100644
index ec8465fced..0000000000
--- a/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap
+++ /dev/null
@@ -1,1736 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`NotificationModal > styles > should render with an SVG 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- background: var(--cui-bg-overlay);
- z-index: 1000;
-}
-
-@media (min-width: 480px) {
- .circuit-0 {
- -webkit-overflow-scrolling: touch;
- overflow-y: auto;
- }
-}
-
-.circuit-1 {
- position: fixed;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -moz-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- width: calc(100vw - 40px * 2);
- max-width: 420px;
- max-height: calc(100vh - 16px * 2);
- outline: none;
- background-color: var(--cui-bg-elevated);
- border-radius: 16px;
- padding: 24px;
- text-align: center;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- overflow-y: auto;
-}
-
-@media (max-width: 479px) {
- .circuit-1 {
- -webkit-overflow-scrolling: touch;
- }
-}
-
-.circuit-2 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-normal);
- border-color: var(--cui-border-normal);
- color: var(--cui-fg-normal);
- padding: calc(12px - 1px) calc(24px - 1px);
- position: relative;
- overflow: hidden;
- padding: calc(12px - 1px);
- border-color: transparent!important;
- position: absolute;
- top: 8px;
- right: 8px;
-}
-
-.circuit-2:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-2:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-2:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-2:disabled,
-.circuit-2[disabled] {
- pointer-events: none;
-}
-
-.circuit-2:hover {
- background-color: var(--cui-bg-normal-hovered);
- border-color: var(--cui-border-normal-hovered);
- color: var(--cui-fg-normal-hovered);
-}
-
-.circuit-2:active,
-.circuit-2[aria-expanded='true'],
-.circuit-2[aria-pressed='true'] {
- background-color: var(--cui-bg-normal-pressed);
- border-color: var(--cui-border-normal-pressed);
- color: var(--cui-fg-normal-pressed);
-}
-
-.circuit-2:disabled,
-.circuit-2[disabled] {
- background-color: var(--cui-bg-normal-disabled);
- border-color: var(--cui-border-normal-disabled);
- color: var(--cui-fg-normal-disabled);
-}
-
-@media (min-width: 480px) {
- .circuit-2 {
- top: 16px;
- right: 16px;
- }
-}
-
-.circuit-3 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-4 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-5 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-7 {
- max-width: 232px;
- height: 120px;
- object-fit: contain;
- margin: 0 auto 24px;
-}
-
-.circuit-8 {
- height: 100%;
- width: 100%;
-}
-
-.circuit-9 {
- font-weight: 700;
- color: var(--cui-fg-normal);
- letter-spacing: -0.03em;
- font-size: 1.25rem;
- line-height: 1.5rem;
- margin-bottom: 8px;
-}
-
-.circuit-10 {
- font-weight: 400;
- font-size: 1rem;
- line-height: 1.5rem;
-}
-
-.circuit-11 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- width: 100%;
- margin-top: 24px;
-}
-
-@media (min-width: 480px) {
- .circuit-11 {
- -webkit-flex-direction: row-reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- }
-}
-
-.circuit-12 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-accent-strong);
- border-color: transparent;
- color: var(--cui-fg-on-strong);
- padding: calc(12px - 1px) calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-12:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-12:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-12:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-12:disabled,
-.circuit-12[disabled] {
- pointer-events: none;
-}
-
-.circuit-12:hover {
- background-color: var(--cui-bg-accent-strong-hovered);
- border-color: transparent;
- color: var(--cui-fg-on-strong-hovered);
-}
-
-.circuit-12:active,
-.circuit-12[aria-expanded='true'],
-.circuit-12[aria-pressed='true'] {
- background-color: var(--cui-bg-accent-strong-pressed);
- border-color: transparent;
- color: var(--cui-fg-on-strong-pressed);
-}
-
-.circuit-12:disabled,
-.circuit-12[disabled] {
- background-color: var(--cui-bg-accent-strong-disabled);
- border-color: transparent;
- color: var(--cui-fg-on-strong-disabled);
-}
-
-.circuit-16 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-normal);
- border-color: var(--cui-border-normal);
- color: var(--cui-fg-normal);
- padding: calc(12px - 1px) calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-16:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-16:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-16:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-16:disabled,
-.circuit-16[disabled] {
- pointer-events: none;
-}
-
-.circuit-16:hover {
- background-color: var(--cui-bg-normal-hovered);
- border-color: var(--cui-border-normal-hovered);
- color: var(--cui-fg-normal-hovered);
-}
-
-.circuit-16:active,
-.circuit-16[aria-expanded='true'],
-.circuit-16[aria-pressed='true'] {
- background-color: var(--cui-bg-normal-pressed);
- border-color: var(--cui-border-normal-pressed);
- color: var(--cui-fg-normal-pressed);
-}
-
-.circuit-16:disabled,
-.circuit-16[disabled] {
- background-color: var(--cui-bg-normal-disabled);
- border-color: var(--cui-border-normal-disabled);
- color: var(--cui-fg-normal-disabled);
-}
-
-@media (min-width: 480px) {
- .circuit-16 {
- margin-right: 16px;
- background-color: var(--cui-bg-normal);
- border-color: var(--cui-border-normal);
- color: var(--cui-fg-normal);
- }
-
- .circuit-16:hover {
- background-color: var(--cui-bg-normal-hovered);
- border-color: var(--cui-border-normal-hovered);
- color: var(--cui-fg-normal-hovered);
- }
-
- .circuit-16:active,
- .circuit-16[aria-expanded='true'],
- .circuit-16[aria-pressed='true'] {
- background-color: var(--cui-bg-normal-pressed);
- border-color: var(--cui-border-normal-pressed);
- color: var(--cui-fg-normal-pressed);
- }
-
- .circuit-16:disabled,
- .circuit-16[disabled] {
- background-color: var(--cui-bg-normal-disabled);
- border-color: var(--cui-border-normal-disabled);
- color: var(--cui-fg-normal-disabled);
- }
-}
-
-@media (max-width: 479px) {
- .circuit-16 {
- margin-right: 0;
- margin-top: 16px;
- background-color: transparent;
- border-color: transparent;
- color: var(--cui-fg-accent);
- padding-left: 0;
- padding-right: 0;
- }
-
- .circuit-16:hover {
- color: var(--cui-fg-accent-hovered);
- background-color: transparent;
- border-color: transparent;
- }
-
- .circuit-16:active,
- .circuit-16[aria-expanded='true'],
- .circuit-16[aria-pressed='true'] {
- color: var(--cui-fg-accent-pressed);
- background-color: transparent;
- border-color: transparent;
- }
-
- .circuit-16:disabled,
- .circuit-16[disabled] {
- color: var(--cui-fg-accent-disabled);
- background-color: transparent;
- border-color: transparent;
- }
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Close modal
-
-
-
-
-
- It's time to update your browser
-
-
- You'll soon need a more up-to-date browser to continue using SumUp.
-
-
-
-
-
-
- Update now
-
-
-
-
-
-
- Not now
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Close modal
-
-
-
-
-
- It's time to update your browser
-
-
- You'll soon need a more up-to-date browser to continue using SumUp.
-
-
-
-
-
-
- Update now
-
-
-
-
-
-
- Not now
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Close modal
-
-
-
-
- It's time to update your browser
-
-
- You'll soon need a more up-to-date browser to continue using SumUp.
-
-
-
-
-
-
- Update now
-
-
-
-
-
-
- Not now
-
-
-
-
-
-
+
{variants.map((variant) => (
(
variant={variant}
/>
))}
-
+
);
Variants.args = {
diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx
index 443ef9953c..1a5b95268c 100644
--- a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx
+++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx
@@ -14,21 +14,21 @@
*/
import { HTMLAttributes, RefObject, useEffect, useRef, useState } from 'react';
-import { css } from '@emotion/react';
-import styled, { StyleProps } from '../../styles/styled.js';
import { useAnimation } from '../../hooks/useAnimation/index.js';
import Body from '../Body/index.js';
import CloseButton from '../CloseButton/index.js';
import { ClickEvent } from '../../types/events.js';
import { BaseToastProps, createUseToast } from '../ToastContext/index.js';
-import { hideVisually } from '../../styles/style-mixins.js';
+import utilityClasses from '../../styles/utility.js';
+import { clsx } from '../../styles/clsx.js';
import {
- NOTIFICATION_COLORS,
NOTIFICATION_ICONS,
NotificationVariant,
} from '../Notification/constants.js';
+import classes from './NotificationToast.module.css';
+
const TRANSITION_DURATION = 200;
const DEFAULT_HEIGHT = 'auto';
@@ -62,70 +62,6 @@ export type NotificationToastProps = HTMLAttributes &
iconLabel?: string;
};
-type NotificationToastWrapperProps = {
- variant: NotificationVariant;
-};
-
-const toastWrapperStyles = ({
- theme,
- variant,
-}: NotificationToastWrapperProps & StyleProps) => css`
- background-color: var(--cui-bg-elevated);
- border-radius: ${theme.borderRadius.byte};
- border: ${theme.borderWidth.mega} solid
- var(${NOTIFICATION_COLORS[variant].border});
- overflow: hidden;
- will-change: height;
- transition: opacity ${TRANSITION_DURATION}ms ease-in-out,
- height ${TRANSITION_DURATION}ms ease-in-out,
- visibility ${TRANSITION_DURATION}ms ease-in-out;
-`;
-
-const NotificationToastWrapper =
- styled('div')(toastWrapperStyles);
-
-const contentWrapperStyles = ({ theme }: StyleProps) => css`
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: ${theme.spacings.kilo} ${theme.spacings.mega};
-`;
-
-const ContentWrapper = styled('div')(contentWrapperStyles);
-
-const contentStyles = ({ theme }: StyleProps) => css`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding-right: ${theme.spacings.peta};
- padding-left: ${theme.spacings.mega};
-`;
-
-const Content = styled('div')(contentStyles);
-
-const IconWrapper = styled.div(
- ({ variant }: { variant: NotificationVariant }) =>
- css`
- position: relative;
- align-self: flex-start;
- flex-grow: 0;
- flex-shrink: 0;
- line-height: 0;
- color: var(${NOTIFICATION_COLORS[variant].fg});
- `,
-);
-
-const closeButtonStyles = ({ theme }: StyleProps) => css`
- flex-grow: 0;
- flex-shrink: 0;
- align-self: flex-start;
- margin-top: -${theme.spacings.bit};
- margin-bottom: -${theme.spacings.bit};
- margin-left: auto;
-`;
-
-const StyledCloseButton = styled(CloseButton)(closeButtonStyles);
-
export function NotificationToast({
variant = 'info',
body,
@@ -134,6 +70,7 @@ export function NotificationToast({
iconLabel = '',
isVisible,
duration, // this is the auto-dismiss duration, not the animation duration. We shouldn't pass it to the wrapper along with ...props
+ className,
...props
}: NotificationToastProps): JSX.Element {
const contentElement = useRef(null);
@@ -161,39 +98,40 @@ export function NotificationToast({
const Icon = NOTIFICATION_ICONS[variant];
return (
-
-
-
+
+
{iconLabel}
-
+
+
{iconLabel}
+
{headline && (
{headline}
)}
{body}
-
+
-
-
-
+
);
}
diff --git a/packages/circuit-ui/components/NotificationToast/__snapshots__/NotificationToast.spec.tsx.snap b/packages/circuit-ui/components/NotificationToast/__snapshots__/NotificationToast.spec.tsx.snap
deleted file mode 100644
index fdac0cedc7..0000000000
--- a/packages/circuit-ui/components/NotificationToast/__snapshots__/NotificationToast.spec.tsx.snap
+++ /dev/null
@@ -1,1869 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`NotificationToast > styles > should render with a headline 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- background-color: var(--cui-bg-elevated);
- border-radius: 8px;
- border: 2px solid var(--cui-border-accent);
- overflow: hidden;
- will-change: height;
- -webkit-transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
-}
-
-.circuit-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 12px 16px;
-}
-
-.circuit-2 {
- position: relative;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- line-height: 0;
- color: var(--cui-fg-accent);
-}
-
-.circuit-3 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- padding-right: 40px;
- padding-left: 16px;
-}
-
-.circuit-5 {
- font-weight: 400;
- font-size: 1rem;
- line-height: 1.5rem;
- font-weight: 700;
-}
-
-.circuit-6 {
- font-weight: 400;
- font-size: 1rem;
- line-height: 1.5rem;
-}
-
-.circuit-7 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-normal);
- border-color: var(--cui-border-normal);
- color: var(--cui-fg-normal);
- padding: calc(12px - 1px) calc(24px - 1px);
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- border-color: transparent!important;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- margin-top: -4px;
- margin-bottom: -4px;
- margin-left: auto;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-7:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-7:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- pointer-events: none;
-}
-
-.circuit-7:hover {
- background-color: var(--cui-bg-normal-hovered);
- border-color: var(--cui-border-normal-hovered);
- color: var(--cui-fg-normal-hovered);
-}
-
-.circuit-7:active,
-.circuit-7[aria-expanded='true'],
-.circuit-7[aria-pressed='true'] {
- background-color: var(--cui-bg-normal-pressed);
- border-color: var(--cui-border-normal-pressed);
- color: var(--cui-fg-normal-pressed);
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- background-color: var(--cui-bg-normal-disabled);
- border-color: var(--cui-border-normal-disabled);
- color: var(--cui-fg-normal-disabled);
-}
-
-.circuit-8 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-9 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-10 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-
-
-
-
-
-
-
-
- Information
-
-
- This is a toast message
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-`;
-
-exports[`NotificationToast > styles > should render with danger variant styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- background-color: var(--cui-bg-elevated);
- border-radius: 8px;
- border: 2px solid var(--cui-border-danger);
- overflow: hidden;
- will-change: height;
- -webkit-transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
-}
-
-.circuit-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 12px 16px;
-}
-
-.circuit-2 {
- position: relative;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- line-height: 0;
- color: var(--cui-fg-danger);
-}
-
-.circuit-3 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- padding-right: 40px;
- padding-left: 16px;
-}
-
-.circuit-5 {
- font-weight: 400;
- font-size: 1rem;
- line-height: 1.5rem;
-}
-
-.circuit-6 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-normal);
- border-color: var(--cui-border-normal);
- color: var(--cui-fg-normal);
- padding: calc(12px - 1px) calc(24px - 1px);
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- border-color: transparent!important;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- margin-top: -4px;
- margin-bottom: -4px;
- margin-left: auto;
-}
-
-.circuit-6:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-6:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-6:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- pointer-events: none;
-}
-
-.circuit-6:hover {
- background-color: var(--cui-bg-normal-hovered);
- border-color: var(--cui-border-normal-hovered);
- color: var(--cui-fg-normal-hovered);
-}
-
-.circuit-6:active,
-.circuit-6[aria-expanded='true'],
-.circuit-6[aria-pressed='true'] {
- background-color: var(--cui-bg-normal-pressed);
- border-color: var(--cui-border-normal-pressed);
- color: var(--cui-fg-normal-pressed);
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- background-color: var(--cui-bg-normal-disabled);
- border-color: var(--cui-border-normal-disabled);
- color: var(--cui-fg-normal-disabled);
-}
-
-.circuit-7 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-8 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-9 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-
-
-
-
-
-
-
-
- This is a toast message
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-`;
-
-exports[`NotificationToast > styles > should render with default styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- background-color: var(--cui-bg-elevated);
- border-radius: 8px;
- border: 2px solid var(--cui-border-accent);
- overflow: hidden;
- will-change: height;
- -webkit-transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
-}
-
-.circuit-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 12px 16px;
-}
-
-.circuit-2 {
- position: relative;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- line-height: 0;
- color: var(--cui-fg-accent);
-}
-
-.circuit-3 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- padding-right: 40px;
- padding-left: 16px;
-}
-
-.circuit-5 {
- font-weight: 400;
- font-size: 1rem;
- line-height: 1.5rem;
-}
-
-.circuit-6 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-normal);
- border-color: var(--cui-border-normal);
- color: var(--cui-fg-normal);
- padding: calc(12px - 1px) calc(24px - 1px);
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- border-color: transparent!important;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- margin-top: -4px;
- margin-bottom: -4px;
- margin-left: auto;
-}
-
-.circuit-6:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-6:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-6:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- pointer-events: none;
-}
-
-.circuit-6:hover {
- background-color: var(--cui-bg-normal-hovered);
- border-color: var(--cui-border-normal-hovered);
- color: var(--cui-fg-normal-hovered);
-}
-
-.circuit-6:active,
-.circuit-6[aria-expanded='true'],
-.circuit-6[aria-pressed='true'] {
- background-color: var(--cui-bg-normal-pressed);
- border-color: var(--cui-border-normal-pressed);
- color: var(--cui-fg-normal-pressed);
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- background-color: var(--cui-bg-normal-disabled);
- border-color: var(--cui-border-normal-disabled);
- color: var(--cui-fg-normal-disabled);
-}
-
-.circuit-7 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-8 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-9 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-
-
-
-
-
-
-
-
- This is a toast message
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-`;
-
-exports[`NotificationToast > styles > should render with info variant styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- background-color: var(--cui-bg-elevated);
- border-radius: 8px;
- border: 2px solid var(--cui-border-accent);
- overflow: hidden;
- will-change: height;
- -webkit-transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
-}
-
-.circuit-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 12px 16px;
-}
-
-.circuit-2 {
- position: relative;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- line-height: 0;
- color: var(--cui-fg-accent);
-}
-
-.circuit-3 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- padding-right: 40px;
- padding-left: 16px;
-}
-
-.circuit-5 {
- font-weight: 400;
- font-size: 1rem;
- line-height: 1.5rem;
-}
-
-.circuit-6 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-normal);
- border-color: var(--cui-border-normal);
- color: var(--cui-fg-normal);
- padding: calc(12px - 1px) calc(24px - 1px);
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- border-color: transparent!important;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- margin-top: -4px;
- margin-bottom: -4px;
- margin-left: auto;
-}
-
-.circuit-6:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-6:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-6:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- pointer-events: none;
-}
-
-.circuit-6:hover {
- background-color: var(--cui-bg-normal-hovered);
- border-color: var(--cui-border-normal-hovered);
- color: var(--cui-fg-normal-hovered);
-}
-
-.circuit-6:active,
-.circuit-6[aria-expanded='true'],
-.circuit-6[aria-pressed='true'] {
- background-color: var(--cui-bg-normal-pressed);
- border-color: var(--cui-border-normal-pressed);
- color: var(--cui-fg-normal-pressed);
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- background-color: var(--cui-bg-normal-disabled);
- border-color: var(--cui-border-normal-disabled);
- color: var(--cui-fg-normal-disabled);
-}
-
-.circuit-7 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-8 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-9 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-
-
-
-
-
-
-
-
- This is a toast message
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-`;
-
-exports[`NotificationToast > styles > should render with success variant styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- background-color: var(--cui-bg-elevated);
- border-radius: 8px;
- border: 2px solid var(--cui-border-success);
- overflow: hidden;
- will-change: height;
- -webkit-transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
-}
-
-.circuit-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 12px 16px;
-}
-
-.circuit-2 {
- position: relative;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- line-height: 0;
- color: var(--cui-fg-success);
-}
-
-.circuit-3 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- padding-right: 40px;
- padding-left: 16px;
-}
-
-.circuit-5 {
- font-weight: 400;
- font-size: 1rem;
- line-height: 1.5rem;
-}
-
-.circuit-6 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-normal);
- border-color: var(--cui-border-normal);
- color: var(--cui-fg-normal);
- padding: calc(12px - 1px) calc(24px - 1px);
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- border-color: transparent!important;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- margin-top: -4px;
- margin-bottom: -4px;
- margin-left: auto;
-}
-
-.circuit-6:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-6:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-6:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- pointer-events: none;
-}
-
-.circuit-6:hover {
- background-color: var(--cui-bg-normal-hovered);
- border-color: var(--cui-border-normal-hovered);
- color: var(--cui-fg-normal-hovered);
-}
-
-.circuit-6:active,
-.circuit-6[aria-expanded='true'],
-.circuit-6[aria-pressed='true'] {
- background-color: var(--cui-bg-normal-pressed);
- border-color: var(--cui-border-normal-pressed);
- color: var(--cui-fg-normal-pressed);
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- background-color: var(--cui-bg-normal-disabled);
- border-color: var(--cui-border-normal-disabled);
- color: var(--cui-fg-normal-disabled);
-}
-
-.circuit-7 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-8 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-9 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-
-
-
-
-
-
-
-
- This is a toast message
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-`;
-
-exports[`NotificationToast > styles > should render with warning variant styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- background-color: var(--cui-bg-elevated);
- border-radius: 8px;
- border: 2px solid var(--cui-border-warning);
- overflow: hidden;
- will-change: height;
- -webkit-transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
-}
-
-.circuit-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 12px 16px;
-}
-
-.circuit-2 {
- position: relative;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- line-height: 0;
- color: var(--cui-fg-warning);
-}
-
-.circuit-3 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- padding-right: 40px;
- padding-left: 16px;
-}
-
-.circuit-5 {
- font-weight: 400;
- font-size: 1rem;
- line-height: 1.5rem;
-}
-
-.circuit-6 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-normal);
- border-color: var(--cui-border-normal);
- color: var(--cui-fg-normal);
- padding: calc(12px - 1px) calc(24px - 1px);
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- border-color: transparent!important;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: flex-start;
- align-self: flex-start;
- margin-top: -4px;
- margin-bottom: -4px;
- margin-left: auto;
-}
-
-.circuit-6:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-6:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-6:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- pointer-events: none;
-}
-
-.circuit-6:hover {
- background-color: var(--cui-bg-normal-hovered);
- border-color: var(--cui-border-normal-hovered);
- color: var(--cui-fg-normal-hovered);
-}
-
-.circuit-6:active,
-.circuit-6[aria-expanded='true'],
-.circuit-6[aria-pressed='true'] {
- background-color: var(--cui-bg-normal-pressed);
- border-color: var(--cui-border-normal-pressed);
- color: var(--cui-fg-normal-pressed);
-}
-
-.circuit-6:disabled,
-.circuit-6[disabled] {
- background-color: var(--cui-bg-normal-disabled);
- border-color: var(--cui-border-normal-disabled);
- color: var(--cui-fg-normal-disabled);
-}
-
-.circuit-7 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-8 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-9 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-
-
-
-
-
-
-
-
- This is a toast message
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-`;
diff --git a/packages/circuit-ui/components/Pagination/Pagination.module.css b/packages/circuit-ui/components/Pagination/Pagination.module.css
new file mode 100644
index 0000000000..66aa7de34d
--- /dev/null
+++ b/packages/circuit-ui/components/Pagination/Pagination.module.css
@@ -0,0 +1,17 @@
+.base {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ padding: var(--cui-spacings-kilo);
+}
+
+.prev {
+ flex-shrink: 0;
+ margin-right: var(--cui-spacings-kilo);
+}
+
+.next {
+ flex-shrink: 0;
+ margin-left: var(--cui-spacings-kilo);
+}
diff --git a/packages/circuit-ui/components/Pagination/Pagination.spec.tsx b/packages/circuit-ui/components/Pagination/Pagination.spec.tsx
index 8df91e1691..f752de2519 100644
--- a/packages/circuit-ui/components/Pagination/Pagination.spec.tsx
+++ b/packages/circuit-ui/components/Pagination/Pagination.spec.tsx
@@ -15,22 +15,11 @@
import { describe, expect, it, vi } from 'vitest';
-import {
- create,
- render,
- renderToHtml,
- axe,
- RenderFn,
- userEvent,
-} from '../../util/test-utils.js';
+import { render, axe, userEvent, screen } from '../../util/test-utils.js';
import { Pagination, PaginationProps } from './Pagination.js';
describe('Pagination', () => {
- function renderPagination
(renderFn: RenderFn, props: PaginationProps) {
- return renderFn(, 'onChange'> {
/**
* The currently active page
*/
@@ -63,26 +63,6 @@ export interface PaginationProps {
totalLabel?: (totalPages: number) => string;
}
-const Nav = styled.nav`
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- padding: ${(p) => p.theme.spacings.kilo};
-`;
-
-const prevButtonStyles = (theme: Theme) =>
- css`
- margin-right: ${theme.spacings.kilo};
- flex-shrink: 0;
- `;
-
-const nextButtonStyles = (theme: Theme) =>
- css`
- margin-left: ${theme.spacings.kilo};
- flex-shrink: 0;
- `;
-
/**
* Pagination is a component to show pages numbers calculate dynamically.
*/
@@ -95,6 +75,7 @@ export const Pagination = ({
nextLabel,
pageLabel = (page) => `Go to page ${page}`,
totalLabel,
+ className,
...props
}: PaginationProps): ReactElement | null => {
if (
@@ -129,14 +110,19 @@ export const Pagination = ({
const pages = PaginationService.generatePages(totalPages);
return (
-
+
onChange(currentPage - 1)}
- css={prevButtonStyles}
+ className={classes.prev}
>
@@ -165,10 +151,10 @@ export const Pagination = ({
variant="tertiary"
disabled={currentPage >= totalPages}
onClick={() => onChange(currentPage + 1)}
- css={nextButtonStyles}
+ className={classes.next}
>
+
);
};
diff --git a/packages/circuit-ui/components/Pagination/PaginationService.ts b/packages/circuit-ui/components/Pagination/PaginationService.ts
index 96f65b3adf..b9df66526c 100644
--- a/packages/circuit-ui/components/Pagination/PaginationService.ts
+++ b/packages/circuit-ui/components/Pagination/PaginationService.ts
@@ -13,8 +13,6 @@
* limitations under the License.
*/
-// Adapted from https://stackoverflow.com/questions/4852017/how-to-initialize-an-arrays-length-in-javascript
export function generatePages(totalPages: number): number[] {
- // eslint-disable-next-line prefer-spread
- return Array.apply(null, Array(totalPages)).map((_, index) => index + 1);
+ return Array.from(Array(totalPages)).map((_, index) => index + 1);
}
diff --git a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap
deleted file mode 100644
index f229b1be06..0000000000
--- a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap
+++ /dev/null
@@ -1,1147 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Pagination > with 2 to 5 pages > should render with default styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: 100%;
- padding: 12px;
-}
-
-.circuit-1 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- padding: calc(12px - 1px) calc(24px - 1px);
- background-color: transparent;
- border-color: transparent;
- color: var(--cui-fg-accent);
- padding-left: 0;
- padding-right: 0;
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- margin-right: 12px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.circuit-1:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-1:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-1:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-1:disabled,
-.circuit-1[disabled] {
- pointer-events: none;
-}
-
-.circuit-1:hover {
- color: var(--cui-fg-accent-hovered);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-1:active,
-.circuit-1[aria-expanded='true'],
-.circuit-1[aria-pressed='true'] {
- color: var(--cui-fg-accent-pressed);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-1:disabled,
-.circuit-1[disabled] {
- color: var(--cui-fg-accent-disabled);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-2 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-3 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-4 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-6 {
- list-style: none;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
-}
-
-.circuit-7 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-accent-strong);
- border-color: transparent;
- color: var(--cui-fg-on-strong);
- padding: calc(4px - 1px) calc(16px - 1px);
- position: relative;
- overflow: hidden;
- min-width: 34px;
- padding: 4px;
- margin-right: 4px;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-7:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-7:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- pointer-events: none;
-}
-
-.circuit-7:hover {
- background-color: var(--cui-bg-accent-strong-hovered);
- border-color: transparent;
- color: var(--cui-fg-on-strong-hovered);
-}
-
-.circuit-7:active,
-.circuit-7[aria-expanded='true'],
-.circuit-7[aria-pressed='true'] {
- background-color: var(--cui-bg-accent-strong-pressed);
- border-color: transparent;
- color: var(--cui-fg-on-strong-pressed);
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- background-color: var(--cui-bg-accent-strong-disabled);
- border-color: transparent;
- color: var(--cui-fg-on-strong-disabled);
-}
-
-li:last-child .circuit-7 {
- margin-right: 0;
-}
-
-.circuit-11 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- padding: calc(4px - 1px) calc(16px - 1px);
- background-color: transparent;
- border-color: transparent;
- color: var(--cui-fg-accent);
- padding-left: 0;
- padding-right: 0;
- position: relative;
- overflow: hidden;
- min-width: 34px;
- padding: 4px;
- margin-right: 4px;
-}
-
-.circuit-11:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-11:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-11:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-11:disabled,
-.circuit-11[disabled] {
- pointer-events: none;
-}
-
-.circuit-11:hover {
- color: var(--cui-fg-accent-hovered);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-11:active,
-.circuit-11[aria-expanded='true'],
-.circuit-11[aria-pressed='true'] {
- color: var(--cui-fg-accent-pressed);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-11:disabled,
-.circuit-11[disabled] {
- color: var(--cui-fg-accent-disabled);
- background-color: transparent;
- border-color: transparent;
-}
-
-li:last-child .circuit-11 {
- margin-right: 0;
-}
-
-.circuit-27 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- padding: calc(12px - 1px) calc(24px - 1px);
- background-color: transparent;
- border-color: transparent;
- color: var(--cui-fg-accent);
- padding-left: 0;
- padding-right: 0;
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- margin-left: 12px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.circuit-27:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-27:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-27:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-27:disabled,
-.circuit-27[disabled] {
- pointer-events: none;
-}
-
-.circuit-27:hover {
- color: var(--cui-fg-accent-hovered);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-27:active,
-.circuit-27[aria-expanded='true'],
-.circuit-27[aria-pressed='true'] {
- color: var(--cui-fg-accent-pressed);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-27:disabled,
-.circuit-27[disabled] {
- color: var(--cui-fg-accent-disabled);
- background-color: transparent;
- border-color: transparent;
-}
-
-
-
-
-
-
-
-
-
- Previous
-
-
-
-
-
-
-
-
-
- 1
-
-
-
-
-
-
-
-
- 2
-
-
-
-
-
-
-
-
- 3
-
-
-
-
-
-
-
-
- 4
-
-
-
-
-
-
-
-
- 5
-
-
-
-
-
-
-
-
-
-
-
- Next
-
-
-
-
-`;
-
-exports[`Pagination > with more than 5 pages > should render with default styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: 100%;
- padding: 12px;
-}
-
-.circuit-1 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- padding: calc(12px - 1px) calc(24px - 1px);
- background-color: transparent;
- border-color: transparent;
- color: var(--cui-fg-accent);
- padding-left: 0;
- padding-right: 0;
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- margin-right: 12px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.circuit-1:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-1:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-1:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-1:disabled,
-.circuit-1[disabled] {
- pointer-events: none;
-}
-
-.circuit-1:hover {
- color: var(--cui-fg-accent-hovered);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-1:active,
-.circuit-1[aria-expanded='true'],
-.circuit-1[aria-pressed='true'] {
- color: var(--cui-fg-accent-pressed);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-1:disabled,
-.circuit-1[disabled] {
- color: var(--cui-fg-accent-disabled);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-2 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-3 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-4 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-6[disabled],
-.circuit-6.cui-field-disabled {
- pointer-events: none;
-}
-
-.circuit-7 {
- display: block;
- font-size: 0.875rem;
- line-height: 1.25rem;
-}
-
-.circuit-8 {
- display: inline-block;
- margin-bottom: 4px;
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-[disabled] .circuit-8,
-.cui-field-disabled .circuit-8 {
- color: var(--cui-fg-normal-disabled);
-}
-
-.circuit-9 {
- color: var(--cui-fg-normal);
- display: block;
- position: relative;
-}
-
-.circuit-10 {
- font-size: 1rem;
- line-height: 1.5rem;
- -webkit-appearance: none;
- -moz-appearance: none;
- -ms-appearance: none;
- appearance: none;
- cursor: pointer;
- background-color: var(--cui-bg-normal);
- outline: none;
- border: 0;
- border-radius: 8px;
- box-shadow: none;
- color: var(--cui-fg-normal);
- margin: 0;
- padding-top: 12px;
- padding-right: 48px;
- padding-bottom: 12px;
- padding-left: 16px;
- position: relative;
- width: 100%;
- z-index: 20;
- overflow-x: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
- transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
- box-shadow: 0 0 0 1px var(--cui-border-normal);
-}
-
-.circuit-10:-moz-focusring {
- color: transparent;
- text-shadow: 0 0 0 #000;
-}
-
-.circuit-10::-ms-expand {
- display: none;
-}
-
-.circuit-10:hover {
- box-shadow: 0 0 0 1px var(--cui-border-normal-hovered);
-}
-
-.circuit-10:focus {
- box-shadow: 0 0 0 2px var(--cui-border-accent);
-}
-
-.circuit-10:active {
- box-shadow: 0 0 0 1px var(--cui-border-accent);
-}
-
-.circuit-11 {
- color: var(--cui-fg-subtle);
- display: block;
- z-index: 21;
- pointer-events: none;
- position: absolute;
- height: 48px;
- width: 48px;
- top: 0;
- right: 0;
- padding: 16px;
-}
-
-select:active~.circuit-11 {
- display: none;
-}
-
-.circuit-12 {
- color: var(--cui-fg-subtle);
- display: block;
- z-index: 21;
- pointer-events: none;
- position: absolute;
- height: 48px;
- width: 48px;
- top: 0;
- right: 0;
- padding: 16px;
-}
-
-select:not(:active)~.circuit-12 {
- display: none;
-}
-
-.circuit-13 {
- margin-left: 12px;
-}
-
-.circuit-14 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- padding: calc(12px - 1px) calc(24px - 1px);
- background-color: transparent;
- border-color: transparent;
- color: var(--cui-fg-accent);
- padding-left: 0;
- padding-right: 0;
- position: relative;
- overflow: hidden;
- padding: calc(8px - 1px);
- margin-left: 12px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.circuit-14:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-14:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-14:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-14:disabled,
-.circuit-14[disabled] {
- pointer-events: none;
-}
-
-.circuit-14:hover {
- color: var(--cui-fg-accent-hovered);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-14:active,
-.circuit-14[aria-expanded='true'],
-.circuit-14[aria-pressed='true'] {
- color: var(--cui-fg-accent-pressed);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-14:disabled,
-.circuit-14[disabled] {
- color: var(--cui-fg-accent-disabled);
- background-color: transparent;
- border-color: transparent;
-}
-
-
-
-
-
-
-
-
-
- Previous
-
-
-
-
-
-
- Pagination
-
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
-
-
-
-
-
-
-
- of 10
-
-
-
-
-
-
-
-
- Next
-
-
-
-
-`;
diff --git a/packages/circuit-ui/components/Pagination/components/PageList/PageList.module.css b/packages/circuit-ui/components/Pagination/components/PageList/PageList.module.css
new file mode 100644
index 0000000000..01a6d576a7
--- /dev/null
+++ b/packages/circuit-ui/components/Pagination/components/PageList/PageList.module.css
@@ -0,0 +1,16 @@
+
+.base {
+ display: flex;
+ justify-content: center;
+ list-style: none;
+}
+
+.button {
+ min-width: 34px;
+ padding: var(--cui-spacings-bit);
+ margin-right: var(--cui-spacings-bit);
+}
+
+li:last-child .button {
+ margin-right: 0;
+}
diff --git a/packages/circuit-ui/components/Pagination/components/PageList/PageList.spec.tsx b/packages/circuit-ui/components/Pagination/components/PageList/PageList.spec.tsx
index d8f422b4ac..b0e898eee0 100644
--- a/packages/circuit-ui/components/Pagination/components/PageList/PageList.spec.tsx
+++ b/packages/circuit-ui/components/Pagination/components/PageList/PageList.spec.tsx
@@ -15,22 +15,11 @@
import { describe, expect, it, vi } from 'vitest';
-import {
- create,
- render,
- renderToHtml,
- axe,
- userEvent,
- RenderFn,
-} from '../../../../util/test-utils.js';
+import { render, axe, userEvent, screen } from '../../../../util/test-utils.js';
import { PageList, PageListProps } from './PageList.js';
describe('PageList', () => {
- function renderPageList(renderFn: RenderFn, props: PageListProps) {
- return renderFn(, 'onChange'> {
@@ -27,24 +27,6 @@ export interface PageListProps
currentPage: number;
}
-const List = styled.ol`
- list-style: none;
- display: flex;
- justify-content: center;
-`;
-
-const buttonStyles = ({ theme }: StyleProps) => css`
- min-width: 34px;
- padding: ${theme.spacings.bit};
- margin-right: ${theme.spacings.bit};
-
- li:last-child & {
- margin-right: 0;
- }
-`;
-
-const PageButton = styled(Button)(buttonStyles);
-
export const PageList: FC = ({
onChange,
pageLabel,
@@ -52,24 +34,26 @@ export const PageList: FC = ({
currentPage,
...props
}: PageListProps): JSX.Element => (
-
+ // eslint-disable-next-line jsx-a11y/no-redundant-roles
+
{pages.map((page) => {
const isCurrent = currentPage === page;
const label = pageLabel(page);
return (
- onChange(page)}
variant={isCurrent ? 'primary' : 'tertiary'}
title={label}
aria-label={label}
aria-current={isCurrent}
+ className={classes.button}
>
{page}
-
+
);
})}
-
+
);
diff --git a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap b/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap
deleted file mode 100644
index 77e7e7ef62..0000000000
--- a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap
+++ /dev/null
@@ -1,306 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`PageList > styles > should render with default styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-.circuit-0 {
- list-style: none;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
-}
-
-.circuit-1 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- background-color: var(--cui-bg-accent-strong);
- border-color: transparent;
- color: var(--cui-fg-on-strong);
- padding: calc(4px - 1px) calc(16px - 1px);
- position: relative;
- overflow: hidden;
- min-width: 34px;
- padding: 4px;
- margin-right: 4px;
-}
-
-.circuit-1:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-1:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-1:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-1:disabled,
-.circuit-1[disabled] {
- pointer-events: none;
-}
-
-.circuit-1:hover {
- background-color: var(--cui-bg-accent-strong-hovered);
- border-color: transparent;
- color: var(--cui-fg-on-strong-hovered);
-}
-
-.circuit-1:active,
-.circuit-1[aria-expanded='true'],
-.circuit-1[aria-pressed='true'] {
- background-color: var(--cui-bg-accent-strong-pressed);
- border-color: transparent;
- color: var(--cui-fg-on-strong-pressed);
-}
-
-.circuit-1:disabled,
-.circuit-1[disabled] {
- background-color: var(--cui-bg-accent-strong-disabled);
- border-color: transparent;
- color: var(--cui-fg-on-strong-disabled);
-}
-
-li:last-child .circuit-1 {
- margin-right: 0;
-}
-
-.circuit-2 {
- display: block;
- border-radius: 100%;
- border: 2px solid currentColor;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- transform-origin: 50% 50%;
- width: 24px;
- height: 24px;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-3 {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-.circuit-4 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- opacity: 1;
- visibility: inherit;
- -webkit-transform: scale3d(1, 1, 1);
- -moz-transform: scale3d(1, 1, 1);
- -ms-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- -webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
-}
-
-.circuit-5 {
- font-size: 1rem;
- line-height: 1.5rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- width: auto;
- height: auto;
- margin: 0;
- cursor: pointer;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-width: 1px;
- border-style: solid;
- border-radius: 999999px;
- -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
- padding: calc(4px - 1px) calc(16px - 1px);
- background-color: transparent;
- border-color: transparent;
- color: var(--cui-fg-accent);
- padding-left: 0;
- padding-right: 0;
- position: relative;
- overflow: hidden;
- min-width: 34px;
- padding: 4px;
- margin-right: 4px;
-}
-
-.circuit-5:focus {
- outline: 0;
- box-shadow: 0 0 0 4px var(--cui-border-focus);
-}
-
-.circuit-5:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-5:focus:not(:focus-visible) {
- box-shadow: none;
-}
-
-.circuit-5:disabled,
-.circuit-5[disabled] {
- pointer-events: none;
-}
-
-.circuit-5:hover {
- color: var(--cui-fg-accent-hovered);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-5:active,
-.circuit-5[aria-expanded='true'],
-.circuit-5[aria-pressed='true'] {
- color: var(--cui-fg-accent-pressed);
- background-color: transparent;
- border-color: transparent;
-}
-
-.circuit-5:disabled,
-.circuit-5[disabled] {
- color: var(--cui-fg-accent-disabled);
- background-color: transparent;
- border-color: transparent;
-}
-
-li:last-child .circuit-5 {
- margin-right: 0;
-}
-
-
-
-
-
-
-
- 1
-
-
-
-
-
-
-
-
- 2
-
-
-
-
-
-
-
-
- 3
-
-
-
-
-`;
diff --git a/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.module.css b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.module.css
new file mode 100644
index 0000000000..b465fb061c
--- /dev/null
+++ b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.module.css
@@ -0,0 +1,3 @@
+.total {
+ margin-left: var(--cui-spacings-kilo);
+}
diff --git a/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.spec.tsx b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.spec.tsx
index f1302b212f..0122b2a91e 100644
--- a/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.spec.tsx
+++ b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.spec.tsx
@@ -15,22 +15,11 @@
import { describe, expect, it, vi } from 'vitest';
-import {
- create,
- render,
- renderToHtml,
- fireEvent,
- axe,
- RenderFn,
-} from '../../../../util/test-utils.js';
+import { render, fireEvent, axe, screen } from '../../../../util/test-utils.js';
import { PageSelect, PageSelectProps } from './PageSelect.js';
describe('PageSelect', () => {
- function renderPageSelect(renderFn: RenderFn, props: PageSelectProps) {
- return renderFn( {
onChange: (page: number) => void;
pages: number[];
@@ -27,10 +28,6 @@ export interface PageSelectProps extends Omit {
[key: string]: unknown;
}
-const TotalPages = styled('span')`
- margin-left: ${(p) => p.theme.spacings.kilo};
-`;
-
export const PageSelect: FunctionComponent = ({
label,
onChange,
@@ -58,7 +55,9 @@ export const PageSelect: FunctionComponent = ({
onChange={handleChange}
hideLabel
/>
- {totalLabel && {totalLabel(totalPages)} }
+ {totalLabel && (
+ {totalLabel(totalPages)}
+ )}
);
};
diff --git a/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap b/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap
deleted file mode 100644
index a0a402944e..0000000000
--- a/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap
+++ /dev/null
@@ -1,242 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`PageSelect > styles > should render with default styles 1`] = `
-HTMLCollection [
- .circuit-0[disabled],
-.circuit-0.cui-field-disabled {
- pointer-events: none;
-}
-
-.circuit-1 {
- display: block;
- font-size: 0.875rem;
- line-height: 1.25rem;
-}
-
-.circuit-2 {
- display: inline-block;
- margin-bottom: 4px;
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-[disabled] .circuit-2,
-.cui-field-disabled .circuit-2 {
- color: var(--cui-fg-normal-disabled);
-}
-
-.circuit-3 {
- color: var(--cui-fg-normal);
- display: block;
- position: relative;
-}
-
-.circuit-4 {
- font-size: 1rem;
- line-height: 1.5rem;
- -webkit-appearance: none;
- -moz-appearance: none;
- -ms-appearance: none;
- appearance: none;
- cursor: pointer;
- background-color: var(--cui-bg-normal);
- outline: none;
- border: 0;
- border-radius: 8px;
- box-shadow: none;
- color: var(--cui-fg-normal);
- margin: 0;
- padding-top: 12px;
- padding-right: 48px;
- padding-bottom: 12px;
- padding-left: 16px;
- position: relative;
- width: 100%;
- z-index: 20;
- overflow-x: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
- transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
- box-shadow: 0 0 0 1px var(--cui-border-normal);
-}
-
-.circuit-4:-moz-focusring {
- color: transparent;
- text-shadow: 0 0 0 #000;
-}
-
-.circuit-4::-ms-expand {
- display: none;
-}
-
-.circuit-4:hover {
- box-shadow: 0 0 0 1px var(--cui-border-normal-hovered);
-}
-
-.circuit-4:focus {
- box-shadow: 0 0 0 2px var(--cui-border-accent);
-}
-
-.circuit-4:active {
- box-shadow: 0 0 0 1px var(--cui-border-accent);
-}
-
-.circuit-5 {
- color: var(--cui-fg-subtle);
- display: block;
- z-index: 21;
- pointer-events: none;
- position: absolute;
- height: 48px;
- width: 48px;
- top: 0;
- right: 0;
- padding: 16px;
-}
-
-select:active~.circuit-5 {
- display: none;
-}
-
-.circuit-6 {
- color: var(--cui-fg-subtle);
- display: block;
- z-index: 21;
- pointer-events: none;
- position: absolute;
- height: 48px;
- width: 48px;
- top: 0;
- right: 0;
- padding: 16px;
-}
-
-select:not(:active)~.circuit-6 {
- display: none;
-}
-
-
-
-
- Pagination
-
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
-
-
-
-
-
-
-
- of 10
- ,
-]
-`;
diff --git a/packages/circuit-ui/components/Popover/Popover.module.css b/packages/circuit-ui/components/Popover/Popover.module.css
new file mode 100644
index 0000000000..debde6bfad
--- /dev/null
+++ b/packages/circuit-ui/components/Popover/Popover.module.css
@@ -0,0 +1,83 @@
+.item {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+ font-size: var(--cui-typography-body-one-font-size);
+ line-height: var(--cui-typography-body-one-line-height);
+ text-align: left;
+}
+
+.icon {
+ margin-right: var(--cui-spacings-kilo);
+}
+
+.trigger {
+ display: inline-block;
+}
+
+.menu {
+ box-sizing: border-box;
+ padding: var(--cui-spacings-byte) 0;
+ visibility: hidden;
+ background-color: var(--cui-bg-elevated);
+ border: 1px solid var(--cui-border-subtle);
+ border-radius: var(--cui-border-radius-byte);
+ box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%);
+ opacity: 0;
+}
+
+@media (max-width: 479px) {
+ .menu {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ opacity: 1;
+ transition: transform var(--cui-transitions-default),
+ visibility var(--cui-transitions-default);
+ transform: translateY(100%);
+ }
+}
+
+.menu.open {
+ visibility: inherit;
+ opacity: 1;
+}
+
+@media (max-width: 479px) {
+ .menu.open {
+ transform: translateY(0);
+ }
+}
+
+.divider {
+ width: calc(100% - var(--cui-spacings-mega) * 2);
+ margin: var(--cui-spacings-byte) var(--cui-spacings-mega);
+}
+
+@media (max-width: 479px) {
+ .overlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ visibility: hidden;
+ background-color: var(--cui-bg-overlay);
+ opacity: 0;
+ transition: opacity var(--cui-transitions-default),
+ visibility var(--cui-transitions-default);
+ }
+
+ .overlay.open {
+ visibility: inherit;
+ opacity: 1;
+ }
+}
+
+.wrapper {
+ pointer-events: none;
+}
+
+.wrapper.open {
+ pointer-events: all;
+}
diff --git a/packages/circuit-ui/components/Popover/Popover.spec.tsx b/packages/circuit-ui/components/Popover/Popover.spec.tsx
index e92cfa5cba..068f899313 100644
--- a/packages/circuit-ui/components/Popover/Popover.spec.tsx
+++ b/packages/circuit-ui/components/Popover/Popover.spec.tsx
@@ -16,7 +16,6 @@
import { afterEach, describe, expect, it, vi } from 'vitest';
import { FC } from 'react';
import { Delete, Add, Download, IconProps } from '@sumup/icons';
-import { Placement } from '@floating-ui/react-dom';
import {
act,
@@ -35,8 +34,6 @@ import {
PopoverProps,
} from './Popover.js';
-const placements: Placement[] = ['top', 'bottom', 'left', 'right'];
-
describe('PopoverItem', () => {
function renderPopoverItem(
renderFn: RenderFn,
@@ -136,174 +133,145 @@ describe('Popover', () => {
isOpen: true,
onToggle: vi.fn(createStateSetter(true)),
};
+ it('should open the popover when clicking the trigger element', async () => {
+ const isOpen = false;
+ const onToggle = vi.fn(createStateSetter(isOpen));
+ renderPopover({ ...baseProps, isOpen, onToggle });
- describe('Styles', () => {
- /**
- * Note: we can't test the offset behavior enabled by the `offset` prop
- * with `jsdom`. The logic is covered in Chromatic.
- */
- it('should render with default styles', async () => {
- const { baseElement } = renderPopover(baseProps);
- expect(baseElement).toMatchSnapshot();
- await flushMicrotasks();
- });
+ const popoverTrigger = screen.getByRole('button');
- it('should render with closed styles', async () => {
- const { baseElement } = renderPopover({ ...baseProps, isOpen: false });
- expect(baseElement).toMatchSnapshot();
- await flushMicrotasks();
- });
+ await userEvent.click(popoverTrigger);
- it.each(placements)('should render popover on %s', async (placement) => {
- const { baseElement } = renderPopover({ ...baseProps, placement });
- expect(baseElement).toMatchSnapshot();
- await flushMicrotasks();
- });
+ expect(onToggle).toHaveBeenCalledTimes(1);
});
- describe('Logic', () => {
- it('should open the popover when clicking the trigger element', async () => {
+ it.each([
+ ['space', '{ }'],
+ ['enter', '{Enter}'],
+ ['arrow down', '{ArrowDown}'],
+ ['arrow up', '{ArrowUp}'],
+ ])(
+ 'should open the popover when pressing the %s key on the trigger element',
+ async (_, key) => {
const isOpen = false;
const onToggle = vi.fn(createStateSetter(isOpen));
renderPopover({ ...baseProps, isOpen, onToggle });
const popoverTrigger = screen.getByRole('button');
- await userEvent.click(popoverTrigger);
+ popoverTrigger.focus();
+ await userEvent.keyboard(key);
expect(onToggle).toHaveBeenCalledTimes(1);
- });
+ },
+ );
- it.each([
- ['space', '{ }'],
- ['enter', '{Enter}'],
- ['arrow down', '{ArrowDown}'],
- ['arrow up', '{ArrowUp}'],
- ])(
- 'should open the popover when pressing the %s key on the trigger element',
- async (_, key) => {
- const isOpen = false;
- const onToggle = vi.fn(createStateSetter(isOpen));
- renderPopover({ ...baseProps, isOpen, onToggle });
+ it('should close the popover when clicking outside', async () => {
+ renderPopover(baseProps);
- const popoverTrigger = screen.getByRole('button');
+ await userEvent.click(document.body);
- popoverTrigger.focus();
- await userEvent.keyboard(key);
+ expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
+ });
- expect(onToggle).toHaveBeenCalledTimes(1);
- },
- );
+ it('should close the popover when clicking the trigger element', async () => {
+ renderPopover(baseProps);
- it('should close the popover when clicking outside', async () => {
- renderPopover(baseProps);
+ const popoverTrigger = screen.getByRole('button');
- await userEvent.click(document.body);
+ await userEvent.click(popoverTrigger);
- expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
- });
+ expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
+ });
- it('should close the popover when clicking the trigger element', async () => {
+ it.each([
+ ['space', '{ }'],
+ ['enter', '{Enter}'],
+ ['arrow up', '{ArrowUp}'],
+ ])(
+ 'should close the popover when pressing the %s key on the trigger element',
+ async (_, key) => {
renderPopover(baseProps);
const popoverTrigger = screen.getByRole('button');
- await userEvent.click(popoverTrigger);
+ popoverTrigger.focus();
+ await userEvent.keyboard(key);
expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
- });
+ },
+ );
- it.each([
- ['space', '{ }'],
- ['enter', '{Enter}'],
- ['arrow up', '{ArrowUp}'],
- ])(
- 'should close the popover when pressing the %s key on the trigger element',
- async (_, key) => {
- renderPopover(baseProps);
+ it('should close the popover when clicking the escape key', async () => {
+ renderPopover(baseProps);
- const popoverTrigger = screen.getByRole('button');
+ await userEvent.keyboard('{Escape}');
- popoverTrigger.focus();
- await userEvent.keyboard(key);
-
- expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
- },
- );
-
- it('should close the popover when clicking the escape key', async () => {
- renderPopover(baseProps);
+ expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
+ });
- await userEvent.keyboard('{Escape}');
+ it('should close the popover when clicking a popover item', async () => {
+ renderPopover(baseProps);
- expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
- });
+ const popoverItems = screen.getAllByRole('menuitem');
- it('should close the popover when clicking a popover item', async () => {
- renderPopover(baseProps);
+ await userEvent.click(popoverItems[0]);
- const popoverItems = screen.getAllByRole('menuitem');
+ expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
+ });
- await userEvent.click(popoverItems[0]);
+ it('should move focus to the first popover item after opening', async () => {
+ const isOpen = false;
+ const onToggle = vi.fn(createStateSetter(isOpen));
- expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
+ const { rerender } = renderPopover({
+ ...baseProps,
+ isOpen,
+ onToggle,
});
- it('should move focus to the first popover item after opening', async () => {
- const isOpen = false;
- const onToggle = vi.fn(createStateSetter(isOpen));
+ act(() => {
+ rerender(;
}
type LinkElProps = Omit, 'onClick'>;
type ButtonElProps = Omit, 'onClick'>;
export type PopoverItemProps = BaseProps & LinkElProps & ButtonElProps;
-type PopoverItemWrapperProps = LinkElProps & ButtonElProps;
-
-const itemWrapperStyles = () => css`
- display: flex;
- justify-content: flex-start;
- align-items: center;
- width: 100%;
- text-align: left;
-`;
-
-const PopoverItemWrapper = styled('button', {
- shouldForwardProp: isPropValid,
-})(listItem, itemWrapperStyles, typography('one'));
-
-const iconStyles = (theme: Theme) => css`
- margin-right: ${theme.spacings.kilo};
-`;
export const PopoverItem = ({
children,
icon: Icon,
+ destructive,
+ className,
...props
}: PopoverItemProps): JSX.Element => {
const { Link } = useComponents();
+ const Element = props.href ? (Link as EmotionAsPropType) : 'button';
+
return (
-
- {Icon &&
+
);
};
-const TriggerElement = styled.div`
- display: inline-block;
-`;
-
-const menuBaseStyles = ({ theme }: StyleProps) => css`
- padding: ${theme.spacings.byte} 0px;
- border: 1px solid var(--cui-border-subtle);
- box-sizing: border-box;
- border-radius: ${theme.borderRadius.byte};
- background-color: var(--cui-bg-elevated);
- visibility: hidden;
- opacity: 0;
-
- ${theme.mq.untilKilo} {
- opacity: 1;
- transform: translateY(100%);
- transition: transform ${theme.transitions.default},
- visibility ${theme.transitions.default};
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- }
-`;
-
-type OpenProps = { isOpen: boolean };
-
-const menuOpenStyles = ({ theme, isOpen }: StyleProps & OpenProps) =>
- isOpen &&
- css`
- opacity: 1;
- visibility: inherit;
-
- ${theme.mq.untilKilo} {
- transform: translateY(0);
- }
- `;
-
-const PopoverMenu = styled('div')(
- shadow,
- menuBaseStyles,
- menuOpenStyles,
-);
-
-const dividerStyles = (theme: Theme) => css`
- margin: ${theme.spacings.byte} ${theme.spacings.mega};
- width: calc(100% - ${theme.spacings.mega}*2);
-`;
-
-const overlayStyles = ({ theme }: StyleProps) => css`
- ${theme.mq.untilKilo} {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: var(--cui-bg-overlay);
- visibility: hidden;
- opacity: 0;
- transition: opacity ${theme.transitions.default},
- visibility ${theme.transitions.default};
- }
-`;
-
-const overlayOpenStyles = ({ theme, isOpen }: StyleProps & OpenProps) =>
- isOpen &&
- css`
- ${theme.mq.untilKilo} {
- visibility: inherit;
- opacity: 1;
- }
- `;
-
-const Overlay = styled.div(overlayStyles, overlayOpenStyles);
-
-const floatingStyles = ({ isOpen }: OpenProps) => css`
- pointer-events: ${isOpen ? 'all' : 'none'};
-`;
-
-const FloatingElement = styled.div(floatingStyles);
-
type Divider = { type: 'divider' };
type Action = PopoverItemProps | Divider;
@@ -264,7 +170,6 @@ export const Popover = ({
offset,
...props
}: PopoverProps): JSX.Element | null => {
- const theme = useTheme();
const zIndex = useStackContext();
const triggerKey = useRef(null);
const menuEl = useRef(null);
@@ -286,7 +191,7 @@ export const Popover = ({
const focusProps = useFocusList();
const prevOpen = usePrevious(isOpen);
- const isMobile = window.matchMedia(`${theme.breakpoints.untilKilo}`).matches;
+ const isMobile = window.matchMedia('(max-width: 479px)').matches;
const mobileStyles = {
position: 'fixed',
@@ -294,7 +199,7 @@ export const Popover = ({
left: '0px',
right: '0px',
width: 'auto',
- zIndex: zIndex || theme.zIndex.popover,
+ zIndex: zIndex || 'var(--cui-z-index-popover)',
} as const;
const handleToggle: OnToggle = (state) => {
@@ -379,7 +284,7 @@ export const Popover = ({
return (
-
+
-
-
-
+ 
);
}
@@ -168,15 +112,19 @@ export const Avatar = ({
: placeholders[variant];
return (
- 
-
-