diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index ad77edd13..3bd62474d 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -6,4 +6,5 @@ box-shadow: var(--space-0) var(--space-25) var(--space-125) var(--space-0) var(--color-transparent-10020, rgba(0, 0, 0, 0.2)); z-index: 400; + box-sizing: border-box; } diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss index a821e27a0..3ddd365c6 100644 --- a/src/components/Input/Input.scss +++ b/src/components/Input/Input.scss @@ -12,7 +12,7 @@ align-items: center; gap: var(--space-50); padding: var(--space-150); - width: 200px; + width: 100%; &::placeholder { color: var(--color-text-subtlest); diff --git a/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx b/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx index 0caa9b427..557937807 100644 --- a/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx +++ b/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx @@ -12,7 +12,7 @@ import { IconButton } from '../../Buttons'; export interface Props extends PillButtonBaseProps { /** Label/indicator in case of multiple selection, such as `+2` for instance */ - additionalContentLabel?: string; + additionalContentLabel?: React.ReactNode; /** Tooltip content to be shown when multiple selections are shown */ additionalContentTooltip?: React.ReactNode; /** Props needed for rendering optional priority selector */ @@ -99,9 +99,9 @@ export const PillButtonEnhanced = React.forwardRef( {!!content && ( <> : - - {content} - + + {content} + )} {additionalContentLabel && ( diff --git a/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap b/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap index 3ccfdf924..7d1eeedcf 100644 --- a/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap +++ b/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap @@ -29,7 +29,6 @@ exports[` component in active, collapsed state (with content This pill is in use @@ -92,7 +91,6 @@ exports[` component in active, open state (content and isOpe This pill is in use @@ -256,7 +254,6 @@ exports[` component with additional props should render corr This pill is in use @@ -320,7 +317,6 @@ exports[` component with additional props should set style a This pill is in use diff --git a/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap b/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap index b396b2c2b..9a4b10850 100644 --- a/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap +++ b/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap @@ -179,7 +179,6 @@ exports[` component with enhanced button variant should open dropdown when Pill content @@ -276,7 +275,6 @@ exports[` component with enhanced button variant should render correctly 1 Pill content diff --git a/src/components/PrioritySelector/PrioritySelector.scss b/src/components/PrioritySelector/PrioritySelector.scss index fec8bed29..b5d4d87d6 100644 --- a/src/components/PrioritySelector/PrioritySelector.scss +++ b/src/components/PrioritySelector/PrioritySelector.scss @@ -47,8 +47,8 @@ $icon-status-colors: ( disabled: var(--color-icon-success-disabled), ), important: ( - normal: var(--color-icon-caution-default), - disabled: var(--color-icon-caution-disabled), + normal: var(--color-icon-cautious-default), + disabled: var(--color-icon-cautious-disabled), ), optional: ( normal: var(--color-icon-subtle), @@ -106,13 +106,8 @@ $icon-status-colors: ( background-color: white; z-index: 600; - &--fixedWidth{ + &--fixedWidth { width: 232px; } } - } - - - - diff --git a/src/components/SelectComponents/Autosuggest/Autosuggest.tsx b/src/components/SelectComponents/Autosuggest/Autosuggest.tsx index 2d80bb821..3fb867905 100644 --- a/src/components/SelectComponents/Autosuggest/Autosuggest.tsx +++ b/src/components/SelectComponents/Autosuggest/Autosuggest.tsx @@ -53,6 +53,10 @@ export interface Props /** render custom list values */ customListRender?: (suggestions) => React.ReactNode; clearInputAfterSelection?: boolean; + /** determines if the suggestion list should be rendered using a React Portal + * to the dropdown needs to bypass parent element clipping, overflow, or z-index issues. + */ + shouldRenderWithPortal?: boolean; } const { elem } = bem('Autosuggest', styles); @@ -94,6 +98,7 @@ export function Autosuggest({ iconNode, customListRender, clearInputAfterSelection = true, + shouldRenderWithPortal = false, ...rest }: Props) { const inputRef = inputRefFromProps || React.createRef(); @@ -258,6 +263,7 @@ export function Autosuggest({ initInputValue={initInputValue} clearInputAfterSelection={clearInputAfterSelection} autoFocus={isFocused} + shouldRenderWithPortal={shouldRenderWithPortal} /> ); } diff --git a/src/components/SelectComponents/Combobox/Combobox.tsx b/src/components/SelectComponents/Combobox/Combobox.tsx index 46a282750..664b54b8f 100644 --- a/src/components/SelectComponents/Combobox/Combobox.tsx +++ b/src/components/SelectComponents/Combobox/Combobox.tsx @@ -32,6 +32,10 @@ export interface Props upArrowLabel?: string; /** enable ListOptimizer component for decreasing render time */ useOptimizeListRender?: boolean; + /** determines if the suggestion list should be rendered using a React Portal + * to the dropdown needs to bypass parent element clipping, overflow, or z-index issues. + */ + shouldRenderWithPortal?: boolean; } /** @@ -61,6 +65,7 @@ export function Combobox({ upArrowLabel, downArrowLabel, useOptimizeListRender, + shouldRenderWithPortal = false, ...rest }: Props) { const inputRef = inputRefFromProps || React.createRef(); @@ -130,6 +135,7 @@ export function Combobox({ showArrow downArrowLabel={downArrowLabel} upArrowLabel={upArrowLabel} + shouldRenderWithPortal={shouldRenderWithPortal} /> ); } diff --git a/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx b/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx index 0bbfb2b1b..7e5c02120 100644 --- a/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx +++ b/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx @@ -24,6 +24,10 @@ export interface Props extends BasicSelectProps, SelectInputFieldProps { downArrowLabel?: string; /** Up arrow name for ARIA labelling, it is used when the component is focused and options are shown */ upArrowLabel?: string; + /** determines if the suggestion list should be rendered using a React Portal + * to the dropdown needs to bypass parent element clipping, overflow, or z-index issues. + */ + shouldRenderWithPortal?: boolean; } /** @@ -53,6 +57,7 @@ export function ComboboxMulti({ downArrowLabel, useOptimizeListRender = false, inputAttrs = {}, + shouldRenderWithPortal = false, ...rest }: Props) { const inputRef = inputRefFromProps || React.createRef(); @@ -141,6 +146,7 @@ export function ComboboxMulti({ focusedRenderer={renderFocused} blurredRenderer={renderBlurred} keepExpandedAfterSelection + shouldRenderWithPortal={shouldRenderWithPortal} /> ); } diff --git a/src/components/SelectComponents/Select/Select.tsx b/src/components/SelectComponents/Select/Select.tsx index 2a6cc30a1..a66ecb85d 100644 --- a/src/components/SelectComponents/Select/Select.tsx +++ b/src/components/SelectComponents/Select/Select.tsx @@ -42,6 +42,10 @@ export interface Props extends Omit, 'on rootRef?: React.RefObject; /** items list ref */ listRef?: React.RefObject; + /** determines if the suggestion list should be rendered using a React Portal + * to the dropdown needs to bypass parent element clipping, overflow, or z-index issues. + */ + shouldRenderWithPortal?: boolean; } /** @@ -67,6 +71,7 @@ export function Select({ onFocus = undefined, onClear = undefined, listRef = undefined, + shouldRenderWithPortal = false, ...rest }: Props) { const focusElRef = React.useRef(); @@ -124,6 +129,7 @@ export function Select({ onBlur={onBlur} onFocus={onFocus} onClearAllSelected={onClear} + shouldRenderWithPortal={shouldRenderWithPortal} listRenderer={(listProps) => ( ({ highlightOnEmptyInput = true, initInputValue, autoFocus = false, + shouldRenderWithPortal = false, ...rest }: Props) { const [inputRef, setInputRef] = React.useState( @@ -48,6 +50,23 @@ export function SelectBase({ listRefFromProps || React.createRef() ); + const [dropdownStyles, setDropdownStyles] = React.useState({ + top: 0, + left: 0, + width: 0, + }); + + const calculateDropdownPosition = () => { + if (rootRef.current) { + const rect = rootRef.current.getBoundingClientRect(); + setDropdownStyles({ + top: rect.bottom + window.scrollY, // Position below the input field + left: rect.left + window.scrollX, // Align left with the input field + width: rootRef.current.offsetWidth, // Match the width of the input field + }); + } + }; + const [inputValue, setInputValue] = React.useState(initInputValue || ''); const [inputValueRecall, setInputValueRecall] = React.useState(''); const [focused, setFocused] = React.useState(autoFocus); @@ -85,6 +104,36 @@ export function SelectBase({ setInputValue(initInputValue || ''); }, [setInputValue, initInputValue]); + // Ensure the calculation is triggered after the DOM update + const calculateDropdownPositionAfterRender = () => { + requestAnimationFrame(() => calculateDropdownPosition()); + }; + + // Recalculate position when focused or opened + React.useEffect(() => { + if (focused) { + calculateDropdownPositionAfterRender(); + } + }, [focused]); + + // Recalculate on resize, scroll, or input changes + React.useEffect(() => { + const handleResizeOrScroll = () => calculateDropdownPositionAfterRender(); + + window.addEventListener('resize', handleResizeOrScroll); + window.addEventListener('scroll', handleResizeOrScroll); + + return () => { + window.removeEventListener('resize', handleResizeOrScroll); + window.removeEventListener('scroll', handleResizeOrScroll); + }; + }, []); + + // Trigger position update on input value changes + React.useEffect(() => { + calculateDropdownPositionAfterRender(); + }, [inputValue]); + const handleBlur = () => { setFocused(false); if (isBrowserTabVisible) { @@ -234,57 +283,93 @@ export function SelectBase({ getToggleButtonProps, highlightedIndex, openMenu, - }) => ( -
- - {focused && !disabled - ? focusedRenderer({ - getInputProps: getInputPropsWithUpdatedRef(getInputProps), - getToggleButtonProps, - onBlur: handleBlur, - onFocus: handleInputOnFocus(openMenu), - highlightedIndex, - inputValue, - }) - : blurredRenderer({ - getInputProps, - getToggleButtonProps, - onFocus: handleInputOnFocus(openMenu), - onBlur: handleBlur, - })} - { + const listContent = + focused && !disabled + ? listRenderer({ + suggestionToString, + suggestions, + getItemProps, + highlightedIndex, + inputValue: inputValueRecall, + }) + : null; + + const dropdownProps = getMenuProps({ + ...elem('list', stateAndProps), + ref: listRef.current, + isControlledNavigation: true, + }); + + return ( +
+ {focused && !disabled - ? listRenderer({ - suggestionToString, - suggestions, - getItemProps, + ? focusedRenderer({ + getInputProps: getInputPropsWithUpdatedRef(getInputProps), + getToggleButtonProps, + onBlur: handleBlur, + onFocus: handleInputOnFocus(openMenu), highlightedIndex, - inputValue: inputValueRecall, + inputValue, }) - : null} - - -
- )} + : blurredRenderer({ + getInputProps, + getToggleButtonProps, + onFocus: handleInputOnFocus(openMenu), + onBlur: handleBlur, + })} + + {shouldRenderWithPortal ? ( + focused && + !disabled && + createPortal( + 0 && + '1px solid var(--color-neutral-30)', + borderRadiusLeftBottom: 'var(--border-radius)', + borderRadiusRightBottom: 'var(--border-radius)', + boxSizing: 'border-box', + }} + > + {listContent} + , + document.body + ) + ) : ( + {listContent} + )} + +
+ ); + }} ); diff --git a/src/components/SelectComponents/SelectBase/interfaces.ts b/src/components/SelectComponents/SelectBase/interfaces.ts index c608ee92c..3b0f2555b 100644 --- a/src/components/SelectComponents/SelectBase/interfaces.ts +++ b/src/components/SelectComponents/SelectBase/interfaces.ts @@ -102,4 +102,8 @@ export interface Props blurredRenderer: BlurredRendererHelpers; /** highlighting for first item will be added if input is empty */ highlightOnEmptyInput?: boolean; + /** determines if the suggestion list should be rendered using a React Portal + * to the dropdown needs to bypass parent element clipping, overflow, or z-index issues. + */ + shouldRenderWithPortal?: boolean; } diff --git a/src/components/SelectedItemBadge/SelectedItemBadge.scss b/src/components/SelectedItemBadge/SelectedItemBadge.scss index fe5598226..c41b7d402 100644 --- a/src/components/SelectedItemBadge/SelectedItemBadge.scss +++ b/src/components/SelectedItemBadge/SelectedItemBadge.scss @@ -1,70 +1,3 @@ -@use 'sass:map'; - -@mixin common-button-style( - $hoverColor: var(--color-background-neutral-subtlest-hover), - $activeColor: var(--color-background-neutral-subtlest-pressed) -) { - & { - width: var(--space-400); - height: var(--space-400); - align-items: center; - background-color: var(--transparent); - cursor: pointer; - display: flex; - flex-shrink: 0; - justify-content: center; - } - - &:hover:not([disabled]) { - background-color: $hoverColor; - } - &:active:not([disabled]) { - background-color: $activeColor; - } - - &[disabled] { - cursor: not-allowed; - } -} - -@mixin selected-state( - $selectedColor: var(--color-background-selected-subtlest-default), - $hoverColor: var(--color-background-selected-subtlest-hover), - $activeColor: var(--color-background-selected-subtlest-pressed) -) { - & { - background-color: $selectedColor; - } - &:hover:not([disabled]) { - background-color: $hoverColor; - } - &:active:not([disabled]) { - background-color: $activeColor; - } - &[disabled] { - background-color: $selectedColor; - } -} - -$icon-status-colors: ( - mandatory: ( - normal: var(--color-icon-success-default), - disabled: var(--color-icon-success-disabled), - ), - important: ( - normal: var(--color-icon-cautious-default), - disabled: var(--color-icon-cautious-disabled), - ), - optional: ( - normal: var(--color-icon-subtle), - disabled: var(--color-icon-disabled), - ), - exclude: ( - normal: var(--color-icon-critical-default), - disabled: var(--color-icon-critical-disabled), - ), -); - .SelectedItemBadge { width: 100%; height: var(--space-400); @@ -72,30 +5,7 @@ $icon-status-colors: ( border-radius: var(--space-100); display: flex; align-items: center; - overflow: hidden; - - &__priorityButton { - padding: 0; - border: 0; - border-right: 1px solid var(--color-border-subtle); - - @include common-button-style(); - } - - &__icon { - height: 20px; - width: 20px; - - @each $status, $colors in $icon-status-colors { - &--#{$status} { - fill: map.get($colors, normal); - - &[disabled] { - fill: map.get($colors, disabled); - } - } - } - } + box-sizing: border-box; &__optionText { max-width: var(--space-600); @@ -109,34 +19,83 @@ $icon-status-colors: ( &__optionButton { width: 100%; + height: 100%; padding: 0 var(--space-100); + border-radius: inherit; + background-color: var(--transparent); border: 0; - flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; gap: var(--space-50); + flex-grow: 1; - &[disabled] { - .SelectedItemBadge__optionText { - color: var(--color-text-info-disabled); - } + cursor: pointer; + + &:focus-visible { + box-shadow: 0 0 0 var(--space-25) var(--color-info-20, #99caff); + outline: none; } - @include common-button-style(); - } + &:hover:not([disabled]) { + background-color: var(--color-background-neutral-subtlest-hover); + } + + &:active:not([disabled]) { + background-color: var(--color-background-neutral-subtlest-pressed); + } + + &[disabled] .SelectedItemBadge__optionText { + color: var(--color-text-info-disabled); + } + + &--hasPriorityList { + border-left: 1px solid var(--color-border-subtlest); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + &--onDelete { + border-right: 1px solid var(--color-border-subtlest); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &[data-state='open'] { + pointer-events: auto; + background-color: var(--color-background-selected-subtlest-default); + + &:hover { + background-color: var(--color-background-selected-subtlest-hover); + } + + &:active:not([disabled]) { + background-color: var(--color-background-selected-subtlest-pressed); + } - &__priorityButton--isSelected, - &__optionButton--isSelected { - @include selected-state(); + &[disabled] { + background-color: var(--color-background-selected-subtlest-default); + } + } } &__valueContainer { width: 100%; + height: 100%; padding: 0 var(--space-100); - float: left; display: flex; + align-items: center; justify-content: center; gap: var(--space-50); overflow: auto; cursor: default; + + &--hasPriorityList { + border-left: 1px solid var(--color-border-subtle); + } + + &--onDelete { + border-right: 1px solid var(--color-border-subtle); + } } &__valueText { @@ -146,34 +105,37 @@ $icon-status-colors: ( white-space: nowrap; } - .badgeDropdownList { + &__badgeDropdownList { width: 100%; border-radius: var(--space-100); + z-index: 600; overflow: hidden; } - .badgeListItem { + &__badgeListItem { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-100); } - &__deleteButton { - border: 0; - border-left: 1px solid var(--color-border-subtle); - padding: 0; + .SelectedItemBadge__priorityButton { + padding: var(--space-100); + border-radius: var(--space-100) 0 0 var(--space-100); + flex-shrink: 0; + } + + .SelectedItemBadge__deleteButton { + padding: var(--space-100); + border-radius: 0 var(--space-100) var(--space-100) 0; + flex-shrink: 0; & svg { fill: var(--color-icon-subtle); } - &[disabled] { - & svg { - fill: var(--color-icon-disabled); - } + &[disabled] & svg { + fill: var(--color-icon-disabled); } - - @include common-button-style(); } } diff --git a/src/components/SelectedItemBadge/SelectedItemBadge.tsx b/src/components/SelectedItemBadge/SelectedItemBadge.tsx index 703b10da8..8ace62ae3 100644 --- a/src/components/SelectedItemBadge/SelectedItemBadge.tsx +++ b/src/components/SelectedItemBadge/SelectedItemBadge.tsx @@ -1,20 +1,26 @@ import * as React from 'react'; import Close from '@material-design-icons/svg/round/close.svg'; - import { bem } from '../../utils'; import { Text } from '../Text'; import styles from './SelectedItemBadge.scss'; -import { DropdownContent, DropdownRoot, DropdownTrigger, SingleSelectItemProps } from '../Dropdown'; +import { + DropdownContent, + DropdownPortal, + DropdownRoot, + DropdownTrigger, + SingleSelectItemProps, +} from '../Dropdown'; import { PrioritySelector, PrioritySelectorProps } from '../PrioritySelector'; +import { IconButton } from '../Buttons'; -export interface Props +export interface Props extends Omit, 'onChange'> { /** Children nodes to be rendered within the Dropdown, * which is triggered by the main button * */ children?: ( - | React.ReactElement> - | React.ReactElement>[] + | React.ReactElement> + | React.ReactElement>[] )[]; /** Label of the currently selected option item from filter */ label: React.ReactNode; @@ -36,8 +42,8 @@ export interface Props const { block, elem } = bem('SelectedItemBadge', styles); -export const SelectedItemBadge = React.forwardRef>( - ( +export const SelectedItemBadge = React.forwardRef( + ( { children, label, @@ -49,29 +55,48 @@ export const SelectedItemBadge = React.forwardRef>( priority, refElement, ...rest - }, - ref + }: Props, + ref: React.Ref ) => { + const [isOpen, setIsOpen] = React.useState(false); + + const handleOpenStateChange = (open: boolean) => { + setIsOpen(open); + }; + const badgeRef = React.useRef(null); + const triggerRef = React.useRef(null); + const hasPriorityList = priority && priority.list.length > 0; const handleOnDelete = (e: React.KeyboardEvent | React.MouseEvent) => { e.stopPropagation(); onDelete?.(e); }; - return (
- {hasPriorityList && } + {hasPriorityList && ( + + )} {children ? ( - - + + - - {children} - + + + {children} + + ) : ( -
+
{label} @@ -105,17 +137,20 @@ export const SelectedItemBadge = React.forwardRef>(
)} {onDelete && ( - + + )}
); } -); +) as ( + p: Props & { ref?: React.Ref } +) => React.ReactElement; diff --git a/stories/atoms/Dropdown.stories.tsx b/stories/atoms/Dropdown.stories.tsx index ee812e434..000f94952 100644 --- a/stories/atoms/Dropdown.stories.tsx +++ b/stories/atoms/Dropdown.stories.tsx @@ -317,11 +317,11 @@ export const _DropdownWithSelectedItemBadge: Story = {
- priority={ priority && { ...priority, + list: priorityList, selectedItem: selectedPriorityItem, onChange: handlePriorityChange, } diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx index 317b7bf56..7df14c351 100644 --- a/stories/molecules/Pill.stories.tsx +++ b/stories/molecules/Pill.stories.tsx @@ -8,8 +8,15 @@ import { PriorityItemType, SelectedItemBadge, SingleSelectItem, + Autosuggest, } from '@textkernel/oneui'; import { DropdownMenu } from '@radix-ui/react-dropdown-menu'; +import { + SUGGESTION_TO_STRING, + SUGGESTIONS, +} from '@textkernel/oneui/components/SelectComponents/Autosuggest/__mocks__/suggestions'; + +type TSuggestion = { name: string }; const DummyComponent = () => ( <> @@ -81,6 +88,10 @@ export const _Pill: Story = { label: 'Mandatory', value: 'required', }); + const [inputValue, setInputValue] = React.useState(''); + const [selectedValues, setSelectedValues] = React.useState([]); + + const inputRef = React.createRef(); const handlePrioritySelect = (selectedItem: PriorityItemType) => { console.log('new item selected: ', selectedItem); @@ -88,10 +99,36 @@ export const _Pill: Story = { }; const badgeOption = ['some', 'other', 'options']; + const handleOptionChange = (option) => { console.log('SelectedItemBadge option was selected: ', option); }; + // const handleDropdownStateChange = (isOpen) => {}; + + const getSuggestions = (): TSuggestion[] => + // filtering suggestions from some other source + SUGGESTIONS.filter((item: TSuggestion) => + // suggestion is relevant to input + item.name.toLocaleLowerCase().includes(inputValue.toLocaleLowerCase()) + ); + const onInputValueChange = (value: string) => { + console.log(`onInputValueChange was called with ${value}`); + setInputValue(value); + }; + + const onSelectionAdd = (item: TSuggestion) => { + console.log(`onSelectionAdd was called with {name: ${item.name}}`); + const newSelectedValues = [...selectedValues, item.name]; + setSelectedValues(newSelectedValues); + inputRef.current?.blur(); + }; + + const onBlur = () => { + console.log('onBlur was called'); + setInputValue(''); + }; + return (
{ console.log('onClose called'); }} + // @ts-ignore + priority={ + args.variant === 'enhanced' && selectedValues.length > 0 + ? { + onChange: handlePrioritySelect, + selectedItem: prioritySelected, + list: priorityList, + buttonLabel: 'priorityButton', + } + : undefined + } > - +
+ +
+ {selectedValues.map((value) => ( + + ))} +
+
@@ -125,25 +211,6 @@ export const _Pill: Story = { }} >
- - {badgeOption.map((option) => ( - handleOptionChange(option)} - isSelected={option === 'Java'} - > - {option} - - ))} -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam a fuga beatae reiciendis earum, omnis eius accusantium eveniet quam @@ -163,6 +230,25 @@ export const _Pill: Story = { veritatis eligendi magnam.

+ + {badgeOption.map((option) => ( + handleOptionChange(option)} + isSelected={option === 'Java'} + > + {option} + + ))} +
); diff --git a/stories/organisms/Autosuggest.stories.tsx b/stories/organisms/Autosuggest.stories.tsx index 72b5ec186..dd98805dc 100644 --- a/stories/organisms/Autosuggest.stories.tsx +++ b/stories/organisms/Autosuggest.stories.tsx @@ -83,6 +83,7 @@ export const Multiselect: Story = { onSelectionAdd={onSelectionAdd} onSelectionRemove={onSelectionRemove} onClearAllSelected={onClearAllSelected} + shouldRenderWithPortal />
); diff --git a/stories/organisms/Combobox.stories.tsx b/stories/organisms/Combobox.stories.tsx index 27f1b17ee..4e28398af 100644 --- a/stories/organisms/Combobox.stories.tsx +++ b/stories/organisms/Combobox.stories.tsx @@ -66,6 +66,7 @@ export const _Combobox: Story = { onBlur={onBlur} onSelectionAdd={onSelectionAdd} onInputValueChange={onInputValueChange} + shouldRenderWithPortal /> ); diff --git a/stories/organisms/SelectedItemBadge.stories.tsx b/stories/organisms/SelectedItemBadge.stories.tsx index 8b7dd88ed..e4aa3571f 100644 --- a/stories/organisms/SelectedItemBadge.stories.tsx +++ b/stories/organisms/SelectedItemBadge.stories.tsx @@ -38,7 +38,11 @@ export const _SelectedItemBadge: Story = { list: priorityList, buttonLabel: 'Priority', onChange: () => {}, - selectedItem: { priority: 'mandatory', label: 'Mandatory', value: 'required' }, + selectedItem: { + priority: 'mandatory', + label: 'Mandatory', + value: 'required', + }, }, buttonLabel: 'Select radius', }, @@ -46,7 +50,7 @@ export const _SelectedItemBadge: Story = { const [selectedPriorityItem, setSelectedPriorityItem] = React.useState< PriorityItemType >( - args.priority?.selectedItem || { + (args.priority?.selectedItem as PriorityItemType) || { priority: 'mandatory', label: 'Mandatory', value: 'required', @@ -80,11 +84,12 @@ export const _SelectedItemBadge: Story = { return (
- {...args} priority={ args.priority && { ...args.priority, + list: priorityList, selectedItem: selectedPriorityItem, onChange: handlePriorityChange, } @@ -124,7 +129,7 @@ export const _SelectedItemBadgeMultiSelect: Story = { const [selectedPriorityItem, setSelectedPriorityItem] = React.useState< PriorityItemType >( - args.priority?.selectedItem || { + (args.priority?.selectedItem as PriorityItemType) || { priority: 'mandatory', label: 'Mandatory', value: 'required', @@ -212,6 +217,7 @@ export const _SelectedItemBadgeMultiSelect: Story = { priority={ args.priority && { ...args.priority, + list: priorityList, selectedItem: selectedPriorityItem, onChange: handlePriorityChange, } @@ -331,7 +337,7 @@ export const SelectedItemBadgeWithoutChildren: Story = { const [selectedPriorityItem, setSelectedPriorityItem] = React.useState< PriorityItemType >( - args.priority?.selectedItem || { + (args.priority?.selectedItem as PriorityItemType) || { priority: 'mandatory', label: 'Mandatory', value: 'required', @@ -363,6 +369,7 @@ export const SelectedItemBadgeWithoutChildren: Story = { priority={ args.priority && { ...args.priority, + list: priorityList, selectedItem: selectedPriorityItem, onChange: handlePriorityChange, } @@ -391,7 +398,7 @@ export const SelectedItemBadgeWithoutCloseButton: Story = { const [selectedPriorityItem, setSelectedPriorityItem] = React.useState< PriorityItemType >( - args.priority?.selectedItem || { + (args.priority?.selectedItem as PriorityItemType) || { priority: 'mandatory', label: 'Mandatory', value: 'required', @@ -424,6 +431,7 @@ export const SelectedItemBadgeWithoutCloseButton: Story = { priority={ args.priority && { ...args.priority, + list: priorityList, selectedItem: selectedPriorityItem, onChange: handlePriorityChange, }