From b3461f935ef90c6c90630b725ae2409c70c6e20c Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Mon, 2 Sep 2024 15:40:11 +0545 Subject: [PATCH 01/25] Input label - fix label alignment Tab - fix line height - black line appear between dots --- packages/ui/src/components/InputLabel/styles.module.css | 2 +- packages/ui/src/components/Tabs/Tab/styles.module.css | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/InputLabel/styles.module.css b/packages/ui/src/components/InputLabel/styles.module.css index 21a5c9444c..b24070131e 100644 --- a/packages/ui/src/components/InputLabel/styles.module.css +++ b/packages/ui/src/components/InputLabel/styles.module.css @@ -1,6 +1,6 @@ .input-label { display: flex; - padding: 0 var(--go-ui-spacing-2xs); + padding: 0 var(--go-ui-spacing-sm); color: var(--go-ui-color-gray-70); gap: var(--go-ui-spacing-xs); diff --git a/packages/ui/src/components/Tabs/Tab/styles.module.css b/packages/ui/src/components/Tabs/Tab/styles.module.css index b776eb2055..3aa9ec6ef7 100644 --- a/packages/ui/src/components/Tabs/Tab/styles.module.css +++ b/packages/ui/src/components/Tabs/Tab/styles.module.css @@ -88,11 +88,13 @@ align-self: stretch; .step-circle { + position: absolute; + left: 40%; flex-shrink: 0; transition: var(--go-ui-duration-transition-slow) border-color ease-in-out; border: var(--border-width) solid transparent; border-radius: 50%; - background-color: var(--go-ui-color-background); + background-color: transparent; padding: var(--go-ui-spacing-2xs); .inner-circle { @@ -116,7 +118,7 @@ .progress-bar-start { flex-grow: 1; background-color: var(--go-ui-color-separator); - height: var(--go-ui-width-separator-thin);; + height: var(--go-ui-width-separator-small); } } From 864e757f394a1d3475bb9c3de04b98c21bd7416a Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Tue, 3 Sep 2024 13:48:57 +0545 Subject: [PATCH 02/25] ProgressBar - Remove left side border radius NavigationTab - Add underline for active tab --- app/src/components/NavigationTab/index.tsx | 1 + .../components/NavigationTab/styles.module.css | 16 +++++++++++++++- .../ui/src/components/Popup/styles.module.css | 7 +------ .../src/components/ProgressBar/styles.module.css | 4 ++-- 4 files changed, 19 insertions(+), 9 deletions(-) diff --git a/app/src/components/NavigationTab/index.tsx b/app/src/components/NavigationTab/index.tsx index e1c72e8e34..6bbdb42a5f 100644 --- a/app/src/components/NavigationTab/index.tsx +++ b/app/src/components/NavigationTab/index.tsx @@ -188,6 +188,7 @@ function NavigationTab(props: Props) { )}
{children} +
{variant === 'primary' && (
diff --git a/app/src/components/NavigationTab/styles.module.css b/app/src/components/NavigationTab/styles.module.css index 828c59680a..03105a12f3 100644 --- a/app/src/components/NavigationTab/styles.module.css +++ b/app/src/components/NavigationTab/styles.module.css @@ -140,9 +140,19 @@ font-size: var(--go-ui-font-size-lg); .children-wrapper { + display:flex; + flex-direction: column; + gap: var(--go-ui-spacing-sm); border-bottom-color: var(--border-color); background-color: var(--go-ui-color-background); - padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg); + padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg) var(--go-ui-spacing-xs); + + } + + .active-children-border { + background-color: transparent; + width: 100%; + height: var(--go-ui-width-separator-small); } &.active { @@ -152,6 +162,10 @@ border-color: var(--border-color); border-bottom-color: transparent; background-color: var(--go-ui-color-white); + + .active-children-border { + background-color: var(--go-ui-color-primary-red); + } } } diff --git a/packages/ui/src/components/Popup/styles.module.css b/packages/ui/src/components/Popup/styles.module.css index 5730905097..a41f74b264 100644 --- a/packages/ui/src/components/Popup/styles.module.css +++ b/packages/ui/src/components/Popup/styles.module.css @@ -1,15 +1,10 @@ .popup { position: fixed; border-radius: var(--go-ui-spacing-xs); - box-shadow: var(--go-ui-box-shadow-2xl); + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08); background-color: var(--go-ui-color-white); max-height: 40vh; overflow: auto; - - &.top-orientation { - /* FIXME: add variable */ - box-shadow: 0 -8pt 20pt -5pt rgb(0 0 0 / 0.5); - } } .pointer { diff --git a/packages/ui/src/components/ProgressBar/styles.module.css b/packages/ui/src/components/ProgressBar/styles.module.css index 08d33735de..d6bf0c847a 100644 --- a/packages/ui/src/components/ProgressBar/styles.module.css +++ b/packages/ui/src/components/ProgressBar/styles.module.css @@ -11,13 +11,13 @@ .total { display: flex; flex-shrink: 0; - border-radius: var(--go-ui-border-radius-md); + border-radius: 0 var(--go-ui-border-radius-md) var(--go-ui-border-radius-md) 0; background-color: var(--go-ui-color-separator); height: 0.5rem; .progress { transition: var(--go-ui-duration-transition-medium) width ease-in-out; - border-radius: var(--go-ui-border-radius-md); + border-radius: 0 var(--go-ui-border-radius-md) var(--go-ui-border-radius-md) 0; background-color: currentColor; } } From 49b6165200dd59f68d3605a6e2e29d29f8e3df38 Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Mon, 9 Sep 2024 13:49:45 +0545 Subject: [PATCH 03/25] Modal - font weight fix - title sperated - cancle button design match icon - icon fix - color changes BarChart - border radius fix --- packages/ui/src/components/Alert/index.tsx | 4 ++-- packages/ui/src/components/Alert/styles.module.css | 2 +- packages/ui/src/components/BarChart/styles.module.css | 4 ++-- packages/ui/src/components/Button/styles.module.css | 2 +- packages/ui/src/components/ConfirmButton/index.tsx | 10 +++++++++- .../ui/src/components/ConfirmButton/styles.module.css | 6 ++++++ packages/ui/src/components/Container/index.tsx | 3 +++ packages/ui/src/components/Header/index.tsx | 5 +++++ packages/ui/src/components/Header/styles.module.css | 4 ++++ packages/ui/src/components/Heading/index.tsx | 3 +++ packages/ui/src/components/Heading/styles.module.css | 4 ++++ packages/ui/src/components/Modal/index.tsx | 1 + .../ui/src/components/ProgressBar/styles.module.css | 2 +- 13 files changed, 42 insertions(+), 8 deletions(-) create mode 100644 packages/ui/src/components/ConfirmButton/styles.module.css diff --git a/packages/ui/src/components/Alert/index.tsx b/packages/ui/src/components/Alert/index.tsx index 50fa120ace..e97f13dfb9 100644 --- a/packages/ui/src/components/Alert/index.tsx +++ b/packages/ui/src/components/Alert/index.tsx @@ -1,8 +1,8 @@ import { useCallback } from 'react'; import { + AlertLineIcon, CheckboxCircleLineIcon, CloseLineIcon, - ErrorWarningLineIcon, InformationLineIcon, QuestionLineIcon, } from '@ifrc-go/icons'; @@ -40,7 +40,7 @@ const icon: { [key in AlertType]: React.ReactNode; } = { success: , - danger: , + danger: , info: , warning: , }; diff --git a/packages/ui/src/components/Alert/styles.module.css b/packages/ui/src/components/Alert/styles.module.css index 19d3921549..2f8ab3e86b 100644 --- a/packages/ui/src/components/Alert/styles.module.css +++ b/packages/ui/src/components/Alert/styles.module.css @@ -14,7 +14,7 @@ } &.info { - background-color: var(--go-ui-color-gray-80); + background-color: var(--go-ui-color-gray-50); } &.success { diff --git a/packages/ui/src/components/BarChart/styles.module.css b/packages/ui/src/components/BarChart/styles.module.css index f2359de31c..1998da8cd8 100644 --- a/packages/ui/src/components/BarChart/styles.module.css +++ b/packages/ui/src/components/BarChart/styles.module.css @@ -20,13 +20,13 @@ } .bar-track { - border-radius: 0.3rem; + border-radius: 0 var(--go-ui-border-radius-md) var(--go-ui-border-radius-md) 0; background-color: var(--go-ui-color-gray-30); width: 60%; height: 0.6rem; .bar { - border-radius: 0.3rem; + border-radius: 0 var(--go-ui-border-radius-md) var(--go-ui-border-radius-md) 0; background-color: var(--go-ui-color-primary-red); height: 100%; } diff --git a/packages/ui/src/components/Button/styles.module.css b/packages/ui/src/components/Button/styles.module.css index 4677d4eac0..63fb9b1397 100644 --- a/packages/ui/src/components/Button/styles.module.css +++ b/packages/ui/src/components/Button/styles.module.css @@ -64,7 +64,7 @@ } &.default-spacing { - --padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-md); + --padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-lg); } &.comfortable-spacing { diff --git a/packages/ui/src/components/ConfirmButton/index.tsx b/packages/ui/src/components/ConfirmButton/index.tsx index 1028da4510..d4c352f214 100644 --- a/packages/ui/src/components/ConfirmButton/index.tsx +++ b/packages/ui/src/components/ConfirmButton/index.tsx @@ -2,18 +2,22 @@ import { useCallback, useState, } from 'react'; +import { _cs } from '@togglecorp/fujs'; import Button, { Props as ButtonProps } from '#components/Button'; import Modal from '#components/Modal'; import useTranslation from '#hooks/useTranslation'; import i18n from './i18n.json'; +import styles from './styles.module.css'; export interface Props extends ButtonProps { confirmMessage?: React.ReactNode; confirmHeading?: React.ReactNode; onClick?: (name: NAME, e: React.MouseEvent) => void; onConfirm: (name: NAME) => void; + disabled?: boolean; + className?: string; } function ConfirmButton(props: Props) { @@ -25,6 +29,8 @@ function ConfirmButton(props: Props) { name, onConfirm, onClick, + disabled, + className, ...buttonProps } = props; @@ -53,8 +59,10 @@ function ConfirmButton(props: Props) { diff --git a/packages/ui/src/components/ConfirmButton/styles.module.css b/packages/ui/src/components/ConfirmButton/styles.module.css new file mode 100644 index 0000000000..7a6a9e13b1 --- /dev/null +++ b/packages/ui/src/components/ConfirmButton/styles.module.css @@ -0,0 +1,6 @@ +.disabled { + border-color: var(--go-ui-color-gray-40); + background-color: var(--go-ui-color-gray-40); + color: var(--go-ui-color-black); +} + diff --git a/packages/ui/src/components/Container/index.tsx b/packages/ui/src/components/Container/index.tsx index ad7db9c199..1820816f8d 100644 --- a/packages/ui/src/components/Container/index.tsx +++ b/packages/ui/src/components/Container/index.tsx @@ -30,6 +30,7 @@ export interface Props { className?: string; contentViewType?: 'grid' | 'vertical' | 'default'; ellipsizeHeading?: boolean; + modalHeading?: boolean; filters?: React.ReactNode; filterActions?: React.ReactNode; footerActions?: React.ReactNode; @@ -85,6 +86,7 @@ function Container(props: Props) { containerRef, contentViewType = 'default', ellipsizeHeading, + modalHeading, filters, filterActions, footerActions, @@ -207,6 +209,7 @@ function Container(props: Props) { elementRef={headerElementRef} actionsContainerClassName={actionsContainerClassName} ellipsizeHeading={ellipsizeHeading} + modalHeading={modalHeading} heading={heading} headingLevel={headingLevel} icons={icons} diff --git a/packages/ui/src/components/Header/index.tsx b/packages/ui/src/components/Header/index.tsx index c4b90f2d4e..b411deb35a 100644 --- a/packages/ui/src/components/Header/index.tsx +++ b/packages/ui/src/components/Header/index.tsx @@ -15,6 +15,7 @@ export interface Props { className?: string; elementRef?: React.Ref; ellipsizeHeading?: boolean; + modalHeading?: boolean; actions?: React.ReactNode; actionsContainerClassName?: string; @@ -47,6 +48,7 @@ function Header(props: Props) { className, elementRef, ellipsizeHeading, + modalHeading, heading, headingClassName, headingLevel, @@ -72,6 +74,7 @@ function Header(props: Props) { level={headingLevel} className={headingClassName} ellipsize={ellipsizeHeading} + modalHeading={modalHeading} > {heading} @@ -80,10 +83,12 @@ function Header(props: Props) { {headingDescription}
)} + {modalHeading &&
} ); }, [ + modalHeading, heading, ellipsizeHeading, headingDescription, diff --git a/packages/ui/src/components/Header/styles.module.css b/packages/ui/src/components/Header/styles.module.css index a8b25dca26..b62fc5581a 100644 --- a/packages/ui/src/components/Header/styles.module.css +++ b/packages/ui/src/components/Header/styles.module.css @@ -1,4 +1,8 @@ .header { display: flex; flex-direction: column; + + .border { + border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); + } } diff --git a/packages/ui/src/components/Heading/index.tsx b/packages/ui/src/components/Heading/index.tsx index a5cadc20fc..61560921eb 100644 --- a/packages/ui/src/components/Heading/index.tsx +++ b/packages/ui/src/components/Heading/index.tsx @@ -25,6 +25,7 @@ export interface Props { level?: HeadingLevel; children: ReactNode; ellipsize?: boolean; + modalHeading?: boolean; } function Heading(props: Props) { @@ -33,6 +34,7 @@ function Heading(props: Props) { level = 3, children, ellipsize, + modalHeading, } = props; const HeadingTag = `h${level}` as ElementType; @@ -47,6 +49,7 @@ function Heading(props: Props) { return ( Date: Tue, 10 Sep 2024 11:51:52 +0545 Subject: [PATCH 04/25] - Breadcrumbs icon and weight changes - Button min-width added - checkbox and radio icon color changes --- packages/ui/src/components/Breadcrumbs/index.tsx | 4 ++-- packages/ui/src/components/Breadcrumbs/styles.module.css | 6 ++++-- packages/ui/src/components/Button/styles.module.css | 1 + packages/ui/src/components/Checkbox/styles.module.css | 4 ++++ .../ui/src/components/RadioInput/Radio/styles.module.css | 2 ++ 5 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/Breadcrumbs/index.tsx b/packages/ui/src/components/Breadcrumbs/index.tsx index cbba6d48bd..59524bea72 100644 --- a/packages/ui/src/components/Breadcrumbs/index.tsx +++ b/packages/ui/src/components/Breadcrumbs/index.tsx @@ -1,5 +1,5 @@ import { Children } from 'react'; -import { ChevronRightLineIcon } from '@ifrc-go/icons'; +import { ArrowDropRightLineIcon } from '@ifrc-go/icons'; import { _cs } from '@togglecorp/fujs'; import styles from './styles.module.css'; @@ -15,7 +15,7 @@ function Breadcrumbs(props: BreadcrumbsProps) { const { className, children, - separator = , + separator = , itemClassName, } = props; diff --git a/packages/ui/src/components/Breadcrumbs/styles.module.css b/packages/ui/src/components/Breadcrumbs/styles.module.css index d4cd002ba9..b410806ac7 100644 --- a/packages/ui/src/components/Breadcrumbs/styles.module.css +++ b/packages/ui/src/components/Breadcrumbs/styles.module.css @@ -8,6 +8,7 @@ &:not(:last-child) { color: var(--go-ui-color-gray-70); + font-weight: var(--go-ui-font-weight-light); } &:last-child { @@ -18,7 +19,8 @@ .separator { display: flex; justify-content: center; - color: var(--go-ui-color-gray-70); - font-size: var(--go-ui-font-size-xl); + color: var(--go-ui-color-gray-90); + font-size: var(--go-ui-font-size-3xl); + font-weight: var(--go-ui-font-weight-medium); } } diff --git a/packages/ui/src/components/Button/styles.module.css b/packages/ui/src/components/Button/styles.module.css index 63fb9b1397..44c6c96cbc 100644 --- a/packages/ui/src/components/Button/styles.module.css +++ b/packages/ui/src/components/Button/styles.module.css @@ -17,6 +17,7 @@ cursor: var(--cursor); padding: var(--padding); width: fit-content; + min-width: calc(var(--base-spacing) * 6.5); max-width: 100%; overflow: hidden; text-transform: var(--text-transform); diff --git a/packages/ui/src/components/Checkbox/styles.module.css b/packages/ui/src/components/Checkbox/styles.module.css index 2b84edf416..f8ad9db940 100644 --- a/packages/ui/src/components/Checkbox/styles.module.css +++ b/packages/ui/src/components/Checkbox/styles.module.css @@ -22,6 +22,10 @@ outline: var(--go-ui-width-separator-thin) dashed var(--go-ui-color-gray-40); } } + + .checkmark { + color: var(--go-ui-color-gray-40); + } } .content { diff --git a/packages/ui/src/components/RadioInput/Radio/styles.module.css b/packages/ui/src/components/RadioInput/Radio/styles.module.css index 8d5b3770fd..d35a629922 100644 --- a/packages/ui/src/components/RadioInput/Radio/styles.module.css +++ b/packages/ui/src/components/RadioInput/Radio/styles.module.css @@ -4,6 +4,7 @@ .icon { transition: var(--go-ui-duration-transition-medium) color ease-in-out; + color: var(--go-ui-color-gray-40); font-size: var(--go-ui-height-icon-multiplier); } @@ -11,6 +12,7 @@ flex-direction: column; gap: 0; line-height: var(--go-ui-line-height-sm); + color: var(--go-ui-color-black); } .description { From a0555d233241cbf52f3569a74a9de69c941e7f82 Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Tue, 10 Sep 2024 12:27:48 +0545 Subject: [PATCH 05/25] Add stroke in pie chart --- packages/ui/src/components/PieChart/styles.module.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/ui/src/components/PieChart/styles.module.css b/packages/ui/src/components/PieChart/styles.module.css index 22e7a91b16..64b7f28fa3 100644 --- a/packages/ui/src/components/PieChart/styles.module.css +++ b/packages/ui/src/components/PieChart/styles.module.css @@ -4,11 +4,16 @@ flex-wrap: wrap; gap: var(--go-ui-spacing-md); + .path { + stroke: var(--go-ui-color-white); + } + .legend { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; + gap: var(--go-ui-border-radius-lg); .legend-item { font-size: var(--go-ui-font-size-xs); From a57a85638dd5455961eb91b6352d8b4940f7f5fe Mon Sep 17 00:00:00 2001 From: roshni73 Date: Thu, 12 Sep 2024 11:21:23 +0545 Subject: [PATCH 06/25] Add Missing stories and audit storybook --- .../src/stories/Alert.stories.tsx | 4 ++ .../src/stories/Button.stories.ts | 48 ++++++++++++++++++- .../src/stories/IconButton.stories.tsx | 17 +++++++ .../src/stories/LegendItem.stories.tsx | 8 ++++ .../src/stories/RawFileInput.stories.tsx | 14 ++++++ .../src/stories/Tooltip.stories.tsx | 8 ++++ packages/ui/src/components/Button/index.tsx | 4 +- .../ui/src/components/LegendItem/index.tsx | 7 +++ packages/ui/src/components/Tooltip/index.tsx | 1 + 9 files changed, 109 insertions(+), 2 deletions(-) diff --git a/packages/go-ui-storybook/src/stories/Alert.stories.tsx b/packages/go-ui-storybook/src/stories/Alert.stories.tsx index c5de4a7fa3..ce59fd44de 100644 --- a/packages/go-ui-storybook/src/stories/Alert.stories.tsx +++ b/packages/go-ui-storybook/src/stories/Alert.stories.tsx @@ -32,6 +32,7 @@ export const Info: Story = { name: 'info', title: 'Information', type: 'info', + nonDismissable: true, description: 'This alert provides informative details to the user.', }, parameters: { @@ -48,6 +49,7 @@ export const Success: Story = { name: 'success', title: 'Success', type: 'success', + nonDismissable: true, description: 'This alert indicates a successful operation or task.', }, parameters: { @@ -64,6 +66,7 @@ export const Warning : Story = { name: 'warning', title: 'Warning', type: 'warning', + nonDismissable: true, description: 'This alert warns the user about potential issues or risks.', }, }; @@ -73,6 +76,7 @@ export const Danger : Story = { name: 'danger', title: 'Danger', type: 'danger', + nonDismissable: true, description: 'This alert indicates a dangerous or potentially harmful situation.', }, parameters: { diff --git a/packages/go-ui-storybook/src/stories/Button.stories.ts b/packages/go-ui-storybook/src/stories/Button.stories.ts index 6cfac7a631..e67245d6f3 100644 --- a/packages/go-ui-storybook/src/stories/Button.stories.ts +++ b/packages/go-ui-storybook/src/stories/Button.stories.ts @@ -21,7 +21,6 @@ const meta = { onClick: fn(), }, tags: ['autodocs'], - argTypes: {}, } satisfies Meta; export default meta; @@ -42,6 +41,22 @@ export const Primary: Story = { }, }; +export const PrimaryButtonWithIcon: Story = { + args: { + name: 'button', + variant: 'primary', + children: 'Primary Button', + // icons: , + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189962&mode=design&t=H77btqXhNDop8ZRl-4', + allowFullscreen: false, + }, + }, +}; + export const Secondary: Story = { args: { name: 'button', @@ -57,6 +72,22 @@ export const Secondary: Story = { }, }; +export const SecondaryButtonWithIcon: Story = { + args: { + name: 'button', + variant: 'primary', + children: 'Primary Button', + // icons: , + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189950&mode=design&t=H77btqXhNDop8ZRl-4', + allowFullscreen: false, + }, + }, +}; + export const Tertiary: Story = { args: { name: 'button', @@ -72,6 +103,21 @@ export const Tertiary: Story = { }, }; +export const TertiaryButtonWithIcon: Story = { + args: { + name: 'button', + variant: 'primary', + children: 'Primary Button', + // icons: , + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189955&mode=design&t=H77btqXhNDop8ZRl-4', + allowFullscreen: false, + }, + }, +}; export const TertiaryOnDark: Story = { args: { name: 'button', diff --git a/packages/go-ui-storybook/src/stories/IconButton.stories.tsx b/packages/go-ui-storybook/src/stories/IconButton.stories.tsx index 3fc891131b..8fa895d0b0 100644 --- a/packages/go-ui-storybook/src/stories/IconButton.stories.tsx +++ b/packages/go-ui-storybook/src/stories/IconButton.stories.tsx @@ -36,6 +36,23 @@ export const Default: Story = { variant: 'primary', }, }; + +export const Secondary: Story = { + args: { + title: 'Add Item', + children: , + variant: 'secondary', + }, +}; + +export const Tertiary: Story = { + args: { + title: 'Add Item', + children: , + variant: 'tertiary', + }, +}; + export const Disabled: Story = { args: { title: 'Download', diff --git a/packages/go-ui-storybook/src/stories/LegendItem.stories.tsx b/packages/go-ui-storybook/src/stories/LegendItem.stories.tsx index 6842b3adf1..4c8ac6887b 100644 --- a/packages/go-ui-storybook/src/stories/LegendItem.stories.tsx +++ b/packages/go-ui-storybook/src/stories/LegendItem.stories.tsx @@ -1,3 +1,4 @@ +import { AlertInformationLineIcon } from '@ifrc-go/icons'; import { LegendItemProps } from '@ifrc-go/ui'; import type { Meta, @@ -36,3 +37,10 @@ export const WithDifferentColor: Story = { color: 'orange', }, }; +export const WithIcon: Story = { + args: { + label: 'Emergency appeal', + color: 'green', + icons: , + }, +}; diff --git a/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx b/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx index a2e12ef01c..b47714ee58 100644 --- a/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx +++ b/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx @@ -1,3 +1,4 @@ +import { UploadTwoLineIcon } from '@ifrc-go/icons'; import { RawFileInputProps } from '@ifrc-go/ui'; import type { Meta, @@ -50,6 +51,7 @@ export const WithAccept: Story = { name: 'RawFileInput', accept: 'image/png,image/jpeg', children: 'Upload Image', + variant: 'secondary', multiple: false, onChange: fn(), }, @@ -59,6 +61,7 @@ export const Disabled: Story = { args: { name: 'RawFileInput', children: 'Export', + variant: 'secondary', multiple: false, onChange: fn(), disabled: true, @@ -69,8 +72,19 @@ export const ReadOnly: Story = { args: { name: 'RawFileInput', children: 'Export', + variant: 'secondary', readOnly: true, multiple: false, onChange: fn(), }, }; +export const WithIcon: Story = { + args: { + name: 'RawFileInput', + children: 'Export', + variant: 'secondary', + icons: , + multiple: false, + onChange: fn(), + }, +}; diff --git a/packages/go-ui-storybook/src/stories/Tooltip.stories.tsx b/packages/go-ui-storybook/src/stories/Tooltip.stories.tsx index 304f59ac01..910c931679 100644 --- a/packages/go-ui-storybook/src/stories/Tooltip.stories.tsx +++ b/packages/go-ui-storybook/src/stories/Tooltip.stories.tsx @@ -43,3 +43,11 @@ export const Default: Story = { preferredWidth: 20, }, }; + +export const WithoutTitle: Story = { + render: Template, + args: { + description: 'Click here to access our help documentation and support resources.', + preferredWidth: 20, + }, +}; diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx index a4344f8c4e..432a7b352f 100644 --- a/packages/ui/src/components/Button/index.tsx +++ b/packages/ui/src/components/Button/index.tsx @@ -14,7 +14,7 @@ import useBasicLayout from '#hooks/useBasicLayout'; import styles from './styles.module.css'; // NOTE: Adding a 'tertiary-on-dark' to use 'tertiary' button on darker backgrounds -export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tertiary-on-dark' | 'dropdown-item'; +export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tertiary-on-dark' | 'dropdown-item' | 'process' | 'grey-tertiary'; const buttonVariantToClassNameMap: Record = { primary: styles.primary, @@ -22,6 +22,8 @@ const buttonVariantToClassNameMap: Record = { tertiary: styles.tertiary, 'tertiary-on-dark': styles.tertiaryOnDark, 'dropdown-item': styles.dropdownItem, + process: styles.process, + 'grey-tertiary': styles.greyTertiary, }; const spacingTypeToClassNameMap: Record = { diff --git a/packages/ui/src/components/LegendItem/index.tsx b/packages/ui/src/components/LegendItem/index.tsx index e08aef60a1..5aff3a7daa 100644 --- a/packages/ui/src/components/LegendItem/index.tsx +++ b/packages/ui/src/components/LegendItem/index.tsx @@ -6,6 +6,7 @@ export interface Props { className?: string; colorClassName?: string; label?: React.ReactNode; + icons?:React.ReactNode iconSrc?: string; color?: string; iconClassName?: string; @@ -18,6 +19,7 @@ function LegendItem(props: Props) { iconClassName, color, label, + icons, iconSrc, } = props; @@ -42,6 +44,11 @@ function LegendItem(props: Props) { className={_cs(styles.color, colorClassName)} /> )} + {icons && ( +
+ {icons} +
+ )}
{label}
diff --git a/packages/ui/src/components/Tooltip/index.tsx b/packages/ui/src/components/Tooltip/index.tsx index f7912e356b..44efecdeba 100644 --- a/packages/ui/src/components/Tooltip/index.tsx +++ b/packages/ui/src/components/Tooltip/index.tsx @@ -89,6 +89,7 @@ function Tooltip(props: Props) { {description} From 63a82a4db7f0c4a018751b8a8fd1e568dd67b4d7 Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Mon, 16 Sep 2024 16:07:13 +0545 Subject: [PATCH 07/25] Update secondary tab new design --- .../NavigationTab/styles.module.css | 28 ++++++++++++------- .../NavigationTabList/styles.module.css | 4 +-- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/app/src/components/NavigationTab/styles.module.css b/app/src/components/NavigationTab/styles.module.css index 03105a12f3..8e896ff13f 100644 --- a/app/src/components/NavigationTab/styles.module.css +++ b/app/src/components/NavigationTab/styles.module.css @@ -135,6 +135,24 @@ } } + + &.secondary { + border-right: var(--border-width) solid var(--border-color); + border-top-color: transparent; + + .children-wrapper { + padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg); + } + + &.active { + color: var(--go-ui-color-primary-red); + } + + &:last-child { + border-color: transparent; + } + } + &.primary { position: relative; font-size: var(--go-ui-font-size-lg); @@ -176,16 +194,6 @@ } } - &.secondary { - border-radius: var(--go-ui-border-radius-full); - padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-xl); - - &.active { - background-color: var(--go-ui-color-primary-red); - color: var(--go-ui-color-white); - } - } - &.tertiary { &:not(.disabled) { &:hover { diff --git a/packages/ui/src/components/NavigationTabList/styles.module.css b/packages/ui/src/components/NavigationTabList/styles.module.css index 8d62123a7a..c1c8fe4341 100644 --- a/packages/ui/src/components/NavigationTabList/styles.module.css +++ b/packages/ui/src/components/NavigationTabList/styles.module.css @@ -23,8 +23,8 @@ .content { display: flex; - border-radius: var(--go-ui-border-radius-full); - background-color: var(--go-ui-color-element-background); + padding: 0 0 2px 0; + border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); } .start-dummy-content, From 8ac1ebdb6ed6cdc61f83f4f2082fd801f8f75d3b Mon Sep 17 00:00:00 2001 From: roshni73 Date: Mon, 16 Sep 2024 17:26:27 +0545 Subject: [PATCH 08/25] change the styling of ui component stories --- .../src/stories/Alert.stories.tsx | 5 ----- .../src/stories/Button.stories.ts | 18 ++++++++++++++++++ .../src/stories/List.stories.tsx | 11 ++++++++++- .../src/stories/Table.stories.tsx | 7 ++++++- packages/go-ui-storybook/src/stories/index.css | 8 ++++++++ .../ui/src/components/Alert/styles.module.css | 2 +- .../ui/src/components/DefaultMessage/index.tsx | 3 ++- .../DefaultMessage/styles.module.css | 4 ++++ .../InputContainer/styles.module.css | 3 ++- .../components/InputLabel/styles.module.css | 1 - .../ui/src/components/Modal/styles.module.css | 2 +- .../ui/src/components/Popup/styles.module.css | 2 +- .../components/SegmentInput/styles.module.css | 4 ++-- .../Switch/SwitchIcon/styles.module.css | 2 +- .../Table/TableBodyContent/styles.module.css | 2 +- 15 files changed, 57 insertions(+), 17 deletions(-) diff --git a/packages/go-ui-storybook/src/stories/Alert.stories.tsx b/packages/go-ui-storybook/src/stories/Alert.stories.tsx index ce59fd44de..c1001ec501 100644 --- a/packages/go-ui-storybook/src/stories/Alert.stories.tsx +++ b/packages/go-ui-storybook/src/stories/Alert.stories.tsx @@ -30,7 +30,6 @@ type Story = StoryObj; export const Info: Story = { args: { name: 'info', - title: 'Information', type: 'info', nonDismissable: true, description: 'This alert provides informative details to the user.', @@ -47,7 +46,6 @@ export const Info: Story = { export const Success: Story = { args: { name: 'success', - title: 'Success', type: 'success', nonDismissable: true, description: 'This alert indicates a successful operation or task.', @@ -64,7 +62,6 @@ export const Success: Story = { export const Warning : Story = { args: { name: 'warning', - title: 'Warning', type: 'warning', nonDismissable: true, description: 'This alert warns the user about potential issues or risks.', @@ -74,7 +71,6 @@ export const Warning : Story = { export const Danger : Story = { args: { name: 'danger', - title: 'Danger', type: 'danger', nonDismissable: true, description: 'This alert indicates a dangerous or potentially harmful situation.', @@ -91,7 +87,6 @@ export const Danger : Story = { export const NonDismissable: Story = { args: { name: 'danger', - title: 'Danger', type: 'danger', description: 'This alert indicates a dangerous or potentially harmful situation.', nonDismissable: true, diff --git a/packages/go-ui-storybook/src/stories/Button.stories.ts b/packages/go-ui-storybook/src/stories/Button.stories.ts index e67245d6f3..856522b10a 100644 --- a/packages/go-ui-storybook/src/stories/Button.stories.ts +++ b/packages/go-ui-storybook/src/stories/Button.stories.ts @@ -138,3 +138,21 @@ export const DropdownItem: Story = { children: 'Dropdown Item', }, }; + +export const ProcessButtonWithIcon: Story = { + args: { + name: 'button', + variant: 'process', + children: 'Process Button', + // icons: + }, +}; + +export const GreyTertiaryButtonWithIcon: Story = { + args: { + name: 'button', + variant: 'grey-tertiary', + children: 'Grey-Tertiary Button', + // icons: + }, +}; diff --git a/packages/go-ui-storybook/src/stories/List.stories.tsx b/packages/go-ui-storybook/src/stories/List.stories.tsx index 03582e705e..9bd2fc54d0 100644 --- a/packages/go-ui-storybook/src/stories/List.stories.tsx +++ b/packages/go-ui-storybook/src/stories/List.stories.tsx @@ -89,6 +89,15 @@ export const Filtered: Story = { renderer: Option, rendererParams, filtered: true, - filteredEmptyMessage: 'Data is not available for selected filters', + }, +}; + +export const Empty: Story = { + args: { + className: 'list-story', + keySelector, + renderer: Option, + rendererParams, + errorMessage: 'Data is not available for selected filters', }, }; diff --git a/packages/go-ui-storybook/src/stories/Table.stories.tsx b/packages/go-ui-storybook/src/stories/Table.stories.tsx index 5b27d21f86..fb4a4ef3c5 100644 --- a/packages/go-ui-storybook/src/stories/Table.stories.tsx +++ b/packages/go-ui-storybook/src/stories/Table.stories.tsx @@ -191,7 +191,12 @@ const columns = [ 'link', 'Link', ({ link, title }) => ( - {title} + + {title} + ), (_, item) => ({ link: item.link, title: item.name }), ), diff --git a/packages/go-ui-storybook/src/stories/index.css b/packages/go-ui-storybook/src/stories/index.css index 6a876bbf65..8e077a05f1 100644 --- a/packages/go-ui-storybook/src/stories/index.css +++ b/packages/go-ui-storybook/src/stories/index.css @@ -170,3 +170,11 @@ padding-top: var(--go-ui-spacing-md); padding-bottom: var(--go-ui-spacing-md); } + +.table-link{ + color: var(--go-ui-color-text); +} +.table-link:hover { + color: var(--go-ui-color-primary-red); +} + diff --git a/packages/ui/src/components/Alert/styles.module.css b/packages/ui/src/components/Alert/styles.module.css index 2f8ab3e86b..5f7deb18c6 100644 --- a/packages/ui/src/components/Alert/styles.module.css +++ b/packages/ui/src/components/Alert/styles.module.css @@ -1,7 +1,7 @@ .alert { display: flex; border-radius: var(--go-ui-border-radius-md); - box-shadow: var(--go-ui-box-shadow-2xl); + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); width: calc(14rem + 16vw); color: var(--go-ui-color-white); diff --git a/packages/ui/src/components/DefaultMessage/index.tsx b/packages/ui/src/components/DefaultMessage/index.tsx index 76b07e6835..2334b72fd6 100644 --- a/packages/ui/src/components/DefaultMessage/index.tsx +++ b/packages/ui/src/components/DefaultMessage/index.tsx @@ -83,9 +83,10 @@ function DefaultMessage(props: Props) { className={_cs( styles.defaultMessage, pending && overlayPending && styles.overlay, + empty && styles.emptyMessage, className, )} - icon={} + icon={(!empty || filtered || errored) && } compact={compact} title={messageTitle} pending={pending} diff --git a/packages/ui/src/components/DefaultMessage/styles.module.css b/packages/ui/src/components/DefaultMessage/styles.module.css index 4030c4e012..de9b60c098 100644 --- a/packages/ui/src/components/DefaultMessage/styles.module.css +++ b/packages/ui/src/components/DefaultMessage/styles.module.css @@ -6,4 +6,8 @@ width: 100%; height: 100%; } + &.empty-message { + height: 200px; + padding-top: 40px; + } } diff --git a/packages/ui/src/components/InputContainer/styles.module.css b/packages/ui/src/components/InputContainer/styles.module.css index 8d2f9a2fe3..4a62289fe2 100644 --- a/packages/ui/src/components/InputContainer/styles.module.css +++ b/packages/ui/src/components/InputContainer/styles.module.css @@ -8,9 +8,10 @@ border-radius: var(--go-ui-border-radius-md); background-color: var(--go-ui-color-element-background); padding: 0 var(--go-ui-spacing-sm); - + .input { padding: var(--go-ui-spacing-xs) 0; + height: 32px; } } diff --git a/packages/ui/src/components/InputLabel/styles.module.css b/packages/ui/src/components/InputLabel/styles.module.css index b24070131e..a01ba0616e 100644 --- a/packages/ui/src/components/InputLabel/styles.module.css +++ b/packages/ui/src/components/InputLabel/styles.module.css @@ -1,6 +1,5 @@ .input-label { display: flex; - padding: 0 var(--go-ui-spacing-sm); color: var(--go-ui-color-gray-70); gap: var(--go-ui-spacing-xs); diff --git a/packages/ui/src/components/Modal/styles.module.css b/packages/ui/src/components/Modal/styles.module.css index c1acfacb16..83bd5b45dc 100644 --- a/packages/ui/src/components/Modal/styles.module.css +++ b/packages/ui/src/components/Modal/styles.module.css @@ -44,7 +44,7 @@ border-radius: var(--go-ui-border-radius-lg); box-shadow: var(--go-ui-box-shadow-2xl); background-color: var(--go-ui-color-white); - width: 100%; + width: 420px; min-width: var(--go-ui-width-min-modal); height: 100%; min-height: var(--go-ui-height-min-modal); diff --git a/packages/ui/src/components/Popup/styles.module.css b/packages/ui/src/components/Popup/styles.module.css index a41f74b264..40d45e967b 100644 --- a/packages/ui/src/components/Popup/styles.module.css +++ b/packages/ui/src/components/Popup/styles.module.css @@ -1,6 +1,6 @@ .popup { position: fixed; - border-radius: var(--go-ui-spacing-xs); + border-radius: 4px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08); background-color: var(--go-ui-color-white); max-height: 40vh; diff --git a/packages/ui/src/components/SegmentInput/styles.module.css b/packages/ui/src/components/SegmentInput/styles.module.css index f106817bdb..074b53b712 100644 --- a/packages/ui/src/components/SegmentInput/styles.module.css +++ b/packages/ui/src/components/SegmentInput/styles.module.css @@ -3,7 +3,7 @@ .segment-list { flex-wrap: nowrap; - border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); + border:#F7F7F7 solid var(--go-ui-color-separator); border-radius: var(--go-ui-border-radius-full); background-color: var(--go-ui-color-background); padding: 0; @@ -13,7 +13,7 @@ .segment { border-radius: var(--go-ui-border-radius-full); - padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-md); + padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-md); &.active { background-color: var(--go-ui-color-primary-red); diff --git a/packages/ui/src/components/Switch/SwitchIcon/styles.module.css b/packages/ui/src/components/Switch/SwitchIcon/styles.module.css index 2b93ba2ad3..5fe030ce28 100644 --- a/packages/ui/src/components/Switch/SwitchIcon/styles.module.css +++ b/packages/ui/src/components/Switch/SwitchIcon/styles.module.css @@ -10,7 +10,7 @@ align-items: center; transition: var(--go-ui-duration-transition-medium) background-color ease-in-out; border: var(--border-width) solid var(--border-color); - border-radius: .5em; + border-radius: 1em; background-color: var(--background-color); padding: var(--gap); width: calc(1em + var(--knob-diameter)); diff --git a/packages/ui/src/components/Table/TableBodyContent/styles.module.css b/packages/ui/src/components/Table/TableBodyContent/styles.module.css index 6191ae0c92..320b66a7db 100644 --- a/packages/ui/src/components/Table/TableBodyContent/styles.module.css +++ b/packages/ui/src/components/Table/TableBodyContent/styles.module.css @@ -1,6 +1,6 @@ .row { .cell { - padding: var(--go-ui-spacing-sm); + padding: 12px; overflow: hidden; word-break: break-word; } From 333dbf7be1f0f70952e6d312133dd589e05db327 Mon Sep 17 00:00:00 2001 From: roshni73 Date: Tue, 17 Sep 2024 14:00:42 +0545 Subject: [PATCH 09/25] Add Close Button for infopopup component --- .../src/stories/InfoPopup.stories.tsx | 3 +- .../go-ui-storybook/src/stories/InfoPopup.tsx | 2 +- .../src/components/Button/styles.module.css | 3 +- .../components/DropdownMenu/styles.module.css | 4 +++ .../src/components/Heading/styles.module.css | 2 +- .../ui/src/components/InfoPopup/index.tsx | 35 +++++++++++++++++-- .../components/InfoPopup/styles.module.css | 8 +++++ .../InputContainer/styles.module.css | 2 +- 8 files changed, 51 insertions(+), 8 deletions(-) diff --git a/packages/go-ui-storybook/src/stories/InfoPopup.stories.tsx b/packages/go-ui-storybook/src/stories/InfoPopup.stories.tsx index 939b01d3ee..75cc2fddfc 100644 --- a/packages/go-ui-storybook/src/stories/InfoPopup.stories.tsx +++ b/packages/go-ui-storybook/src/stories/InfoPopup.stories.tsx @@ -6,7 +6,8 @@ import type { import InfoPopup from './InfoPopup'; -type Story = StoryObj; +type InfoPoppupSpecificProps = InfoPopupProps; +type Story = StoryObj; const meta: Meta = { title: 'Components/InfoPopup', diff --git a/packages/go-ui-storybook/src/stories/InfoPopup.tsx b/packages/go-ui-storybook/src/stories/InfoPopup.tsx index 26adde83e4..d1d88a03ef 100644 --- a/packages/go-ui-storybook/src/stories/InfoPopup.tsx +++ b/packages/go-ui-storybook/src/stories/InfoPopup.tsx @@ -3,7 +3,7 @@ import { InfoPopupProps, } from '@ifrc-go/ui'; -function InfoPopup(props: InfoPopupProps) { +function InfoPopup (props: InfoPopupProps) { return ( // eslint-disable-line react/jsx-props-no-spreading ); diff --git a/packages/ui/src/components/Button/styles.module.css b/packages/ui/src/components/Button/styles.module.css index 44c6c96cbc..b67d97473d 100644 --- a/packages/ui/src/components/Button/styles.module.css +++ b/packages/ui/src/components/Button/styles.module.css @@ -11,6 +11,7 @@ display: inline-flex; position: relative; align-items: center; + text-align: center; border: var(--go-ui-width-separator-sm) solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-background); @@ -21,7 +22,7 @@ max-width: 100%; overflow: hidden; text-transform: var(--text-transform); - line-height: var(--go-ui-line-height-xs); + line-height: 21px; color: var(--color-text); font-family: inherit; font-size: var(--font-size); diff --git a/packages/ui/src/components/DropdownMenu/styles.module.css b/packages/ui/src/components/DropdownMenu/styles.module.css index 7da9428fb0..c66727d372 100644 --- a/packages/ui/src/components/DropdownMenu/styles.module.css +++ b/packages/ui/src/components/DropdownMenu/styles.module.css @@ -17,4 +17,8 @@ display: flex; flex-direction: column; padding: var(--go-ui-spacing-sm) 0; + + :hover { + background-color:var(--go-ui-color-gray) + } } diff --git a/packages/ui/src/components/Heading/styles.module.css b/packages/ui/src/components/Heading/styles.module.css index 528d453bdb..c7b3dc6abe 100644 --- a/packages/ui/src/components/Heading/styles.module.css +++ b/packages/ui/src/components/Heading/styles.module.css @@ -4,7 +4,7 @@ margin: 0; line-height: var(--line-height); font-size: var(--font-size); - font-weight: var(--go-ui-font-weight-semibold); + font-weight: 500; &.modal-font-weight { font-weight: var(--go-ui-font-weight-medium); diff --git a/packages/ui/src/components/InfoPopup/index.tsx b/packages/ui/src/components/InfoPopup/index.tsx index b0f1e69f0e..4ee236cb78 100644 --- a/packages/ui/src/components/InfoPopup/index.tsx +++ b/packages/ui/src/components/InfoPopup/index.tsx @@ -1,12 +1,18 @@ -import { InformationLineIcon } from '@ifrc-go/icons'; +import { useCallback } from 'react'; +import { + CloseLineIcon, + InformationLineIcon, +} from '@ifrc-go/icons'; import { _cs } from '@togglecorp/fujs'; +import Button from '#components/Button'; import Container from '#components/Container'; import DropdownMenu from '#components/DropdownMenu'; import styles from './styles.module.css'; -export interface Props { +export interface Props { + name: N; icon?: React.ReactNode; withoutIcon?: boolean; infoLabel?: React.ReactNode; @@ -15,20 +21,32 @@ export interface Props { descriptionClassName?: string; popupClassName?: string; className?: string; + onCloseButtonClick?: (name: string) => void; } -function InfoPopup(props: Props) { +function InfoPopup(props: Props) { const { + name, className, icon = , infoLabel, title, description, withoutIcon, + onCloseButtonClick, popupClassName, descriptionClassName, } = props; + const handleCloseButtonClick = useCallback( + () => { + if (onCloseButtonClick) { + onCloseButtonClick(name); + } + }, + [onCloseButtonClick, name], + ); + return ( + + + )} > {description} diff --git a/packages/ui/src/components/InfoPopup/styles.module.css b/packages/ui/src/components/InfoPopup/styles.module.css index e694ea3f1a..d7507e39d8 100644 --- a/packages/ui/src/components/InfoPopup/styles.module.css +++ b/packages/ui/src/components/InfoPopup/styles.module.css @@ -23,5 +23,13 @@ white-space: pre-wrap; gap: var(--go-ui-spacing-xs); font-size: var(--go-ui-font-size-sm); + + .heading { + font-weight: 500; + } + } + .close-icon { + font-size: var(--go-ui-font-size-2xl); } + } diff --git a/packages/ui/src/components/InputContainer/styles.module.css b/packages/ui/src/components/InputContainer/styles.module.css index 4a62289fe2..883369b129 100644 --- a/packages/ui/src/components/InputContainer/styles.module.css +++ b/packages/ui/src/components/InputContainer/styles.module.css @@ -10,7 +10,7 @@ padding: 0 var(--go-ui-spacing-sm); .input { - padding: var(--go-ui-spacing-xs) 0; + padding-left:12px; height: 32px; } } From b5288adf0b86e09b3c8d373fdbb4a2345f2fa8d1 Mon Sep 17 00:00:00 2001 From: roshni73 Date: Wed, 18 Sep 2024 17:01:59 +0545 Subject: [PATCH 10/25] Add gray tertiary button for button component --- .../src/stories/Button.stories.ts | 18 +++++++++--------- .../ui/src/components/Button/styles.module.css | 6 ++++++ .../components/DropdownMenu/styles.module.css | 3 ++- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/go-ui-storybook/src/stories/Button.stories.ts b/packages/go-ui-storybook/src/stories/Button.stories.ts index 856522b10a..887ec6dc67 100644 --- a/packages/go-ui-storybook/src/stories/Button.stories.ts +++ b/packages/go-ui-storybook/src/stories/Button.stories.ts @@ -106,8 +106,8 @@ export const Tertiary: Story = { export const TertiaryButtonWithIcon: Story = { args: { name: 'button', - variant: 'primary', - children: 'Primary Button', + variant: 'tertiary', + children: 'tertiary Button', // icons: , }, parameters: { @@ -139,20 +139,20 @@ export const DropdownItem: Story = { }, }; -export const ProcessButtonWithIcon: Story = { +export const GreyTertiaryButtonWithIcon: Story = { args: { name: 'button', - variant: 'process', - children: 'Process Button', - // icons: + variant: 'grey-tertiary', + children: 'Grey-Tertiary Button', + // icons: }, }; -export const GreyTertiaryButtonWithIcon: Story = { +export const ProcessButtonWithIcon: Story = { args: { name: 'button', - variant: 'grey-tertiary', - children: 'Grey-Tertiary Button', + variant: 'secondary', + children: 'Process Button', // icons: }, }; diff --git a/packages/ui/src/components/Button/styles.module.css b/packages/ui/src/components/Button/styles.module.css index b67d97473d..312e6f5537 100644 --- a/packages/ui/src/components/Button/styles.module.css +++ b/packages/ui/src/components/Button/styles.module.css @@ -155,6 +155,12 @@ } } + &.grey-tertiary { + --border-radius: unset; + --padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg); + background-color: var(--go-ui-color-background); + } + &.disabled { opacity: var(--go-ui-opacity-disabled-element); --cursor: not-allowed; diff --git a/packages/ui/src/components/DropdownMenu/styles.module.css b/packages/ui/src/components/DropdownMenu/styles.module.css index c66727d372..8adaa97941 100644 --- a/packages/ui/src/components/DropdownMenu/styles.module.css +++ b/packages/ui/src/components/DropdownMenu/styles.module.css @@ -1,5 +1,6 @@ .dropdown-menu { align-items: center; + height: 32px; .icons, .content, @@ -16,7 +17,7 @@ .dropdown-content { display: flex; flex-direction: column; - padding: var(--go-ui-spacing-sm) 0; + padding-left: 24px; :hover { background-color:var(--go-ui-color-gray) From e5f5757ed6d9edbf86eae58820783fad71b1a511 Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Thu, 19 Sep 2024 16:56:35 +0545 Subject: [PATCH 11/25] Update breadcrumb component --- app/src/views/Country/index.tsx | 80 ++++++++++----- app/src/views/Emergency/index.tsx | 67 ++++++++++--- app/src/views/FieldReportDetails/index.tsx | 70 +++++++++---- app/src/views/FlashUpdateDetails/index.tsx | 70 +++++++++---- .../ui/src/components/Breadcrumbs/index.tsx | 97 ++++++++++++------- .../components/Breadcrumbs/styles.module.css | 18 ++-- .../src/components/Button/styles.module.css | 3 +- .../src/components/PieChart/styles.module.css | 1 + 8 files changed, 288 insertions(+), 118 deletions(-) diff --git a/app/src/views/Country/index.tsx b/app/src/views/Country/index.tsx index fae6891121..f4314eb27a 100644 --- a/app/src/views/Country/index.tsx +++ b/app/src/views/Country/index.tsx @@ -1,4 +1,5 @@ import { + useCallback, useContext, useMemo, } from 'react'; @@ -23,7 +24,7 @@ import { isTruthyString, } from '@togglecorp/fujs'; -import Link from '#components/Link'; +import Link, { type InternalLinkProps } from '#components/Link'; import NavigationTab from '#components/NavigationTab'; import Page from '#components/Page'; import { adminUrl } from '#config'; @@ -43,6 +44,15 @@ import { useRequest } from '#utils/restRequest'; import i18n from './i18n.json'; import styles from './styles.module.css'; +type BreadcrumbsDataType = { + to: InternalLinkProps['to']; + label: string; + urlParams?: Record; +}; + +const keySelector = (option: BreadcrumbsDataType) => option.to; +const labelSelector = (option: BreadcrumbsDataType) => option.label; + // eslint-disable-next-line import/prefer-default-export export function Component() { const { countryId } = useParams<{ countryId: string }>(); @@ -94,6 +104,41 @@ export function Component() { { countryName: country?.name ?? strings.countryPageTitleFallbackCountry }, ); + const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([ + { + to: 'home', + label: strings.home, + }, + { + to: 'regionsLayout', + label: region?.region_name ?? '-', + urlParams: { + regionId: country?.region, + }, + }, + { + to: 'countriesLayout', + label: country?.name ?? '-', + urlParams: { + countryId, + }, + }, + ]), [ + strings.home, + region?.region_name, + country?.region, + countryId, + country?.name, + ]); + + const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType) + : InternalLinkProps => ( + { + to: item.to, + urlParams: item.urlParams, + } + ), []); + if (isDefined(numericCountryId) && isRegion) { const regionId = countryIdToRegionIdMap[numericCountryId]; @@ -143,29 +188,18 @@ export function Component() { title={pageTitle} heading={country?.name ?? '--'} breadCrumbs={( - - - {strings.home} - - - {region?.region_name} - - - {country?.name} - - + data={breadCrumbsData} + keySelector={keySelector} + labelSelector={labelSelector} + renderer={Link} + rendererParams={rendererParams} + /> )} description={ isDefined(countryResponse) diff --git a/app/src/views/Emergency/index.tsx b/app/src/views/Emergency/index.tsx index df7e0d3dd5..c534b66593 100644 --- a/app/src/views/Emergency/index.tsx +++ b/app/src/views/Emergency/index.tsx @@ -1,4 +1,5 @@ import { + useCallback, useContext, useMemo, } from 'react'; @@ -26,7 +27,7 @@ import { listToMap, } from '@togglecorp/fujs'; -import Link from '#components/Link'; +import Link, { type InternalLinkProps } from '#components/Link'; import NavigationTab from '#components/NavigationTab'; import Page from '#components/Page'; import { adminUrl } from '#config'; @@ -45,6 +46,15 @@ import { import i18n from './i18n.json'; import styles from './styles.module.css'; +type BreadcrumbsDataType = { + to: InternalLinkProps['to']; + label: string; + urlParams?: Record; +}; + +const keySelector = (option: BreadcrumbsDataType) => option.to; +const labelSelector = (option: BreadcrumbsDataType) => option.label; + /* function getRouteIdFromName(text: string) { return text.toLowerCase().trim().split(' ').join('-'); @@ -209,6 +219,37 @@ export function Component() { ].filter((tabInfo) => tabInfo.snippets.length > 0); }, [emergencyResponse, emergencySnippetResponse]); + const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([ + { + to: 'home', + label: strings.home, + }, + { + to: 'emergencies', + label: strings.emergencies, + }, + { + to: 'emergencyDetails', + label: emergencyResponse?.name ?? '-', + urlParams: { + emergencyId, + }, + }, + ]), [ + strings.home, + strings.emergencies, + emergencyId, + emergencyResponse?.name, + ]); + + const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType) + : InternalLinkProps => ( + { + to: item.to, + urlParams: item.urlParams, + } + ), []); + const outletContext = useMemo( () => ({ emergencyResponse, @@ -225,20 +266,18 @@ export function Component() { className={styles.emergency} title={strings.emergencyPageTitle} breadCrumbs={( - - - {strings.home} - - - {strings.emergencies} - - - {emergencyResponse?.name} - - + keySelector={keySelector} + labelSelector={labelSelector} + data={breadCrumbsData} + rendererParams={rendererParams} + renderer={Link} + /> )} actions={isAuthenticated && ( <> diff --git a/app/src/views/FieldReportDetails/index.tsx b/app/src/views/FieldReportDetails/index.tsx index 7badd83e6b..239c7f0981 100644 --- a/app/src/views/FieldReportDetails/index.tsx +++ b/app/src/views/FieldReportDetails/index.tsx @@ -1,5 +1,6 @@ import { Fragment, + useCallback, useMemo, } from 'react'; import { useParams } from 'react-router-dom'; @@ -28,7 +29,7 @@ import { } from '@togglecorp/fujs'; import DetailsFailedToLoadMessage from '#components/domain/DetailsFailedToLoadMessage'; -import Link from '#components/Link'; +import Link, { type InternalLinkProps } from '#components/Link'; import Page from '#components/Page'; import useGlobalEnums from '#hooks/domain/useGlobalEnums'; import { @@ -48,6 +49,15 @@ import EventNumericDetails from './EventNumericDetails'; import i18n from './i18n.json'; import styles from './styles.module.css'; +type BreadcrumbsDataType = { + to: InternalLinkProps['to']; + label: string; + urlParams?: Record; +}; + +const keySelector = (option: BreadcrumbsDataType) => option.to; +const labelSelector = (option: BreadcrumbsDataType) => option.label; + // eslint-disable-next-line import/prefer-default-export export function Component() { const strings = useTranslation(i18n); @@ -209,6 +219,36 @@ export function Component() { }, ].filter((plannedResponse) => isDefined(plannedResponse.value) && plannedResponse.value !== 0); + const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([ + { + to: 'home', + label: strings.home, + }, + { + to: 'emergencies', + label: strings.emergencies, + }, + { + to: 'fieldReportDetails', + label: fieldReportResponse?.summary ?? '-', + urlParams: { + fieldReportId, + }, + }, + ]), [ + strings.home, + strings.emergencies, + fieldReportResponse?.summary, + fieldReportId, + ]); + + const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType) + : InternalLinkProps => ( + { + to: item.to, + urlParams: item.urlParams, + } + ), []); // FIXME: Translation Warning Banner should be shown // FIXME: Breadcrumbs @@ -221,24 +261,18 @@ export function Component() { className={styles.fieldReportDetails} heading={shouldHideDetails ? strings.fieldReportDefaultHeading : summary} breadCrumbs={( - - - {strings.home} - - - {strings.emergencies} - - - {fieldReportResponse?.summary} - - + data={breadCrumbsData} + keySelector={keySelector} + labelSelector={labelSelector} + renderer={Link} + rendererParams={rendererParams} + /> )} actions={( ; +}; + +const keySelector = (option: BreadcrumbsDataType) => option.to; +const labelSelector = (option: BreadcrumbsDataType) => option.label; + // eslint-disable-next-line import/prefer-default-export export function Component() { const strings = useTranslation(i18n); @@ -104,6 +114,36 @@ export function Component() { [flashUpdateResponse], ); + const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([ + { + to: 'home', + label: strings.home, + }, + { + to: 'emergencies', + label: strings.emergencies, + }, + { + to: 'flashUpdateFormDetails', + label: flashUpdateResponse?.title ?? '-', + urlParams: { + flashUpdateId, + }, + }, + ]), [ + strings.home, + strings.emergencies, + flashUpdateId, + flashUpdateResponse?.title, + ]); + + const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType) + : InternalLinkProps => ( + { + to: item.to, + urlParams: item.urlParams, + } + ), []); const shouldHideDetails = fetchingFlashUpdate || isDefined(flashUpdateResponseError); @@ -115,24 +155,18 @@ export function Component() { className={styles.flashUpdateDetails} heading={flashUpdateResponse?.title ?? strings.flashUpdateDetailsHeading} breadCrumbs={( - - - {strings.home} - - - {strings.emergencies} - - - {flashUpdateResponse?.title} - - + data={breadCrumbsData} + keySelector={keySelector} + labelSelector={labelSelector} + renderer={Link} + rendererParams={rendererParams} + /> )} actions={flashUpdateResponse && ( <> diff --git a/packages/ui/src/components/Breadcrumbs/index.tsx b/packages/ui/src/components/Breadcrumbs/index.tsx index 59524bea72..7da9d7b966 100644 --- a/packages/ui/src/components/Breadcrumbs/index.tsx +++ b/packages/ui/src/components/Breadcrumbs/index.tsx @@ -1,59 +1,82 @@ -import { Children } from 'react'; +import { Fragment } from 'react/jsx-runtime'; import { ArrowDropRightLineIcon } from '@ifrc-go/icons'; -import { _cs } from '@togglecorp/fujs'; +import { + _cs, + isNotDefined, +} from '@togglecorp/fujs'; import styles from './styles.module.css'; -export interface BreadcrumbsProps { +interface RendererProps { + children: React.ReactNode; +} + +export interface BreadcrumbsProps< + KEY, + DATUM, + RENDERER_PROPS extends RendererProps +> { className?: string; - itemClassName?: string; separator?: React.ReactNode; - children: React.ReactNode; + data: DATUM[] | undefined | null; + keySelector(datum: DATUM, index: number): KEY; + labelSelector(datum: DATUM, index: number): React.ReactNode; + rendererParams(key: KEY, datum: DATUM, index: number, data: DATUM[]): Omit; + renderer: React.ComponentType; } -function Breadcrumbs(props: BreadcrumbsProps) { +function Breadcrumbs( + props: BreadcrumbsProps, +) { const { + data, className, - children, separator = , - itemClassName, + renderer: Renderer, + rendererParams, + keySelector, + labelSelector, } = props; - const items = Children.toArray(children).reduce( - (acc, child, index, array) => { - const item = ( -
- {child} -
- ); - - acc.push(item); - - if (index !== array.length - 1) { - acc.push( - - {separator} - , - ); - } - - return acc; - }, - [], - ); + if (isNotDefined(data)) { + return null; + } return ( ); } diff --git a/packages/ui/src/components/Breadcrumbs/styles.module.css b/packages/ui/src/components/Breadcrumbs/styles.module.css index b410806ac7..f32022966f 100644 --- a/packages/ui/src/components/Breadcrumbs/styles.module.css +++ b/packages/ui/src/components/Breadcrumbs/styles.module.css @@ -6,14 +6,18 @@ .item { display: flex; - &:not(:last-child) { - color: var(--go-ui-color-gray-70); - font-weight: var(--go-ui-font-weight-light); - } + &:not(:last-child) { + .label { + color: var(--go-ui-color-gray-70); + font-weight: var(--go-ui-font-weight-light); + } + } - &:last-child { - color: var(--go-ui-color-black); - } + &:last-child { + .label { + color: var(--go-ui-color-black); + } + } } .separator { diff --git a/packages/ui/src/components/Button/styles.module.css b/packages/ui/src/components/Button/styles.module.css index 312e6f5537..7263dcf7bb 100644 --- a/packages/ui/src/components/Button/styles.module.css +++ b/packages/ui/src/components/Button/styles.module.css @@ -18,7 +18,6 @@ cursor: var(--cursor); padding: var(--padding); width: fit-content; - min-width: calc(var(--base-spacing) * 6.5); max-width: 100%; overflow: hidden; text-transform: var(--text-transform); @@ -45,6 +44,8 @@ &.primary, &.secondary { + min-width: calc(var(--base-spacing) * 6.5); + .children { text-align: center; } diff --git a/packages/ui/src/components/PieChart/styles.module.css b/packages/ui/src/components/PieChart/styles.module.css index 64b7f28fa3..bfe7ed76bf 100644 --- a/packages/ui/src/components/PieChart/styles.module.css +++ b/packages/ui/src/components/PieChart/styles.module.css @@ -16,6 +16,7 @@ gap: var(--go-ui-border-radius-lg); .legend-item { + text-transform: uppercase; font-size: var(--go-ui-font-size-xs); } } From f9f2d0374a56d7b33da339a029531a8b9ab8cb6f Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Mon, 23 Sep 2024 10:59:15 +0545 Subject: [PATCH 12/25] Update MultiSelectInput and InputContainer --- .../InputContainer/styles.module.css | 2 +- .../components/SelectInputContainer/i18n.json | 1 + .../components/SelectInputContainer/index.tsx | 34 +++++++++++-------- .../SelectInputContainer/styles.module.css | 12 ++++++- .../src/components/Tabs/Tab/styles.module.css | 2 +- 5 files changed, 33 insertions(+), 18 deletions(-) diff --git a/packages/ui/src/components/InputContainer/styles.module.css b/packages/ui/src/components/InputContainer/styles.module.css index 883369b129..307e186bfe 100644 --- a/packages/ui/src/components/InputContainer/styles.module.css +++ b/packages/ui/src/components/InputContainer/styles.module.css @@ -11,7 +11,7 @@ .input { padding-left:12px; - height: 32px; + height: 24px; } } diff --git a/packages/ui/src/components/SelectInputContainer/i18n.json b/packages/ui/src/components/SelectInputContainer/i18n.json index b44529b171..195c4cb90e 100644 --- a/packages/ui/src/components/SelectInputContainer/i18n.json +++ b/packages/ui/src/components/SelectInputContainer/i18n.json @@ -5,6 +5,7 @@ "infoMessageMore":"more", "buttonTitleSelect":"Select all", "buttonTitleClear":"Clear", + "buttonClearAll":"Clear All", "buttonTitleClose":"Close", "buttonTitleOpen":"Open", "selectInputPendingMessage":"Fetching options...", diff --git a/packages/ui/src/components/SelectInputContainer/index.tsx b/packages/ui/src/components/SelectInputContainer/index.tsx index 9ff424d106..91669d6265 100644 --- a/packages/ui/src/components/SelectInputContainer/index.tsx +++ b/packages/ui/src/components/SelectInputContainer/index.tsx @@ -3,9 +3,9 @@ import React, { useRef, } from 'react'; import { - ArrowDownSmallFillIcon, - ArrowUpSmallFillIcon, CheckDoubleFillIcon, + ChevronDownLineIcon, + ChevronUpLineIcon, CloseLineIcon, } from '@ifrc-go/icons'; import { @@ -304,17 +304,6 @@ function SelectInputContainer< )} - {!readOnly && !nonClearable && hasValue && ( - - )} {!readOnly && ( )} @@ -355,6 +344,21 @@ function SelectInputContainer< parentRef={inputSectionRef} className={_cs(optionsPopupClassName, styles.popup)} > + {!readOnly && !nonClearable && hasValue && !disabled && ( +
+ +
+
+ )} > className={styles.list} data={options} diff --git a/packages/ui/src/components/SelectInputContainer/styles.module.css b/packages/ui/src/components/SelectInputContainer/styles.module.css index 56fd3dc2b5..da6f3f05df 100644 --- a/packages/ui/src/components/SelectInputContainer/styles.module.css +++ b/packages/ui/src/components/SelectInputContainer/styles.module.css @@ -1,5 +1,15 @@ .popup { - padding: var(--go-ui-spacing-sm) 0; + padding: var(--go-ui-spacing-sm); + + .clear-button { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-xs); + + .clear-all-border { + border: var(--go-ui-width-separator-sm) solid var(--go-ui-color-primary-red); + } + } .list { display: flex; diff --git a/packages/ui/src/components/Tabs/Tab/styles.module.css b/packages/ui/src/components/Tabs/Tab/styles.module.css index 3aa9ec6ef7..28442c6000 100644 --- a/packages/ui/src/components/Tabs/Tab/styles.module.css +++ b/packages/ui/src/components/Tabs/Tab/styles.module.css @@ -89,7 +89,7 @@ .step-circle { position: absolute; - left: 40%; + left: 45%; flex-shrink: 0; transition: var(--go-ui-duration-transition-slow) border-color ease-in-out; border: var(--border-width) solid transparent; From 102a4d7d90a71e9145f172ea09c977883105f3a1 Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Mon, 23 Sep 2024 11:47:48 +0545 Subject: [PATCH 13/25] fix ActiveOperation filter action --- app/src/components/domain/ActiveOperationMap/index.tsx | 2 +- app/src/components/domain/ActiveOperationMap/styles.module.css | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/app/src/components/domain/ActiveOperationMap/index.tsx b/app/src/components/domain/ActiveOperationMap/index.tsx index 68263837cb..8f9dd0b6aa 100644 --- a/app/src/components/domain/ActiveOperationMap/index.tsx +++ b/app/src/components/domain/ActiveOperationMap/index.tsx @@ -425,7 +425,7 @@ function ActiveOperationMap(props: Props) { value={rawFilter.displacement} onChange={setFilterField} /> -
+
- )} {!readOnly && ( + )} + {!readOnly && onSelectAllButtonClick && ( -
-
- )} + )} +
+
> className={styles.list} data={options} diff --git a/packages/ui/src/components/SelectInputContainer/styles.module.css b/packages/ui/src/components/SelectInputContainer/styles.module.css index da6f3f05df..7562a0aba7 100644 --- a/packages/ui/src/components/SelectInputContainer/styles.module.css +++ b/packages/ui/src/components/SelectInputContainer/styles.module.css @@ -1,13 +1,17 @@ .popup { padding: var(--go-ui-spacing-sm); - .clear-button { + .clear-button-container { display: flex; flex-direction: column; gap: var(--go-ui-spacing-xs); + .clear-button { + align-self: end; + } + .clear-all-border { - border: var(--go-ui-width-separator-sm) solid var(--go-ui-color-primary-red); + border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); } } From 9a559ef049dc77d056296fa7af43896f18dd7865 Mon Sep 17 00:00:00 2001 From: roshni73 Date: Wed, 2 Oct 2024 16:56:38 +0545 Subject: [PATCH 19/25] Update selectall button for multiselectinput --- .../SearchMultiSelectInput/Option/index.tsx | 4 +- .../SearchMultiSelectInput/index.tsx | 12 ++++++ .../components/SelectInputContainer/index.tsx | 38 +++++++++++++++---- 3 files changed, 45 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/components/SearchMultiSelectInput/Option/index.tsx b/packages/ui/src/components/SearchMultiSelectInput/Option/index.tsx index 82e85b3e8b..c649b5d7e0 100644 --- a/packages/ui/src/components/SearchMultiSelectInput/Option/index.tsx +++ b/packages/ui/src/components/SearchMultiSelectInput/Option/index.tsx @@ -1,7 +1,7 @@ import type { ReactNode } from 'react'; import { CheckboxBlankLineIcon, - CheckboxLineIcon, + CheckboxFillIcon, } from '@ifrc-go/icons'; interface OptionProps { @@ -21,7 +21,7 @@ function Option(props: OptionProps) { return ( <>
- { isActive ? : } + { isActive ? : }
{ children } diff --git a/packages/ui/src/components/SearchMultiSelectInput/index.tsx b/packages/ui/src/components/SearchMultiSelectInput/index.tsx index 5deae0e707..c7ea73458d 100644 --- a/packages/ui/src/components/SearchMultiSelectInput/index.tsx +++ b/packages/ui/src/components/SearchMultiSelectInput/index.tsx @@ -288,7 +288,17 @@ function SearchMultiSelectInput< }, [name, onChange], ); + const handleSelectAll = useCallback( + () => { + if (isNotDefined(options)) { + return; + } + const allValues = options.map(keySelector); + onChange(allValues, name); + }, + [options, name, onChange, keySelector], + ); return ( 0} optionsErrored={optionsErrored} optionKeySelector={keySelector} @@ -315,6 +326,7 @@ function SearchMultiSelectInput< onFocusedKeyChange={setFocusedKey} persistentOptionPopup nonClearable={false} + onSelectAllButtonClick={handleSelectAll} hasValue={isDefined(value) && value.length > 0} /> ); diff --git a/packages/ui/src/components/SelectInputContainer/index.tsx b/packages/ui/src/components/SelectInputContainer/index.tsx index 746a53eea7..370ad3912e 100644 --- a/packages/ui/src/components/SelectInputContainer/index.tsx +++ b/packages/ui/src/components/SelectInputContainer/index.tsx @@ -62,6 +62,7 @@ export type SelectInputContainerProps< autoFocus?: boolean; hasValue: boolean; nonClearable?: boolean; + selectedOptions?: Record[OPTION_KEY][]; onClearButtonClick: () => void; onSelectAllButtonClick?: () => void; onEnterWithoutOption?: () => void; @@ -130,6 +131,7 @@ function SelectInputContainer< variant, errorOnTooltip, dropdownHidden, + selectedOptions, } = props; const options = optionsFromProps ?? (emptyList as OPTION[]); @@ -191,7 +193,6 @@ function SelectInputContainer< }, [readOnly, handleShowDropdown], ); - const handlePopupBlur = useCallback( (clickedInside: boolean, clickedInParent: boolean) => { const isClickedWithin = clickedInside || clickedInParent; @@ -207,11 +208,8 @@ function SelectInputContainer< const handleOptionClick = useCallback( (valueKey: OPTION_KEY, value: OPTION) => { onOptionClick(valueKey, value, name); - if (!persistentOptionPopup) { - handleHideDropdown(); - } }, - [onOptionClick, handleHideDropdown, persistentOptionPopup, name], + [onOptionClick, name], ); const optionListRendererParams = useCallback( @@ -263,7 +261,14 @@ function SelectInputContainer< const dropdownShownActual = dropdownShown && !dropdownHidden; - console.log('has', hasValue); + const availableOptions = options.filter( + (option) => !selectedOptions?.some( + (selectedOption) => optionKeySelector( + selectedOption, + 0, + ) === optionKeySelector(option, 0), + ), + ); return ( <> @@ -359,11 +364,30 @@ function SelectInputContainer< {strings.buttonTitleSelect} )} + {selectedOptions && selectedOptions.length > 0 && ( +
+ + > + className={styles.list} + data={selectedOptions} + keySelector={optionKeySelector} + renderer={GenericOption} + rendererParams={optionListRendererParams} + compact + pending={false} + errored={false} + filtered={false} + /> +
+ )}
> className={styles.list} - data={options} + data={availableOptions} keySelector={optionKeySelector} renderer={GenericOption} rendererParams={optionListRendererParams} From 61b56251086d46e5c3a097e50de390fa56aa543e Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Tue, 8 Oct 2024 11:19:55 +0545 Subject: [PATCH 20/25] Update orientaition of the dropdown --- packages/ui/src/components/DropdownMenu/index.tsx | 1 + packages/ui/src/components/Popup/index.tsx | 8 +++++++- packages/ui/src/components/SelectInputContainer/index.tsx | 3 ++- packages/ui/src/hooks/useFloatPlacement.ts | 5 +++++ 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/DropdownMenu/index.tsx b/packages/ui/src/components/DropdownMenu/index.tsx index fd6d835827..3b1153621a 100644 --- a/packages/ui/src/components/DropdownMenu/index.tsx +++ b/packages/ui/src/components/DropdownMenu/index.tsx @@ -138,6 +138,7 @@ function DropdownMenu(props: Props) { className={_cs(styles.dropdownContent, popupClassName)} parentRef={buttonRef} preferredWidth={preferredPopupWidth} + preferredVerticalOrientation > {children} diff --git a/packages/ui/src/components/Popup/index.tsx b/packages/ui/src/components/Popup/index.tsx index 8874749507..9a0d89d9c4 100644 --- a/packages/ui/src/components/Popup/index.tsx +++ b/packages/ui/src/components/Popup/index.tsx @@ -12,6 +12,7 @@ export interface Props { parentRef: React.RefObject; children?: React.ReactNode; preferredWidth?: number; + preferredVerticalOrientation?: boolean; } function Popup(props: Props) { @@ -22,6 +23,7 @@ function Popup(props: Props) { className, pointerClassName, preferredWidth, + preferredVerticalOrientation = false, } = props; const { @@ -29,7 +31,11 @@ function Popup(props: Props) { pointer, width, orientation, - } = useFloatPlacement(parentRef, preferredWidth); + } = useFloatPlacement( + parentRef, + preferredWidth, + preferredVerticalOrientation ? 'top' : undefined, + ); return ( diff --git a/packages/ui/src/components/SelectInputContainer/index.tsx b/packages/ui/src/components/SelectInputContainer/index.tsx index 370ad3912e..35fa075869 100644 --- a/packages/ui/src/components/SelectInputContainer/index.tsx +++ b/packages/ui/src/components/SelectInputContainer/index.tsx @@ -383,7 +383,8 @@ function SelectInputContainer< />
)} -
+ {!readOnly && onSelectAllButtonClick + &&
}
> className={styles.list} diff --git a/packages/ui/src/hooks/useFloatPlacement.ts b/packages/ui/src/hooks/useFloatPlacement.ts index e3d9db01cf..c2fcd1ca90 100644 --- a/packages/ui/src/hooks/useFloatPlacement.ts +++ b/packages/ui/src/hooks/useFloatPlacement.ts @@ -54,6 +54,7 @@ const defaultPlacement: Placement = { function useFloatPlacement( parentRef: React.RefObject, preferredWidth?: number, + perferredVerticalOrientation?: 'top' | 'bottom', ) { const [placements, setPlacements] = useState<{ content: Placement, @@ -86,6 +87,10 @@ function useFloatPlacement( const maxWidth = window.innerWidth - 2 * horizontalPadding; const orientation = getPreferredOrientation(parentBCR); + + if (perferredVerticalOrientation) { + orientation.vertical = perferredVerticalOrientation; + } const parentCenterX = parentX + parentWidth / 2; const width = bound( From 36494fc2a1915e3b77a62f8de454899e61758392 Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Thu, 17 Oct 2024 16:03:52 +0545 Subject: [PATCH 21/25] Add Key and label selector in breadcrumbs --- app/src/components/GoBreadcrumbs/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/src/components/GoBreadcrumbs/index.tsx b/app/src/components/GoBreadcrumbs/index.tsx index 657465ed68..4b5f72d2e7 100644 --- a/app/src/components/GoBreadcrumbs/index.tsx +++ b/app/src/components/GoBreadcrumbs/index.tsx @@ -10,9 +10,12 @@ interface RouteData { } interface GoBreadcrumbsProps { - routeData: RouteData[] + routeData: RouteData[]; } +const keySelector = (datum: RouteData) => datum.to; +const labelSelector = (datum: RouteData) => datum.label; + function GoBreadcrumbs(props: GoBreadcrumbsProps) { const { routeData } = props; @@ -32,8 +35,8 @@ function GoBreadcrumbs(props: GoBreadcrumbsProps) { (InternalLinkProps & { children: React.ReactNode }) > data={routeData} - keySelector={(datum) => datum.to} - labelSelector={(datum) => datum.label} + keySelector={keySelector} + labelSelector={labelSelector} renderer={Link} rendererParams={rendererParams} /> From 22fd1d403a5fbf5c2fa72b35f5d3f074667cccff Mon Sep 17 00:00:00 2001 From: roshni73 Date: Fri, 18 Oct 2024 11:35:03 +0545 Subject: [PATCH 22/25] Fix renderParams in stories --- .../go-ui-storybook/src/stories/Breadcrumbs.stories.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/go-ui-storybook/src/stories/Breadcrumbs.stories.tsx b/packages/go-ui-storybook/src/stories/Breadcrumbs.stories.tsx index 38c6631a4d..1e14cd5757 100644 --- a/packages/go-ui-storybook/src/stories/Breadcrumbs.stories.tsx +++ b/packages/go-ui-storybook/src/stories/Breadcrumbs.stories.tsx @@ -44,8 +44,11 @@ export const Default: Story = { keySelector, labelSelector, rendererParams, - // eslint-disable-next-line react/jsx-props-no-spreading - renderer: (props) =>
, + renderer: ({ children }) => ( +
+ {children} +
+ ), }, }; From a8922149bf6df8359eb79abb3d26911f5b58ac71 Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Wed, 23 Oct 2024 16:51:16 +0545 Subject: [PATCH 23/25] Update and add missing design tokens --- app/src/components/NavigationTab/index.tsx | 4 +++- .../components/NavigationTab/styles.module.css | 5 ++--- .../domain/ActiveOperationMap/index.tsx | 18 ++++++++---------- .../ActiveOperationMap/styles.module.css | 3 --- .../Filters/index.tsx | 5 +++++ .../ui/src/components/Alert/styles.module.css | 2 +- .../ui/src/components/Button/styles.module.css | 6 ++++-- .../ui/src/components/ConfirmButton/index.tsx | 3 +-- .../components/ConfirmButton/styles.module.css | 6 ------ packages/ui/src/components/Container/index.tsx | 3 --- .../ui/src/components/DropdownMenu/index.tsx | 2 +- .../components/DropdownMenu/styles.module.css | 4 ++-- packages/ui/src/components/Header/index.tsx | 5 ----- .../ui/src/components/Header/styles.module.css | 4 ---- packages/ui/src/components/Heading/index.tsx | 3 --- .../src/components/Heading/styles.module.css | 4 ---- packages/ui/src/components/InfoPopup/i18n.json | 7 +++++++ packages/ui/src/components/InfoPopup/index.tsx | 17 +++++++++-------- .../src/components/InfoPopup/styles.module.css | 3 --- .../InputContainer/styles.module.css | 4 ++-- .../ui/src/components/InputSection/index.tsx | 1 - packages/ui/src/components/Modal/index.tsx | 1 - .../ui/src/components/Modal/styles.module.css | 1 - .../NavigationTabList/styles.module.css | 2 +- .../src/components/PieChart/styles.module.css | 2 +- packages/ui/src/components/Popup/index.tsx | 7 +++---- .../ui/src/components/Popup/styles.module.css | 2 +- .../components/ReducedListDisplay/index.tsx | 1 - .../SearchMultiSelectInput/index.tsx | 14 +++----------- .../components/SegmentInput/styles.module.css | 4 +--- .../components/SelectInputContainer/i18n.json | 1 - .../components/SelectInputContainer/index.tsx | 16 ++++++++++------ .../SelectInputContainer/styles.module.css | 4 ++-- .../src/components/Table/HeaderCell/index.tsx | 1 - .../Table/TableBodyContent/styles.module.css | 2 +- .../src/hooks/useBasicLayout/styles.module.css | 1 - packages/ui/src/index.css | 12 ++++++++---- 37 files changed, 76 insertions(+), 104 deletions(-) delete mode 100644 packages/ui/src/components/ConfirmButton/styles.module.css create mode 100644 packages/ui/src/components/InfoPopup/i18n.json diff --git a/app/src/components/NavigationTab/index.tsx b/app/src/components/NavigationTab/index.tsx index 6bbdb42a5f..9843a7dd53 100644 --- a/app/src/components/NavigationTab/index.tsx +++ b/app/src/components/NavigationTab/index.tsx @@ -188,7 +188,9 @@ function NavigationTab(props: Props) { )}
{children} -
+ {variant === 'primary' && ( +
+ )}
{variant === 'primary' && (
diff --git a/app/src/components/NavigationTab/styles.module.css b/app/src/components/NavigationTab/styles.module.css index 8e896ff13f..a6d5c866d5 100644 --- a/app/src/components/NavigationTab/styles.module.css +++ b/app/src/components/NavigationTab/styles.module.css @@ -168,9 +168,8 @@ } .active-children-border { - background-color: transparent; + border: var(--go-ui-width-separator-small) solid transparent; width: 100%; - height: var(--go-ui-width-separator-small); } &.active { @@ -182,7 +181,7 @@ background-color: var(--go-ui-color-white); .active-children-border { - background-color: var(--go-ui-color-primary-red); + border-color: var(--go-ui-color-primary-red); } } } diff --git a/app/src/components/domain/ActiveOperationMap/index.tsx b/app/src/components/domain/ActiveOperationMap/index.tsx index 8f9dd0b6aa..6e1c429c8d 100644 --- a/app/src/components/domain/ActiveOperationMap/index.tsx +++ b/app/src/components/domain/ActiveOperationMap/index.tsx @@ -425,16 +425,14 @@ function ActiveOperationMap(props: Props) { value={rawFilter.displacement} onChange={setFilterField} /> -
- -
+ )} actions={!presentationMode && ( diff --git a/app/src/components/domain/ActiveOperationMap/styles.module.css b/app/src/components/domain/ActiveOperationMap/styles.module.css index 0264a3d760..be42392eeb 100644 --- a/app/src/components/domain/ActiveOperationMap/styles.module.css +++ b/app/src/components/domain/ActiveOperationMap/styles.module.css @@ -1,7 +1,4 @@ .active-operation-map { - .filter-actions { - align-self: end; - } .content { position: relative; diff --git a/app/src/views/CountryNsOverviewActivities/Filters/index.tsx b/app/src/views/CountryNsOverviewActivities/Filters/index.tsx index b0807d8333..32481d407a 100644 --- a/app/src/views/CountryNsOverviewActivities/Filters/index.tsx +++ b/app/src/views/CountryNsOverviewActivities/Filters/index.tsx @@ -67,6 +67,7 @@ function Filters(props: Props) { labelSelector={countryNameSelector} onChange={onChange} disabled={disabled} + withSelectAll /> ); diff --git a/packages/ui/src/components/Alert/styles.module.css b/packages/ui/src/components/Alert/styles.module.css index 5f7deb18c6..a6e539b212 100644 --- a/packages/ui/src/components/Alert/styles.module.css +++ b/packages/ui/src/components/Alert/styles.module.css @@ -1,7 +1,7 @@ .alert { display: flex; border-radius: var(--go-ui-border-radius-md); - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--go-ui-box-shadow-alert); width: calc(14rem + 16vw); color: var(--go-ui-color-white); diff --git a/packages/ui/src/components/Button/styles.module.css b/packages/ui/src/components/Button/styles.module.css index f3967a5a16..81bcefeb32 100644 --- a/packages/ui/src/components/Button/styles.module.css +++ b/packages/ui/src/components/Button/styles.module.css @@ -21,7 +21,7 @@ overflow: hidden; text-align: center; text-transform: var(--text-transform); - line-height: 21px; + line-height: var(--go-ui-line-height-md); color: var(--color-text); font-family: inherit; font-size: var(--font-size); @@ -89,7 +89,9 @@ --color-text: var(--go-ui-color-white); &.disabled { - filter: saturate(50%); + border-color: var(--go-ui-color-gray-40); + background-color: var(--go-ui-color-gray-40); + color: var(--go-ui-color-black); } &:not(.disabled) { diff --git a/packages/ui/src/components/ConfirmButton/index.tsx b/packages/ui/src/components/ConfirmButton/index.tsx index d4c352f214..4e0934fd8a 100644 --- a/packages/ui/src/components/ConfirmButton/index.tsx +++ b/packages/ui/src/components/ConfirmButton/index.tsx @@ -9,7 +9,6 @@ import Modal from '#components/Modal'; import useTranslation from '#hooks/useTranslation'; import i18n from './i18n.json'; -import styles from './styles.module.css'; export interface Props extends ButtonProps { confirmMessage?: React.ReactNode; @@ -59,7 +58,7 @@ function ConfirmButton(props: Props) {
)} - {modalHeading &&
} ); }, [ - modalHeading, heading, ellipsizeHeading, headingDescription, diff --git a/packages/ui/src/components/Header/styles.module.css b/packages/ui/src/components/Header/styles.module.css index b62fc5581a..a8b25dca26 100644 --- a/packages/ui/src/components/Header/styles.module.css +++ b/packages/ui/src/components/Header/styles.module.css @@ -1,8 +1,4 @@ .header { display: flex; flex-direction: column; - - .border { - border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); - } } diff --git a/packages/ui/src/components/Heading/index.tsx b/packages/ui/src/components/Heading/index.tsx index 61560921eb..a5cadc20fc 100644 --- a/packages/ui/src/components/Heading/index.tsx +++ b/packages/ui/src/components/Heading/index.tsx @@ -25,7 +25,6 @@ export interface Props { level?: HeadingLevel; children: ReactNode; ellipsize?: boolean; - modalHeading?: boolean; } function Heading(props: Props) { @@ -34,7 +33,6 @@ function Heading(props: Props) { level = 3, children, ellipsize, - modalHeading, } = props; const HeadingTag = `h${level}` as ElementType; @@ -49,7 +47,6 @@ function Heading(props: Props) { return ( { - name: N; +export interface Props { icon?: React.ReactNode; withoutIcon?: boolean; infoLabel?: React.ReactNode; @@ -21,12 +22,11 @@ export interface Props { descriptionClassName?: string; popupClassName?: string; className?: string; - onCloseButtonClick?: (name: string) => void; + onCloseButtonClick?: () => void; } -function InfoPopup(props: Props) { +function InfoPopup(props: Props) { const { - name, className, icon = , infoLabel, @@ -38,13 +38,14 @@ function InfoPopup(props: Props) { descriptionClassName, } = props; + const strings = useTranslation(i18n); const handleCloseButtonClick = useCallback( () => { if (onCloseButtonClick) { - onCloseButtonClick(name); + onCloseButtonClick(); } }, - [onCloseButtonClick, name], + [onCloseButtonClick], ); return ( @@ -74,7 +75,7 @@ function InfoPopup(props: Props) { name={undefined} onClick={handleCloseButtonClick} variant="tertiary" - title="Close" + title={strings.closeButtonLabel} > diff --git a/packages/ui/src/components/InfoPopup/styles.module.css b/packages/ui/src/components/InfoPopup/styles.module.css index d7507e39d8..c32c3569dd 100644 --- a/packages/ui/src/components/InfoPopup/styles.module.css +++ b/packages/ui/src/components/InfoPopup/styles.module.css @@ -24,9 +24,6 @@ gap: var(--go-ui-spacing-xs); font-size: var(--go-ui-font-size-sm); - .heading { - font-weight: 500; - } } .close-icon { font-size: var(--go-ui-font-size-2xl); diff --git a/packages/ui/src/components/InputContainer/styles.module.css b/packages/ui/src/components/InputContainer/styles.module.css index 307e186bfe..32aa98dfee 100644 --- a/packages/ui/src/components/InputContainer/styles.module.css +++ b/packages/ui/src/components/InputContainer/styles.module.css @@ -8,10 +8,10 @@ border-radius: var(--go-ui-border-radius-md); background-color: var(--go-ui-color-element-background); padding: 0 var(--go-ui-spacing-sm); - + .input { padding-left:12px; - height: 24px; + height: var(--go-ui-height-compact-status-icon); } } diff --git a/packages/ui/src/components/InputSection/index.tsx b/packages/ui/src/components/InputSection/index.tsx index 6f8a95d8b3..0dcb91ffba 100644 --- a/packages/ui/src/components/InputSection/index.tsx +++ b/packages/ui/src/components/InputSection/index.tsx @@ -60,7 +60,6 @@ function InputSection(props: Props) { && ( )} childrenContainerClassName={styles.description} diff --git a/packages/ui/src/components/Modal/index.tsx b/packages/ui/src/components/Modal/index.tsx index 56e2006a36..c1d398d59d 100644 --- a/packages/ui/src/components/Modal/index.tsx +++ b/packages/ui/src/components/Modal/index.tsx @@ -93,7 +93,6 @@ function Modal(props: Props) { ; children?: React.ReactNode; preferredWidth?: number; - preferredVerticalOrientation?: boolean; + overrideVerticalOrientation?: boolean; } function Popup(props: Props) { @@ -23,7 +23,7 @@ function Popup(props: Props) { className, pointerClassName, preferredWidth, - preferredVerticalOrientation = false, + overrideVerticalOrientation = false, } = props; const { @@ -34,7 +34,7 @@ function Popup(props: Props) { } = useFloatPlacement( parentRef, preferredWidth, - preferredVerticalOrientation ? 'top' : undefined, + overrideVerticalOrientation ? 'top' : undefined, ); return ( @@ -47,7 +47,6 @@ function Popup(props: Props) { }} className={_cs( styles.popup, - orientation.vertical === 'bottom' && styles.topOrientation, className, )} > diff --git a/packages/ui/src/components/Popup/styles.module.css b/packages/ui/src/components/Popup/styles.module.css index 40d45e967b..34ca9e6492 100644 --- a/packages/ui/src/components/Popup/styles.module.css +++ b/packages/ui/src/components/Popup/styles.module.css @@ -1,7 +1,7 @@ .popup { position: fixed; border-radius: 4px; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08); + box-shadow: var(--go-ui-box-shadow-popup); background-color: var(--go-ui-color-white); max-height: 40vh; overflow: auto; diff --git a/packages/ui/src/components/ReducedListDisplay/index.tsx b/packages/ui/src/components/ReducedListDisplay/index.tsx index 21c9ec303a..95baed2d5a 100644 --- a/packages/ui/src/components/ReducedListDisplay/index.tsx +++ b/packages/ui/src/components/ReducedListDisplay/index.tsx @@ -96,7 +96,6 @@ function ReducedListDisplay(props: Props {newJoinedList} OPTION[]; onSearchValueChange?: (value: string | undefined) => void; onShowDropdownChange?: (value: boolean) => void; + onSelectAllButtonClick?: () => void; selectedOnTop: boolean; }, OMISSION> @@ -108,6 +109,7 @@ function SearchMultiSelectInput< onShowDropdownChange, hideOptionFilter, selectedOnTop, + onSelectAllButtonClick, ...otherProps } = props; @@ -288,17 +290,7 @@ function SearchMultiSelectInput< }, [name, onChange], ); - const handleSelectAll = useCallback( - () => { - if (isNotDefined(options)) { - return; - } - const allValues = options.map(keySelector); - onChange(allValues, name); - }, - [options, name, onChange, keySelector], - ); return ( 0} /> ); diff --git a/packages/ui/src/components/SegmentInput/styles.module.css b/packages/ui/src/components/SegmentInput/styles.module.css index 074b53b712..904cb73f33 100644 --- a/packages/ui/src/components/SegmentInput/styles.module.css +++ b/packages/ui/src/components/SegmentInput/styles.module.css @@ -3,8 +3,6 @@ .segment-list { flex-wrap: nowrap; - border:#F7F7F7 solid var(--go-ui-color-separator); - border-radius: var(--go-ui-border-radius-full); background-color: var(--go-ui-color-background); padding: 0; width: fit-content; @@ -13,7 +11,7 @@ .segment { border-radius: var(--go-ui-border-radius-full); - padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-md); + padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-md); &.active { background-color: var(--go-ui-color-primary-red); diff --git a/packages/ui/src/components/SelectInputContainer/i18n.json b/packages/ui/src/components/SelectInputContainer/i18n.json index 195c4cb90e..a769bfe366 100644 --- a/packages/ui/src/components/SelectInputContainer/i18n.json +++ b/packages/ui/src/components/SelectInputContainer/i18n.json @@ -4,7 +4,6 @@ "infoMessageAnd":"and", "infoMessageMore":"more", "buttonTitleSelect":"Select all", - "buttonTitleClear":"Clear", "buttonClearAll":"Clear All", "buttonTitleClose":"Close", "buttonTitleOpen":"Open", diff --git a/packages/ui/src/components/SelectInputContainer/index.tsx b/packages/ui/src/components/SelectInputContainer/index.tsx index 35fa075869..6c93060eab 100644 --- a/packages/ui/src/components/SelectInputContainer/index.tsx +++ b/packages/ui/src/components/SelectInputContainer/index.tsx @@ -208,8 +208,11 @@ function SelectInputContainer< const handleOptionClick = useCallback( (valueKey: OPTION_KEY, value: OPTION) => { onOptionClick(valueKey, value, name); + if (!persistentOptionPopup) { + handleHideDropdown(); + } }, - [onOptionClick, name], + [onOptionClick, name, persistentOptionPopup, handleHideDropdown], ); const optionListRendererParams = useCallback( @@ -335,7 +338,7 @@ function SelectInputContainer< parentRef={inputSectionRef} className={_cs(optionsPopupClassName, styles.popup)} > -
+
{!readOnly && !nonClearable && hasValue @@ -347,12 +350,12 @@ function SelectInputContainer< disabled={disabled} variant="tertiary" name={undefined} - title={strings.buttonTitleClear} + title={strings.buttonClearAll} > {strings.buttonClearAll} )} - {!readOnly && onSelectAllButtonClick && ( + {!readOnly && !disabled && onSelectAllButtonClick && (
)} - {!readOnly && onSelectAllButtonClick - &&
} + {!readOnly && onSelectAllButtonClick && ( +
+ )}
> className={styles.list} diff --git a/packages/ui/src/components/SelectInputContainer/styles.module.css b/packages/ui/src/components/SelectInputContainer/styles.module.css index 7562a0aba7..3cab02c810 100644 --- a/packages/ui/src/components/SelectInputContainer/styles.module.css +++ b/packages/ui/src/components/SelectInputContainer/styles.module.css @@ -1,7 +1,7 @@ .popup { padding: var(--go-ui-spacing-sm); - .clear-button-container { + .dropdown-container-buttons { display: flex; flex-direction: column; gap: var(--go-ui-spacing-xs); @@ -10,7 +10,7 @@ align-self: end; } - .clear-all-border { + .clear-all-separator { border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); } } diff --git a/packages/ui/src/components/Table/HeaderCell/index.tsx b/packages/ui/src/components/Table/HeaderCell/index.tsx index 326868e1cb..6cf2bff409 100644 --- a/packages/ui/src/components/Table/HeaderCell/index.tsx +++ b/packages/ui/src/components/Table/HeaderCell/index.tsx @@ -109,7 +109,6 @@ function HeaderCell(props: HeaderCellProps) { {infoTitle && infoDescription && ( diff --git a/packages/ui/src/components/Table/TableBodyContent/styles.module.css b/packages/ui/src/components/Table/TableBodyContent/styles.module.css index 320b66a7db..2503bf6fec 100644 --- a/packages/ui/src/components/Table/TableBodyContent/styles.module.css +++ b/packages/ui/src/components/Table/TableBodyContent/styles.module.css @@ -1,6 +1,6 @@ .row { .cell { - padding: 12px; + padding: var(--go-ui-spacing-ssm); overflow: hidden; word-break: break-word; } diff --git a/packages/ui/src/hooks/useBasicLayout/styles.module.css b/packages/ui/src/hooks/useBasicLayout/styles.module.css index 7e3ced3e6b..d55802070b 100644 --- a/packages/ui/src/hooks/useBasicLayout/styles.module.css +++ b/packages/ui/src/hooks/useBasicLayout/styles.module.css @@ -1,6 +1,5 @@ .basic-layout { display: flex; - align-items: flex-start; &.with-wrap { flex-wrap: wrap; diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index 5e703962dd..01f7054541 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -61,6 +61,7 @@ --go-ui-spacing-2xs: calc(var(--base-spacing) * 0.25); --go-ui-spacing-xs: calc(var(--base-spacing) * 0.4); --go-ui-spacing-sm: calc(var(--base-spacing) * 0.625); + --go-ui-spacing-ssm: calc(var(--base-spacing) * 0.750); --go-ui-spacing-md: calc(var(--base-spacing) * 1); --go-ui-spacing-lg: calc(var(--base-spacing) * 1.5); --go-ui-spacing-xl: calc(var(--base-spacing) * 2.25); @@ -108,11 +109,14 @@ --go-ui-box-shadow-xs: 0 1pt 2pt rgb(0 0 0 / 0.2); --go-ui-box-shadow-sm: 0 1pt 4pt rgb(0 0 0 / 0.2); + --go-ui-box-shadow-ssm: 0 0 10px rgb(0 0 0 / 0.08); --go-ui-box-shadow-md: 0 1pt 5pt -2pt rgb(0 0 0 / 0.375); --go-ui-box-shadow-lg: 0 2pt 8pt -4pt rgb(0 0 0 / 0.5); --go-ui-box-shadow-xl: 0 3pt 16pt -6pt rgb(0 0 0 / 0.5); --go-ui-box-shadow-2xl: 0 4pt 16pt -6pt rgb(0 0 0 / 1); --go-ui-box-shadow-inner: inset 0 2pt 4pt 0 rgb(0 0 0 / 0.375); + --go-ui-box-shadow-alert: 0 3px 8px 8px rgb(0 0 0 / 0.2); + --go-ui-box-shadow-popup: 0 0 10px rgb(0 0 0 / 0.08); --go-ui-box-shadow-none: 0 0 #0000; --go-ui-duration-transition-fast: .1s; @@ -199,16 +203,16 @@ --go-ui-width-min-modal: 18rem; --go-ui-height-min-modal: 11rem; - --go-ui-width-modal-sm: 32rem; + --go-ui-width-modal-sm: 20rem; --go-ui-height-modal-sm: 100%; - --go-ui-width-modal-md: 42rem; + --go-ui-width-modal-md: 26.25rem; --go-ui-height-modal-md: 100%; - --go-ui-width-modal-lg: 64rem; + --go-ui-width-modal-lg: 40rem; --go-ui-height-modal-lg: 100%; - --go-ui-width-modal-xl: 92rem; + --go-ui-width-modal-xl: 57.5rem; --go-ui-height-modal-xl: 100%; --go-ui-saturate-0: 0; From 1bb82e536633e887ca5ed5ee995d7808b4e66d2c Mon Sep 17 00:00:00 2001 From: roshni73 Date: Mon, 28 Oct 2024 13:21:29 +0545 Subject: [PATCH 24/25] Fix table stories and default message --- packages/go-ui-storybook/src/stories/Table.stories.tsx | 4 ---- packages/go-ui-storybook/src/stories/index.css | 5 +---- packages/ui/src/components/Button/index.tsx | 3 +-- packages/ui/src/components/Button/styles.module.css | 4 ++-- packages/ui/src/components/DefaultMessage/styles.module.css | 4 ++-- packages/ui/src/components/Table/styles.module.css | 1 + packages/ui/src/index.css | 1 + 7 files changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/go-ui-storybook/src/stories/Table.stories.tsx b/packages/go-ui-storybook/src/stories/Table.stories.tsx index 5cde02d21c..fb4a4ef3c5 100644 --- a/packages/go-ui-storybook/src/stories/Table.stories.tsx +++ b/packages/go-ui-storybook/src/stories/Table.stories.tsx @@ -277,7 +277,6 @@ export const Default: Story = { filtered: false, pending: false, headersHidden: false, - headerRowClassName: 'table-header-row', }, }; @@ -288,7 +287,6 @@ export const WithHeadersHidden: Story = { keySelector, caption: 'Animal Information Dataset', headersHidden: true, - headerRowClassName: 'table-header-row', }, }; @@ -299,7 +297,6 @@ export const WithFixedColumnWidth: Story = { keySelector, caption: 'All columns utilize fixed width formatting.', fixedColumnWidth: true, - headerRowClassName: 'table-header-row', }, }; @@ -310,6 +307,5 @@ export const WithResizableColumn: Story = { keySelector, caption: 'You can utilize the header column to adjust the width of each column.', resizableColumn: true, - headerRowClassName: 'table-header-row', }, }; diff --git a/packages/go-ui-storybook/src/stories/index.css b/packages/go-ui-storybook/src/stories/index.css index 468ca7a6bb..fe7d01539f 100644 --- a/packages/go-ui-storybook/src/stories/index.css +++ b/packages/go-ui-storybook/src/stories/index.css @@ -187,14 +187,11 @@ padding-top: var(--go-ui-spacing-md); padding-bottom: var(--go-ui-spacing-md); } - +/*NOTE:*/ .table-link{ color: var(--go-ui-color-text); } .table-link:hover { color: var(--go-ui-color-primary-red); } -.table-header-row { - background:var(--go-ui-color-primary-gray-10); -} diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx index 432a7b352f..44f3f1808a 100644 --- a/packages/ui/src/components/Button/index.tsx +++ b/packages/ui/src/components/Button/index.tsx @@ -14,7 +14,7 @@ import useBasicLayout from '#hooks/useBasicLayout'; import styles from './styles.module.css'; // NOTE: Adding a 'tertiary-on-dark' to use 'tertiary' button on darker backgrounds -export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tertiary-on-dark' | 'dropdown-item' | 'process' | 'grey-tertiary'; +export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tertiary-on-dark' | 'dropdown-item' | 'grey-tertiary'; const buttonVariantToClassNameMap: Record = { primary: styles.primary, @@ -22,7 +22,6 @@ const buttonVariantToClassNameMap: Record = { tertiary: styles.tertiary, 'tertiary-on-dark': styles.tertiaryOnDark, 'dropdown-item': styles.dropdownItem, - process: styles.process, 'grey-tertiary': styles.greyTertiary, }; diff --git a/packages/ui/src/components/Button/styles.module.css b/packages/ui/src/components/Button/styles.module.css index 81bcefeb32..afbcde88f3 100644 --- a/packages/ui/src/components/Button/styles.module.css +++ b/packages/ui/src/components/Button/styles.module.css @@ -145,7 +145,7 @@ } } } - + &.dropdown-item { display: flex; width: 100%; @@ -163,7 +163,7 @@ --padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg); background-color: var(--go-ui-color-background); } - + &.disabled { opacity: var(--go-ui-opacity-disabled-element); --cursor: not-allowed; diff --git a/packages/ui/src/components/DefaultMessage/styles.module.css b/packages/ui/src/components/DefaultMessage/styles.module.css index fa0b70088a..6535563c82 100644 --- a/packages/ui/src/components/DefaultMessage/styles.module.css +++ b/packages/ui/src/components/DefaultMessage/styles.module.css @@ -7,7 +7,7 @@ height: 100%; } &.empty-message { - padding-top: 40px; - height: 200px; + padding-top: var(--go-ui-spacing-xxl); + height:12.5rem; } } diff --git a/packages/ui/src/components/Table/styles.module.css b/packages/ui/src/components/Table/styles.module.css index e6c7a88f77..dd890e1b51 100644 --- a/packages/ui/src/components/Table/styles.module.css +++ b/packages/ui/src/components/Table/styles.module.css @@ -21,6 +21,7 @@ font-size: inherit; .header-row { + background:var(--go-ui-color-primary-gray-10); .header-element { position: sticky; top: 0; diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index 01f7054541..ea54598c92 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -65,6 +65,7 @@ --go-ui-spacing-md: calc(var(--base-spacing) * 1); --go-ui-spacing-lg: calc(var(--base-spacing) * 1.5); --go-ui-spacing-xl: calc(var(--base-spacing) * 2.25); + --go-ui-spacing-xxl: calc(var(--base-spacing) * 2.5); --go-ui-spacing-2xl: calc(var(--base-spacing) * 3.5); --go-ui-spacing-3xl: calc(var(--base-spacing) * 4.75); --go-ui-spacing-4xl: calc(var(--base-spacing) * 6); From a3ecadf7a163835e5972e2612a5add2e9e514e7a Mon Sep 17 00:00:00 2001 From: roshni73 Date: Tue, 19 Nov 2024 14:21:45 +0545 Subject: [PATCH 25/25] Fix textinput, validate button, dateinput --- .../Navbar/CountryDropdown/styles.module.css | 2 +- .../domain/ActiveOperationMap/index.tsx | 19 +++++++++++-------- .../ActiveOperationMap/styles.module.css | 4 ++++ .../LocalUnitValidateButton/styles.module.css | 1 + .../src/components/Button/styles.module.css | 2 -- .../components/DropdownMenu/styles.module.css | 2 +- .../InputContainer/styles.module.css | 1 - .../components/InputLabel/styles.module.css | 1 + 8 files changed, 19 insertions(+), 13 deletions(-) diff --git a/app/src/components/Navbar/CountryDropdown/styles.module.css b/app/src/components/Navbar/CountryDropdown/styles.module.css index 8e087e428e..4f583213d8 100644 --- a/app/src/components/Navbar/CountryDropdown/styles.module.css +++ b/app/src/components/Navbar/CountryDropdown/styles.module.css @@ -4,7 +4,7 @@ padding: var(--go-ui-spacing-md); max-width: 64rem; min-height: 16rem; - gap: var(--go-ui-spacing-md); + gap: var(--go-ui-spacing-sm); overflow: auto; .region-list { diff --git a/app/src/components/domain/ActiveOperationMap/index.tsx b/app/src/components/domain/ActiveOperationMap/index.tsx index 6e1c429c8d..e84d984fbc 100644 --- a/app/src/components/domain/ActiveOperationMap/index.tsx +++ b/app/src/components/domain/ActiveOperationMap/index.tsx @@ -425,14 +425,17 @@ function ActiveOperationMap(props: Props) { value={rawFilter.displacement} onChange={setFilterField} /> - +
+ +
+ )} actions={!presentationMode && ( diff --git a/app/src/components/domain/ActiveOperationMap/styles.module.css b/app/src/components/domain/ActiveOperationMap/styles.module.css index be42392eeb..b9d1fdf89a 100644 --- a/app/src/components/domain/ActiveOperationMap/styles.module.css +++ b/app/src/components/domain/ActiveOperationMap/styles.module.css @@ -7,6 +7,10 @@ top: var(--go-ui-spacing-md); left: var(--go-ui-spacing-md); } + + } + .filter-actions { + align-self: end; } .map-container { diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css index 32f3f51f1f..7106d70bc0 100644 --- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css +++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css @@ -5,6 +5,7 @@ } .local-unit-validated-button { + align-items: center; border: none; background-color: var(--go-ui-color-gray-40); diff --git a/packages/ui/src/components/Button/styles.module.css b/packages/ui/src/components/Button/styles.module.css index afbcde88f3..67486f1e12 100644 --- a/packages/ui/src/components/Button/styles.module.css +++ b/packages/ui/src/components/Button/styles.module.css @@ -19,7 +19,6 @@ width: fit-content; max-width: 100%; overflow: hidden; - text-align: center; text-transform: var(--text-transform); line-height: var(--go-ui-line-height-md); color: var(--color-text); @@ -45,7 +44,6 @@ &.primary, &.secondary { min-width: calc(var(--base-spacing) * 6.5); - .children { text-align: center; } diff --git a/packages/ui/src/components/DropdownMenu/styles.module.css b/packages/ui/src/components/DropdownMenu/styles.module.css index 771f56559c..0d13bb15f6 100644 --- a/packages/ui/src/components/DropdownMenu/styles.module.css +++ b/packages/ui/src/components/DropdownMenu/styles.module.css @@ -17,5 +17,5 @@ .dropdown-content { display: flex; flex-direction: column; - padding-left: var(--go-ui-spacing-lg); + padding: var(--go-ui-spacing-sm) 0; } diff --git a/packages/ui/src/components/InputContainer/styles.module.css b/packages/ui/src/components/InputContainer/styles.module.css index 32aa98dfee..392dcf4a8c 100644 --- a/packages/ui/src/components/InputContainer/styles.module.css +++ b/packages/ui/src/components/InputContainer/styles.module.css @@ -10,7 +10,6 @@ padding: 0 var(--go-ui-spacing-sm); .input { - padding-left:12px; height: var(--go-ui-height-compact-status-icon); } } diff --git a/packages/ui/src/components/InputLabel/styles.module.css b/packages/ui/src/components/InputLabel/styles.module.css index a01ba0616e..7cd2d707e4 100644 --- a/packages/ui/src/components/InputLabel/styles.module.css +++ b/packages/ui/src/components/InputLabel/styles.module.css @@ -2,6 +2,7 @@ display: flex; color: var(--go-ui-color-gray-70); gap: var(--go-ui-spacing-xs); + padding-left: 12px; &.disabled { color: var(--go-ui-color-gray-40);