From c5bc5fd7576a70111e3243a6a823d041652c1777 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 7 Sep 2024 02:44:08 -0400 Subject: [PATCH 1/3] chore(release): publish (#843) - @czi-sds/components@21.1.0 - @czi-sds/data-viz@0.10.1 Co-authored-by: masoudmanson --- packages/components/CHANGELOG.md | 11 +++++++++++ packages/components/package.json | 2 +- packages/data-viz/CHANGELOG.md | 6 ++++++ packages/data-viz/package.json | 2 +- 4 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 963607012..bae50edc5 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [21.1.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.0.0...@czi-sds/components@21.1.0) (2024-09-07) + +### Bug Fixes + +- **accordion:** defaultExpanded now works as expected ([#838](https://github.com/chanzuckerberg/sci-components/issues/838)) ([73a7837](https://github.com/chanzuckerberg/sci-components/commit/73a7837ce9066ce3ac50899c5fde6fbc176e6f96)) +- **swc:** upgrade storybook to v8 and migrate to SWC from babel ([#841](https://github.com/chanzuckerberg/sci-components/issues/841)) ([bcab32f](https://github.com/chanzuckerberg/sci-components/commit/bcab32f178dfbbf1660fddb42fa546abc75bab12)) + +### Features + +- **icons:** added new icons (Pause, Scale, Code) ([#837](https://github.com/chanzuckerberg/sci-components/issues/837)) ([488b50d](https://github.com/chanzuckerberg/sci-components/commit/488b50dd796525611781b99ae95e2d1277c61043)) + # [21.0.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@20.8.0...@czi-sds/components@21.0.0) (2024-08-27) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index 8ff204b32..477d871f7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/components", - "version": "21.0.0", + "version": "21.1.0", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.cjs.d.ts", diff --git a/packages/data-viz/CHANGELOG.md b/packages/data-viz/CHANGELOG.md index 88a0776ed..f604dc729 100644 --- a/packages/data-viz/CHANGELOG.md +++ b/packages/data-viz/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.10.1](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.10.0...@czi-sds/data-viz@0.10.1) (2024-09-07) + +### Bug Fixes + +- **swc:** upgrade storybook to v8 and migrate to SWC from babel ([#841](https://github.com/chanzuckerberg/sci-components/issues/841)) ([bcab32f](https://github.com/chanzuckerberg/sci-components/commit/bcab32f178dfbbf1660fddb42fa546abc75bab12)) + # [0.10.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/data-viz@0.9.2...@czi-sds/data-viz@0.10.0) (2024-08-27) ### Features diff --git a/packages/data-viz/package.json b/packages/data-viz/package.json index 771104803..d97d8abf0 100644 --- a/packages/data-viz/package.json +++ b/packages/data-viz/package.json @@ -1,6 +1,6 @@ { "name": "@czi-sds/data-viz", - "version": "0.10.0", + "version": "0.10.1", "main": "dist/index.cjs.js", "types": "dist/index.cjs.d.ts", "module": "dist/index.esm.js", From a29ce17707f084768a0f267a10ef53002ac78c0e Mon Sep 17 00:00:00 2001 From: Su Li Date: Tue, 17 Sep 2024 09:09:02 -0700 Subject: [PATCH 2/3] fix(ButtonIcon): add sdsStyle to doNotForwardProps (#847) --- packages/components/src/core/ButtonIcon/style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/core/ButtonIcon/style.ts b/packages/components/src/core/ButtonIcon/style.ts index 8f0a1c42b..2c4b3ca63 100644 --- a/packages/components/src/core/ButtonIcon/style.ts +++ b/packages/components/src/core/ButtonIcon/style.ts @@ -163,6 +163,7 @@ const doNotForwardProps = [ "on", "sdsSize", "sdsType", + "sdsStyle", "sdsIcon", "sdsIconProps", ]; From f96cb8d3dbef928c24272580fb32323a963a4299 Mon Sep 17 00:00:00 2001 From: Skyler Moosman <8845503+TheMooseman@users.noreply.github.com> Date: Wed, 18 Sep 2024 14:54:25 -0700 Subject: [PATCH 3/3] feat(DropdownMenu): Adds `titleElement` to `DropdownMenu` (#840) * add option for jsx to title * add storybook * add header component slot * fix(DropdownMenu): Refactor styles and fix snapshot errors --------- Co-authored-by: Masoud Amjadi --- .../__storybook__/index.stories.tsx | 23 +++++ .../__storybook__/stories/default.tsx | 2 +- .../__storybook__/stories/titleElement.tsx | 99 +++++++++++++++++++ .../src/core/DropdownMenu/index.tsx | 11 ++- .../components/src/core/DropdownMenu/style.ts | 28 ++++-- packages/components/src/core/Tooltip/style.ts | 4 +- 6 files changed, 152 insertions(+), 15 deletions(-) create mode 100644 packages/components/src/core/DropdownMenu/__storybook__/stories/titleElement.tsx diff --git a/packages/components/src/core/DropdownMenu/__storybook__/index.stories.tsx b/packages/components/src/core/DropdownMenu/__storybook__/index.stories.tsx index 129e18d0d..853a77bef 100644 --- a/packages/components/src/core/DropdownMenu/__storybook__/index.stories.tsx +++ b/packages/components/src/core/DropdownMenu/__storybook__/index.stories.tsx @@ -9,6 +9,7 @@ import { import { DropdownMenu } from "./stories/default"; import { ScreenshotTestDemo } from "./stories/screenshot"; import { TestDemo } from "./stories/test"; +import { TitleElementDemo } from "./stories/titleElement"; export default { argTypes: { @@ -150,3 +151,25 @@ export const Test = { }, render: (args: Args) => , }; + +export const TitleElement = { + args: { + keepSearchOnSelect: false, + multiple: true, + search: true, + title: DROPDOWN_MENU_LABEL, + }, + parameters: { + controls: { + exclude: DROPDOWN_MENU_EXCLUDED_CONTROLS.filter( + (control) => control !== "search" && control !== "title" + ), + }, + snapshot: { + skip: true, + }, + }, + render: (args: Args) => ( + + ), +}; diff --git a/packages/components/src/core/DropdownMenu/__storybook__/stories/default.tsx b/packages/components/src/core/DropdownMenu/__storybook__/stories/default.tsx index 2fe4a06f7..a8f64997b 100644 --- a/packages/components/src/core/DropdownMenu/__storybook__/stories/default.tsx +++ b/packages/components/src/core/DropdownMenu/__storybook__/stories/default.tsx @@ -33,6 +33,7 @@ export const DropdownMenu = <
{anchorEl ? ( + {...props} label={label} anchorEl={anchorEl} disableCloseOnSelect={false} @@ -47,7 +48,6 @@ export const DropdownMenu = < getOptionDisabled={(option: T) => { return option.name === "Type: feature request"; }} - {...props} /> ) : null}
diff --git a/packages/components/src/core/DropdownMenu/__storybook__/stories/titleElement.tsx b/packages/components/src/core/DropdownMenu/__storybook__/stories/titleElement.tsx new file mode 100644 index 000000000..4b0ca8e4c --- /dev/null +++ b/packages/components/src/core/DropdownMenu/__storybook__/stories/titleElement.tsx @@ -0,0 +1,99 @@ +import { AutocompleteValue } from "@mui/base"; +import { Args } from "@storybook/react"; +import { useEffect, useRef, useState } from "react"; +import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS"; +import { DefaultAutocompleteOption } from "src/core/Autocomplete"; +import Button from "src/core/Button"; +import RawDropdownMenu from "src/core/DropdownMenu"; + +export const TitleElementDemo = < + T extends DefaultAutocompleteOption, + Multiple extends boolean | undefined, + DisableClearable extends boolean | undefined, + FreeSolo extends boolean | undefined, +>( + props: Args +): JSX.Element => { + const { + multiple, + options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS, + search = false, + } = props; + + const anchorRef = useRef(null); + const [anchorEl, setAnchorEl] = useState(null); + + const [value, setValue] = useState< + AutocompleteValue + >(getInitialValue(false)); + + const [pendingValue, setPendingValue] = useState< + AutocompleteValue + >(getInitialValue(true)); + + useEffect(() => { + setAnchorEl(anchorRef.current); + }, []); + + const CustomHeaderComponent = () => ( + + ); + + return ( +
+ {anchorEl ? ( + + {...props} + label="Search" + anchorEl={anchorEl} + open + search={search} + multiple={multiple} + headerComponentSlot={CustomHeaderComponent()} + value={multiple ? pendingValue : value} + onChange={handleChange} + disableCloseOnSelect={multiple} + options={options} + onClickAway={handleClickAway} + groupBy={(option: T) => option.section as string} + width={300} + /> + ) : null} +
+ ); + + function handleClickAway() { + return multiple && setValue(pendingValue); + } + + function handleChange( + _: React.ChangeEvent, + newValue: AutocompleteValue + ) { + if (!multiple) { + setValue( + newValue as AutocompleteValue + ); + } + + return setPendingValue( + newValue as AutocompleteValue + ); + } + + // eslint-disable-next-line sonarjs/no-identical-functions + function getInitialValue( + isMultiple: boolean + ): AutocompleteValue { + return isMultiple + ? ([] as unknown as AutocompleteValue< + T, + Multiple, + DisableClearable, + FreeSolo + >) + : (null as AutocompleteValue); + } +}; diff --git a/packages/components/src/core/DropdownMenu/index.tsx b/packages/components/src/core/DropdownMenu/index.tsx index 6dd48873c..31a1250be 100644 --- a/packages/components/src/core/DropdownMenu/index.tsx +++ b/packages/components/src/core/DropdownMenu/index.tsx @@ -16,6 +16,7 @@ import { SDSTheme } from "src/core/styles"; import { StyleProps, StyledDropdownMenuAutocompleteWrapper, + StyledDropdownMenuHeader, StyledHeaderTitle, StyledPaper, StyledPopper, @@ -44,6 +45,7 @@ interface ExtraDropdownMenuProps extends StyleProps { InputBaseProps?: Partial; PopperBaseProps?: Partial; title?: string; + headerComponentSlot?: JSX.Element; label?: string; anchorEl: HTMLElement | null; PopperComponent?: React.JSXElementConstructor; @@ -113,6 +115,7 @@ const DropdownMenu = < PopperBaseProps = {}, search = false, title, + headerComponentSlot, label = "Search", children, options, @@ -171,10 +174,10 @@ const DropdownMenu = < {...ClickAwayListenerProps} > - {title && ( - {title} - )} - + + {title && {title}} + {headerComponentSlot && <>{headerComponentSlot}} + {anchorEl && ( !doNotForwardProps.includes(prop), })` ${fontHeaderXs} - ${(props: StyledHeaderTitleProps) => { - const { search } = props; - + ${(props: CommonThemeProps) => { const spaces = getSpaces(props); const semanticColors = getSemanticColors(props); return ` color: ${semanticColors?.base?.textPrimary}; padding-right: ${spaces?.m}px; - margin-bottom: ${search ? spaces?.s : spaces?.m}px; `; }} `; @@ -130,3 +123,22 @@ export const StyledPaper = styled(Paper, { `; }} `; + +interface StyledDropdownMenuHeaderProps extends CommonThemeProps { + search: boolean; +} + +export const StyledDropdownMenuHeader = styled("div")` + ${(props: StyledDropdownMenuHeaderProps) => { + const { search } = props; + const spaces = getSpaces(props); + + return ` + display: flex; + align-items: center; + justify-content: space-between; + margin-right: ${spaces?.m}px; + margin-bottom: ${search ? spaces?.s : spaces?.m}px; + `; + }} +`; diff --git a/packages/components/src/core/Tooltip/style.ts b/packages/components/src/core/Tooltip/style.ts index c94203143..de3a2eab2 100644 --- a/packages/components/src/core/Tooltip/style.ts +++ b/packages/components/src/core/Tooltip/style.ts @@ -82,12 +82,12 @@ export const tooltipCss = (props: TooltipExtraProps): string => { return css` &.MuiTooltip-tooltip { + box-shadow: ${shadows?.m}; + ${sdsStyle === "dark" || inverted ? dark(props) : light(props)} ${width === "wide" && sdsStyle === "light" && wide()} ${followCursor === true && tableStyles(props)} - - box-shadow: ${shadows?.m}; } `; };