From b330279ceb541126f5cd526efd0ab9212aa72ef5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Thu, 16 May 2024 13:45:06 +0200 Subject: [PATCH] Feat(web-react): Use renamed Dropdown classes #DS-1248 --- .../src/components/Dropdown/Dropdown.tsx | 2 +- .../components/Dropdown/DropdownPopover.tsx | 2 +- .../components/Dropdown/DropdownTrigger.tsx | 2 +- .../Dropdown/UncontrolledDropdown.tsx | 2 +- .../Dropdown/__tests__/Dropdown.test.tsx | 8 ++++---- .../__tests__/DropdownPopover.test.tsx | 6 +++--- .../__tests__/useDropdownStyleProps.test.ts | 10 +++++----- .../Dropdown/useDropdownStyleProps.ts | 20 +++++++++---------- 8 files changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/web-react/src/components/Dropdown/Dropdown.tsx b/packages/web-react/src/components/Dropdown/Dropdown.tsx index 67531c4a20..5e86befd9f 100644 --- a/packages/web-react/src/components/Dropdown/Dropdown.tsx +++ b/packages/web-react/src/components/Dropdown/Dropdown.tsx @@ -43,7 +43,7 @@ export const Dropdown = (props: SpiritDropdownProps) => {
diff --git a/packages/web-react/src/components/Dropdown/DropdownPopover.tsx b/packages/web-react/src/components/Dropdown/DropdownPopover.tsx index 9f83d9c9b2..bedcf15980 100644 --- a/packages/web-react/src/components/Dropdown/DropdownPopover.tsx +++ b/packages/web-react/src/components/Dropdown/DropdownPopover.tsx @@ -17,7 +17,7 @@ export const DropdownPopover = (props: DropdownPopoverProps) => { return (
{ id={id} {...rest} ref={triggerRef} - className={classNames(classProps.triggerClassName, styleProps.className)} + className={classNames(classProps.trigger, styleProps.className)} style={styleProps.style} {...triggerProps} {...otherProps} diff --git a/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx b/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx index f36ff3e9f9..e40d79a3f3 100644 --- a/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx +++ b/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx @@ -22,7 +22,7 @@ export const UncontrolledDropdown = (props: UncontrolledDropdownProps) => { ref={dropdownRef} {...styleProps} {...otherProps} - className={classNames(classProps.wrapperClassName, styleProps.className)} + className={classNames(classProps.root, styleProps.className)} > {children}
diff --git a/packages/web-react/src/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/web-react/src/components/Dropdown/__tests__/Dropdown.test.tsx index 7e45d1a66d..d49704b69d 100644 --- a/packages/web-react/src/components/Dropdown/__tests__/Dropdown.test.tsx +++ b/packages/web-react/src/components/Dropdown/__tests__/Dropdown.test.tsx @@ -9,7 +9,7 @@ import DropdownPopover from '../DropdownPopover'; import DropdownTrigger from '../DropdownTrigger'; describe('Dropdown', () => { - classNamePrefixProviderTest(Dropdown, 'DropdownWrapper'); + classNamePrefixProviderTest(Dropdown, 'Dropdown'); stylePropsTest( (props: Record) => ( @@ -18,7 +18,7 @@ describe('Dropdown', () => { 'test-dropdown', ); - restPropsTest(Dropdown, '.DropdownWrapper'); + restPropsTest(Dropdown, '.Dropdown'); it('should render text children', () => { const dom = render( @@ -28,7 +28,7 @@ describe('Dropdown', () => { , ); const trigger = dom.container.querySelector('button') as HTMLElement; - const element = dom.container.querySelector('.Dropdown') as HTMLElement; + const element = dom.container.querySelector('.DropdownPopover') as HTMLElement; expect(trigger.textContent).toBe('Trigger'); expect(element.textContent).toBe('Hello World'); @@ -43,7 +43,7 @@ describe('Dropdown', () => { Hello World , ); - const element = dom.container.querySelector('.Dropdown') as HTMLElement; + const element = dom.container.querySelector('.DropdownPopover') as HTMLElement; const trigger = dom.container.querySelector('button') as HTMLElement; expect(element).toHaveClass('is-open'); diff --git a/packages/web-react/src/components/Dropdown/__tests__/DropdownPopover.test.tsx b/packages/web-react/src/components/Dropdown/__tests__/DropdownPopover.test.tsx index 87f6acf067..f93721ab21 100644 --- a/packages/web-react/src/components/Dropdown/__tests__/DropdownPopover.test.tsx +++ b/packages/web-react/src/components/Dropdown/__tests__/DropdownPopover.test.tsx @@ -7,15 +7,15 @@ import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; import DropdownPopover from '../DropdownPopover'; describe('DropdownPopover', () => { - classNamePrefixProviderTest(DropdownPopover, 'Dropdown'); + classNamePrefixProviderTest(DropdownPopover, 'DropdownPopover'); stylePropsTest(DropdownPopover); - restPropsTest(DropdownPopover, '.Dropdown'); + restPropsTest(DropdownPopover, '.DropdownPopover'); it('should have children', () => { const dom = render(Popover); - const popover = dom.container.querySelector('.Dropdown') as HTMLElement; + const popover = dom.container.querySelector('.DropdownPopover') as HTMLElement; expect(popover).toHaveTextContent('Popover'); }); diff --git a/packages/web-react/src/components/Dropdown/__tests__/useDropdownStyleProps.test.ts b/packages/web-react/src/components/Dropdown/__tests__/useDropdownStyleProps.test.ts index dda6a51072..fd1201fb19 100644 --- a/packages/web-react/src/components/Dropdown/__tests__/useDropdownStyleProps.test.ts +++ b/packages/web-react/src/components/Dropdown/__tests__/useDropdownStyleProps.test.ts @@ -5,8 +5,8 @@ describe('useDropdownStyleProps', () => { it('should return defaults', () => { const { result } = renderHook(() => useDropdownStyleProps()); - expect(result.current.classProps.contentClassName).toBe('Dropdown'); - expect(result.current.classProps.wrapperClassName).toBe('DropdownWrapper'); + expect(result.current.classProps.root).toBe('Dropdown'); + expect(result.current.classProps.popover).toBe('DropdownPopover'); }); it('should render as open', () => { @@ -15,8 +15,8 @@ describe('useDropdownStyleProps', () => { }; const { result } = renderHook(() => useDropdownStyleProps(props)); - expect(result.current.classProps.contentClassName).toBe('Dropdown is-open'); - expect(result.current.classProps.triggerClassName).toBe('is-expanded'); + expect(result.current.classProps.popover).toBe('DropdownPopover is-open'); + expect(result.current.classProps.trigger).toBe('is-expanded'); }); it('should transfer additional props', () => { @@ -26,7 +26,7 @@ describe('useDropdownStyleProps', () => { }; const { result } = renderHook(() => useDropdownStyleProps(props)); - expect(result.current.classProps.contentClassName).toBe('Dropdown'); + expect(result.current.classProps.popover).toBe('DropdownPopover'); expect(result.current.props).toEqual({ transferProp: 'test' }); }); }); diff --git a/packages/web-react/src/components/Dropdown/useDropdownStyleProps.ts b/packages/web-react/src/components/Dropdown/useDropdownStyleProps.ts index ba5cb8854d..83b7cc69f4 100644 --- a/packages/web-react/src/components/Dropdown/useDropdownStyleProps.ts +++ b/packages/web-react/src/components/Dropdown/useDropdownStyleProps.ts @@ -4,9 +4,9 @@ import { DropdownStyleProps } from '../../types'; export interface UseDropdownStylePropsReturn { classProps: { - wrapperClassName: string; - triggerClassName: string; - contentClassName: string; + root: string; + trigger: string; + popover: string; }; props: DropdownStyleProps; } @@ -14,19 +14,19 @@ export interface UseDropdownStylePropsReturn { export const useDropdownStyleProps = (props: DropdownStyleProps = { isOpen: false }): UseDropdownStylePropsReturn => { const { isOpen, ...modifiedProps } = props; - const dropdownClass = useClassNamePrefix('Dropdown'); - const dropdownWrapperClass = `${dropdownClass}Wrapper`; + const dropdownRootClass = useClassNamePrefix('Dropdown'); + const dropdownPopoverClass = `${dropdownRootClass}Popover`; const expandedClass = isOpen ? 'is-expanded' : ''; const openClass = isOpen ? 'is-open' : ''; - const dropdownClassName = classNames(dropdownClass, openClass); - const triggerClassName = classNames(expandedClass); + const popoverClass = classNames(dropdownPopoverClass, openClass); + const triggerClass = classNames(expandedClass); return { classProps: { - wrapperClassName: dropdownWrapperClass, - triggerClassName, - contentClassName: dropdownClassName, + root: dropdownRootClass, + trigger: triggerClass, + popover: popoverClass, }, props: modifiedProps, };