From 917876b4c0d29abecc8134f77fc1af02d1d45052 Mon Sep 17 00:00:00 2001 From: George Karalis <15313012+geokaralis@users.noreply.github.com> Date: Tue, 17 Sep 2024 16:58:20 +0300 Subject: [PATCH 1/5] feat: inline alert v5 --- package.json | 2 +- .../Original Components/Modal-Modal.snap | 1 + .../Modal-ModalContent.snap | 1 + .../Navigation-NavigationStory.snap | 1 + ...igation-NavigationWithCustomComponent.snap | 1 + .../Notification-BannerNotification.snap | 1 + .../Notification-InlineNotificationStory.snap | 2 + .../Notification-Playground1.snap | 1 + .../Notification-Playground2.snap | 1 + .../Notification-Playground3.snap | 1 + .../Notification-SnackbarNotification.snap | 1 + .../Notification-ToastNotification.snap | 1 + .../Pagination-PaginationStory.snap | 4 + ...agination-PaginationWithoutAllButtons.snap | 2 + .../TableV4-TableWithExpandableRows.snap | 50 +++ ...eV4-TableWithExpandableRowsAndSortDir.snap | 50 +++ ...eWithExpandableRowsExpandedOnPageLoad.snap | 50 +++ ...ThemeProvider-SettingUpAButtonExample.snap | 1 + .../TopNavBar-Playground.snap | 1 + .../TopNavBar-WithAdditionalTools.snap | 1 + .../TopNavBar-WithDarkThemeEnabled.snap | 2 + .../TopNavBar-WithLogoPlaceholder.snap | 2 + .../Breadcrumb-Playground.snap | 1 + .../Buttons/Default (Text)-BlockButton.snap | 6 + .../Default (Text)-ButtonPlayground.snap | 1 + .../Buttons/Default (Text)-ButtonTypes.snap | 16 + .../Default (Text)-ButtonsWithAvatars.snap | 3 + .../Default (Text)-ButtonsWithIcons.snap | 3 + .../Buttons/Default (Text)-LoadingButton.snap | 10 + .../DropdownButton-ButtonWithDropdown.snap | 12 + ...DropdownButton-IconButtonWithDropdown.snap | 6 + .../IconButton-IconButtonTypesAndSizes.snap | 12 + .../Buttons/IconButton-Playground.snap | 1 + .../Drawer/Drawer-Background.snap | 3 + .../Drawer/Drawer-FixedContent.snap | 1 + .../Drawer/Drawer-MoreExamples.snap | 2 + .../Drawer/Drawer-Placement.snap | 4 + .../Drawer/Drawer-Playground.snap | 1 + .../Drawer/Drawer-Sizes.snap | 4 + .../Filter-AddedFilter.snap | 1 + .../Inline Alert-Error.snap | 284 +++++++++++++ .../Inline Alert-Informational.snap | 286 +++++++++++++ .../Inline Alert-Neutral.snap | 246 ++++++++++++ .../Inline Alert-Success.snap | 284 +++++++++++++ .../Inline Alert-Warning.snap | 286 +++++++++++++ .../Inline Alert-WithButtons.snap | 378 ++++++++++++++++++ .../Inline Alert-WithoutAction.snap | 196 +++++++++ .../Inline Alert-WithoutDismiss.snap | 145 +++++++ .../List/List-GroupList.snap | 28 +- .../List/List-ListStory.snap | 18 +- .../List/List-VirtualizedList.snap | 14 +- .../List/ListItem-DisabledListItem.snap | 18 +- .../List/ListItem-ListItemCompilations.snap | 56 +-- .../List/ListItemText-ListItemTextNormal.snap | 8 +- ...temText-ListItemTextWithSecondaryText.snap | 8 +- .../List/ListSection-CompactListSection.snap | 20 +- .../List/ListSection-NormalListSection.snap | 20 +- .../Menu-MenuComponents.snap | 2 + .../Menu-MenuDisabledKeys.snap | 1 + .../Menu-MenuItemDividerStory.snap | 2 + .../Updated Components/Menu-MenuTriggers.snap | 2 + ...Menu-MenuWithCustomListWidthAndHeight.snap | 1 + ...ress Indicator-BlockProgressIndicator.snap | 2 +- ...-CircularProgressIndicatorErrorStates.snap | 4 +- ...ircularProgressIndicatorIndeterminate.snap | 2 +- ...rcularProgressIndicatorWithPercentage.snap | 2 +- ...-LinearProgressIndicatorIndeterminate.snap | 2 +- ...LinearProgressIndicatorWithPercentage.snap | 2 +- .../Progress Indicator-Playground.snap | 4 +- .../Table/Table/Columns-ColumnChooser.snap | 1 + .../Table/Table/Columns-Sorting.snap | 4 + .../Table/Table/Pagination-Pagination.snap | 4 + .../Table/Rows and Cells-RowSelection.snap | 3 + .../Tooltip-InteractiveTooltip.snap | 2 + .../Tooltip-Playground.snap | 2 + .../Tooltip-TextTooltip.snap | 2 + .../Tooltip-TooltipPlacement.snap | 4 + src/components/ButtonBase/ButtonBase.tsx | 1 + .../OverlayComponent.test.tsx.snap | 11 + .../__snapshots__/MonthWrapper.test.tsx.snap | 3 + src/components/InlineAlert/InlineAlert.mdx | 44 ++ .../InlineAlert/InlineAlert.stories.tsx | 123 ++++++ .../InlineAlert/InlineAlert.style.ts | 129 ++++++ src/components/InlineAlert/InlineAlert.tsx | 64 +++ .../InlineAlert/InlineAlert.types.ts | 13 + src/components/InlineAlert/index.ts | 1 + .../InlineAlert/tests/InlineAlert.test.tsx | 18 + .../__snapshots__/TopAppBar.test.tsx.snap | 2 + .../PaletteShowcase.test.tsx.snap | 1 + src/index.ts | 2 + yarn.lock | 190 ++++----- 91 files changed, 3014 insertions(+), 195 deletions(-) create mode 100644 src/__storyshots__/Updated Components/Inline Alert-Error.snap create mode 100644 src/__storyshots__/Updated Components/Inline Alert-Informational.snap create mode 100644 src/__storyshots__/Updated Components/Inline Alert-Neutral.snap create mode 100644 src/__storyshots__/Updated Components/Inline Alert-Success.snap create mode 100644 src/__storyshots__/Updated Components/Inline Alert-Warning.snap create mode 100644 src/__storyshots__/Updated Components/Inline Alert-WithButtons.snap create mode 100644 src/__storyshots__/Updated Components/Inline Alert-WithoutAction.snap create mode 100644 src/__storyshots__/Updated Components/Inline Alert-WithoutDismiss.snap create mode 100644 src/components/InlineAlert/InlineAlert.mdx create mode 100644 src/components/InlineAlert/InlineAlert.stories.tsx create mode 100644 src/components/InlineAlert/InlineAlert.style.ts create mode 100644 src/components/InlineAlert/InlineAlert.tsx create mode 100644 src/components/InlineAlert/InlineAlert.types.ts create mode 100644 src/components/InlineAlert/index.ts create mode 100644 src/components/InlineAlert/tests/InlineAlert.test.tsx diff --git a/package.json b/package.json index 368b6aac4..14cc223d5 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,7 @@ "history": "^4.10.1", "husky": "^6.0.0", "identity-obj-proxy": "^3.0.0", - "jsdom": "^22.1.0", + "jsdom": "^25.0.0", "lint-staged": "^11.0.0", "prettier": "^2.6.2", "react": "^18.2.0", diff --git a/src/__storyshots__/Original Components/Modal-Modal.snap b/src/__storyshots__/Original Components/Modal-Modal.snap index 7629ab6aa..af2866ab9 100644 --- a/src/__storyshots__/Original Components/Modal-Modal.snap +++ b/src/__storyshots__/Original Components/Modal-Modal.snap @@ -112,6 +112,7 @@ > + +
+ +
+ +
+ + + +
+ + + \ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Inline Alert-WithoutAction.snap b/src/__storyshots__/Updated Components/Inline Alert-WithoutAction.snap new file mode 100644 index 000000000..e72c752b5 --- /dev/null +++ b/src/__storyshots__/Updated Components/Inline Alert-WithoutAction.snap @@ -0,0 +1,196 @@ +.emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-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; + gap: 8px; + container-type: inline-size; + width: 100%; +} + +.emotion-2 { + --_border-width: 0.0625rem; + --_outline-width: 0.25rem; + --_min-height: 2.75rem; + --_min-content-width: 6.25rem; + box-sizing: border-box; + position: relative; + isolation: isolate; + padding: calc(0.75rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); + display: inline-grid; + grid-template-columns: auto minmax(var(--_min-content-width), 1fr) auto; + grid-template-areas: 'icon content actions close'; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: rgba(200,206,255,0.20); + border-radius: 0.25rem; + border: 1px solid rgba(200,206,255,0.70); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 2px; + -webkit-transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1); + transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.emotion-2:focus-visible { + outline-offset: 0; + outline: var(--_outline-width) solid #A566FF; +} + +.emotion-2:has([data-slot='button']) { + padding: calc(0.5rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); +} + +@container (max-width: calc(600px - 1px)) { + .emotion-2 { + grid-template-areas: 'icon content close' 'icon actions close'; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + } + + .emotion-2:has([data-slot='button']) { + padding: calc(0.75rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); + } +} + +@media (prefers-reduced-motion) { + .emotion-2 { + -webkit-transition: none; + transition: none; + } +} + +.emotion-3 { + width: 1.25rem; + height: 1.25rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + grid-area: icon; + margin-right: 0.75rem; + pointer-events: none; +} + +.emotion-4 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-4 path { + fill: #5E8DF8!important; +} + +.emotion-5 { + font-family: Roboto; + font-weight: 400; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; + grid-area: content; + cursor: default; +} + +.emotion-6 { + width: 1.25rem; + height: 1.25rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + grid-area: close; + justify-self: end; + margin-left: 1rem; +} + +.emotion-6:hover, +.emotion-6:focus-visible { + -webkit-transition: all 0.2s; + transition: all 0.2s; + border-radius: 100%; + background: rgba(200,206,255,0.20); + box-shadow: 0px 0px 0px 8px rgba(200,206,255,0.20); +} + +.emotion-7 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-7 path { + fill: #52567a!important; +} + +
+
+
+ +
+ Alert copy should be short, easy to understand and actionable. +
+
+ + + +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Inline Alert-WithoutDismiss.snap b/src/__storyshots__/Updated Components/Inline Alert-WithoutDismiss.snap new file mode 100644 index 000000000..9747bcbf7 --- /dev/null +++ b/src/__storyshots__/Updated Components/Inline Alert-WithoutDismiss.snap @@ -0,0 +1,145 @@ +.emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-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; + gap: 8px; + container-type: inline-size; + width: 100%; +} + +.emotion-2 { + --_border-width: 0.0625rem; + --_outline-width: 0.25rem; + --_min-height: 2.75rem; + --_min-content-width: 6.25rem; + box-sizing: border-box; + position: relative; + isolation: isolate; + padding: calc(0.75rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); + display: inline-grid; + grid-template-columns: auto minmax(var(--_min-content-width), 1fr) auto; + grid-template-areas: 'icon content actions close'; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: rgba(200,206,255,0.20); + border-radius: 0.25rem; + border: 1px solid rgba(200,206,255,0.70); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 2px; + -webkit-transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1); + transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.emotion-2:focus-visible { + outline-offset: 0; + outline: var(--_outline-width) solid #A566FF; +} + +.emotion-2:has([data-slot='button']) { + padding: calc(0.5rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); +} + +@container (max-width: calc(600px - 1px)) { + .emotion-2 { + grid-template-areas: 'icon content close' 'icon actions close'; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + } + + .emotion-2:has([data-slot='button']) { + padding: calc(0.75rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); + } +} + +@media (prefers-reduced-motion) { + .emotion-2 { + -webkit-transition: none; + transition: none; + } +} + +.emotion-3 { + width: 1.25rem; + height: 1.25rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + grid-area: icon; + margin-right: 0.75rem; + pointer-events: none; +} + +.emotion-4 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-4 path { + fill: #5E8DF8!important; +} + +.emotion-5 { + font-family: Roboto; + font-weight: 400; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; + grid-area: content; + cursor: default; +} + +
+
+
+ +
+ Alert copy should be short, easy to understand and actionable. +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/List/List-GroupList.snap b/src/__storyshots__/Updated Components/List/List-GroupList.snap index fdbfcea34..891ed3ebb 100644 --- a/src/__storyshots__/Updated Components/List/List-GroupList.snap +++ b/src/__storyshots__/Updated Components/List/List-GroupList.snap @@ -140,9 +140,9 @@ style="height: 100%;" >