From 7b5e2e0cf5be5843e1e3671c4f85bc6ed2e180dd Mon Sep 17 00:00:00 2001 From: Karl Kallavus Date: Wed, 6 Oct 2021 15:34:32 +0300 Subject: [PATCH 01/15] fix: hide badge docs --- next-docs/components/sidebar/navigation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next-docs/components/sidebar/navigation.ts b/next-docs/components/sidebar/navigation.ts index fc997af968..2305c043d6 100644 --- a/next-docs/components/sidebar/navigation.ts +++ b/next-docs/components/sidebar/navigation.ts @@ -11,7 +11,7 @@ const navigation = [ children: [ { name: 'Accordion', href: '/components/accordion' }, { name: 'Avatar', href: '/components/avatar' }, - { name: 'Badge', href: '/components/badge' }, + // { name: 'Badge', href: '/components/badge' }, { name: 'Button', href: '/components/button' }, { name: 'Carousel', href: '/components/carousel' }, { From 4335319646ba63d4ca57642d02aaadd9b392df11 Mon Sep 17 00:00:00 2001 From: Karl Kallavus Date: Wed, 6 Oct 2021 15:34:57 +0300 Subject: [PATCH 02/15] fix: align Datepicker --- packages/components/src/datepicker/private/Picker.tsx | 6 +++--- packages/components/src/datepicker/private/Sidebar.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/datepicker/private/Picker.tsx b/packages/components/src/datepicker/private/Picker.tsx index 36525086d1..c2c9e74e30 100644 --- a/packages/components/src/datepicker/private/Picker.tsx +++ b/packages/components/src/datepicker/private/Picker.tsx @@ -11,7 +11,7 @@ import { Sidebar } from './Sidebar'; import { InputsPanel } from './InputsPanel'; const PickerContainer = styled.div( - ({ theme: { color, space, radius, breakpoint, zIndex, boxShadow } }) => ({ + ({ theme: { color, space, radius, breakpoint, zIndex, shadows } }) => ({ width: 'fit-content', position: 'absolute', zIndex: zIndex.dialog, @@ -35,8 +35,8 @@ const PickerContainer = styled.div( gap: rem(space.default), borderRadius: rem(radius.default), padding: space.small, - backgroundColor: color.goku[100], - boxShadow: boxShadow, + backgroundColor: color.gohan[100], + boxShadow: shadows.lg, overflow: 'hidden', }) ); diff --git a/packages/components/src/datepicker/private/Sidebar.tsx b/packages/components/src/datepicker/private/Sidebar.tsx index b650b2ca72..aeb20b6eb4 100644 --- a/packages/components/src/datepicker/private/Sidebar.tsx +++ b/packages/components/src/datepicker/private/Sidebar.tsx @@ -7,7 +7,7 @@ import { getRanges } from './helpers/getRanges'; const SidebarList = styled.ul(({ theme: { color, breakpoint } }) => ({ gridArea: 'sidebar', - background: color.goku[100], + background: color.gohan[100], padding: 0, display: 'flex', flexDirection: 'row', @@ -31,7 +31,7 @@ const RangeItem = styled.li(({ theme, isSelected }) => ({ cursor: 'pointer', fontSize: rem(14), lineHeight: rem(20), - background: isSelected ? theme.color.goku[80] : theme.color.goku[100], + background: isSelected ? theme.color.gohan[80] : theme.color.gohan[100], color: theme.color.bulma[100], [mq(theme.breakpoint.small)]: { paddingLeft: rem(16), From b7b2126174b904a28109a044227435e772b39091 Mon Sep 17 00:00:00 2001 From: Karl Kallavus Date: Wed, 6 Oct 2021 15:40:59 +0300 Subject: [PATCH 03/15] fix: align Dialog shadow --- packages/components/src/dialog/private/layout.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/dialog/private/layout.ts b/packages/components/src/dialog/private/layout.ts index 6ffc949ddb..de9482fea5 100644 --- a/packages/components/src/dialog/private/layout.ts +++ b/packages/components/src/dialog/private/layout.ts @@ -20,8 +20,8 @@ export const DialogContainer = styled.div<{ variant?: 'default' | 'new' }>( * padding with a pseudo element. */ export const DialogMain = styled.main<{ variant?: 'default' | 'new' }>( - ({ theme: { space, breakpoint, boxShadow }, variant }) => ({ - boxShadow, + ({ theme: { space, breakpoint, shadows }, variant }) => ({ + boxShadow: shadows.lg, padding: variant === 'new' ? 0 : rem(20), [mq(breakpoint.medium)]: { paddingTop: variant === 'new' ? 0 : rem(space.xlarge), From 253789c30c4bb7b1b933479a2724a26ee8ee0e83 Mon Sep 17 00:00:00 2001 From: Karl Kallavus Date: Wed, 6 Oct 2021 15:41:14 +0300 Subject: [PATCH 04/15] fix: align Popover shadow --- packages/popover/src/private/layout.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/popover/src/private/layout.ts b/packages/popover/src/private/layout.ts index 9a5f8acb9f..51489abb6e 100644 --- a/packages/popover/src/private/layout.ts +++ b/packages/popover/src/private/layout.ts @@ -9,7 +9,7 @@ interface PopoverContainerProps { } export const PopoverContainer = styled.div( - ({ theme: { color, radius, boxShadow }, padding, backgroundColor, theme }) => ({ + ({ theme: { color, radius, shadows }, padding, backgroundColor, theme }) => ({ maxWidth: rem(600), minWidth: rem(300), padding: `${padding !== undefined ? rem(padding) : rem(24)}`, @@ -21,6 +21,6 @@ export const PopoverContainer = styled.div( outline: 'none', borderRadius: rem(radius.default), color: color.bulma[100], - boxShadow: boxShadow, + boxShadow: shadows.lg, }) ); From adac5c9334f8fc94150fb9d5687dbaa6b33c4ef8 Mon Sep 17 00:00:00 2001 From: Karl Kallavus Date: Wed, 6 Oct 2021 15:43:19 +0300 Subject: [PATCH 05/15] fix: align Search shadow --- packages/core/src/search/private/components/Styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/search/private/components/Styles.ts b/packages/core/src/search/private/components/Styles.ts index 02d4644461..a381809d8c 100644 --- a/packages/core/src/search/private/components/Styles.ts +++ b/packages/core/src/search/private/components/Styles.ts @@ -69,7 +69,7 @@ export const Results = styled.div( }, }), ({ - theme: { borderWidth, boxShadow, breakpoint, color, radius, space }, + theme: { borderWidth, shadows, breakpoint, color, radius, space }, }) => ({ position: 'absolute', left: 0, @@ -91,7 +91,7 @@ export const Results = styled.div( borderStyle: 'solid', borderColor: color.beerus[100], backgroundColor: color.gohan[100], - boxShadow, + boxShadow: shadows.lg, }, }) ); From a2964a8b404f7a6d858437d60bd042dbcd9ba42a Mon Sep 17 00:00:00 2001 From: Karl Kallavus Date: Wed, 6 Oct 2021 15:50:43 +0300 Subject: [PATCH 06/15] fix: SingleSelect hover colour & shadow --- packages/core/src/singleSelect/private/Options.tsx | 2 +- .../src/singleSelect/private/styles/ListboxPopoverWrapper.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/singleSelect/private/Options.tsx b/packages/core/src/singleSelect/private/Options.tsx index 4ac06b9f70..01f2d0e806 100644 --- a/packages/core/src/singleSelect/private/Options.tsx +++ b/packages/core/src/singleSelect/private/Options.tsx @@ -24,7 +24,7 @@ const ListboxOptionWrapper = styled(ListboxOption)(({ theme: { color } }) => ({ cursor: 'pointer', borderRadius: rem(4), '&:hover': { - backgroundColor: color.hit[80], + backgroundColor: color.goku[100], }, })); diff --git a/packages/core/src/singleSelect/private/styles/ListboxPopoverWrapper.ts b/packages/core/src/singleSelect/private/styles/ListboxPopoverWrapper.ts index d519a5a908..76c60f575d 100644 --- a/packages/core/src/singleSelect/private/styles/ListboxPopoverWrapper.ts +++ b/packages/core/src/singleSelect/private/styles/ListboxPopoverWrapper.ts @@ -4,12 +4,12 @@ import { ListboxPopover, ListboxPopoverProps } from '@reach/listbox'; import React from 'react'; const ListboxPopoverWrapper = styled(ListboxPopover)( - ({ theme: { color, boxShadow } }) => ({ + ({ theme: { color, shadows } }) => ({ backgroundColor: color.gohan[100], borderRadius: rem(12), padding: `${rem(8)} 0`, marginTop: rem(6), - boxShadow: boxShadow, + boxShadow: shadows.lg, }) ) as React.FC; From 07a3de3b03137c05767798c95b67f39c3bedb0e2 Mon Sep 17 00:00:00 2001 From: Karl Kallavus Date: Wed, 6 Oct 2021 16:02:06 +0300 Subject: [PATCH 07/15] fix: MultiSelect shadow & borders --- packages/core/src/multiSelect/MultiSelect.tsx | 2 +- .../multiSelect/private/styles/Container.tsx | 18 ++++++++++-------- .../src/multiSelect/private/styles/Menu.tsx | 5 +---- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/core/src/multiSelect/MultiSelect.tsx b/packages/core/src/multiSelect/MultiSelect.tsx index 74e285d727..f25261256d 100644 --- a/packages/core/src/multiSelect/MultiSelect.tsx +++ b/packages/core/src/multiSelect/MultiSelect.tsx @@ -92,7 +92,7 @@ const MultiSelect: React.FC = ({ const isEmptySelectedItems = selectedItems && selectedItems.length === 0; return ( - + {label && (