Merge pull request #9444 from CitizenLabDotCo/revert-9443-master

Revert "Release 2024-11-20"

front/app/component-library/components/CollapsibleContainer/index.tsx

@@ -36,7 +36,7 @@ const TitleButton = styled.button`
 
   &:focus-visible {
     outline: 2px solid black;
-    border-radius: ${({ theme }) => theme.borderRadius};
+    border-radius: ${({ theme }) => `${theme.borderRadius}px`};
   }
 
   ${isRtl`

front/app/component-library/index.tsx

@@ -25,7 +25,6 @@ import CardButton from './components/CardButton';
 import Checkbox from './components/Checkbox';
 import CheckboxWithLabel from './components/CheckboxWithLabel';
 import CollapsibleContainer from './components/CollapsibleContainer';
-import ColorIndicator from './components/ColorIndicator';
 import ColorPickerInput, {
   Props as ColorPickerInputProps,
 } from './components/ColorPickerInput';
@@ -153,7 +152,6 @@ export {
   Badge,
   Accordion,
   CollapsibleContainer,
-  ColorIndicator,
   CardButton,
   Dropdown,
   DropdownListItem,

front/app/components/FilterBoxes/StatusFilter.tsx

@@ -1,14 +1,6 @@
 import React, { memo, useCallback, MouseEvent } from 'react';
 
-import {
-  fontSizes,
-  isRtl,
-  Icon,
-  Box,
-  Text,
-  colors,
-  ColorIndicator,
-} from '@citizenlab/cl2-component-library';
+import { fontSizes, isRtl, Icon } from '@citizenlab/cl2-component-library';
 import { capitalize, get } from 'lodash-es';
 import { darken } from 'polished';
 import styled from 'styled-components';
@@ -24,7 +16,6 @@ import { removeFocusAfterMouseClick } from 'utils/helperUtils';
 
 import InputFilterCollapsible from './InputFilterCollapsible';
 import messages from './messages';
-import { scrollToTopIdeasList } from './utils';
 
 const Count = styled.span`
   color: ${({ theme }) => theme.colors.textSecondary};
@@ -39,16 +30,36 @@ const Count = styled.span`
   `}
 `;
 
+const CloseIcon = styled(Icon)`
+  fill: #fff;
+  margin-left: auto;
+
+  ${isRtl`
+    margin-left: 0;
+    margin-right: auto;
+  `}
+`;
+
 const Status = styled.button`
+  color: ${({ theme }) => theme.colors.tenantText};
+  font-size: ${fontSizes.base}px;
+  font-weight: 400;
+  line-height: normal;
   display: flex;
-  cursor: pointer;
   align-items: center;
   justify-content: space-between;
-
+  padding-left: 18px;
+  padding-right: 18px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  margin: 0px;
+  margin-right: 10px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  border-radius: 5px;
+  user-select: none;
+  transition: all 80ms ease-out;
   width: 100%;
-  padding: 8px;
-  margin-top: 4px;
-  border-radius: ${({ theme }) => theme.borderRadius};
 
   ${isRtl`
     flex-direction: row-reverse;
@@ -91,13 +102,9 @@ const StatusFilter = memo<Props>(
       (event: MouseEvent<HTMLElement>) => {
         event.preventDefault();
         const statusId = event.currentTarget.dataset.id as string;
-
-        // deselect if already selected, otherwise select the new status
         const nextSelectedStatusId =
           selectedStatusId !== statusId ? statusId : null;
-
         onChange(nextSelectedStatusId);
-        scrollToTopIdeasList();
       },
       [selectedStatusId, onChange]
     );
@@ -116,12 +123,7 @@ const StatusFilter = memo<Props>(
             onClick={handleOnClick}
             className={allFilterSelected ? 'selected' : ''}
           >
-            <Box display="flex">
-              <ColorIndicator bgColor={colors.grey500} />
-              <Text m="0px" color={allFilterSelected ? 'white' : 'textPrimary'}>
-                <FormattedMessage {...messages.all} />
-              </Text>
-            </Box>
+            <FormattedMessage {...messages.all} />
             <Count aria-hidden>{allPostsCount}</Count>
             <ScreenReaderOnly>
               {/* Pronounce number of ideas of All status when focus/hover it */}
@@ -158,23 +160,14 @@ const StatusFilter = memo<Props>(
                   onClick={handleOnClick}
                   className={`e2e-status ${isFilterSelected ? 'selected' : ''}`}
                 >
-                  <Box display="flex">
-                    <ColorIndicator bgColor={status.attributes.color} />
-                    <Text
-                      m="0px"
-                      color={isFilterSelected ? 'white' : 'textPrimary'}
-                    >
-                      <T value={status.attributes.title_multiloc}>
-                        {(statusTitle) => <>{capitalize(statusTitle)}</>}
-                      </T>
-                    </Text>
-                  </Box>
-
+                  <T value={status.attributes.title_multiloc}>
+                    {(statusTitle) => <>{capitalize(statusTitle)}</>}
+                  </T>
                   {!isFilterSelected ? (
                     <Count aria-hidden>{filterPostCount}</Count>
                   ) : (
                     <>
-                      <Icon fill={colors.white} name="close" />
+                      <CloseIcon name="close" />
                       <ScreenReaderOnly>
                         <FormattedMessage {...messages.a11y_removeFilter} />
                       </ScreenReaderOnly>

front/app/components/IdeaCards/shared/Filters/SortingBox/SortTypeButton.tsx

@@ -6,8 +6,6 @@ import styled, { useTheme } from 'styled-components';
 
 import { IdeaDefaultSortMethod } from 'api/phases/types';
 
-import { scrollToTopIdeasList } from 'components/FilterBoxes/utils';
-
 import { useIntl } from 'utils/cl-intl';
 
 import { getIconNameForSortingOption, getLabelForSortingOption } from './utils';
@@ -63,7 +61,6 @@ const SortTypeButton = ({
 
   const handleOnChange = () => {
     handleSortOnChange(sortType);
-    scrollToTopIdeasList();
   };
 
   return (

front/app/components/UI/FullscreenModal/index.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { Color, colors, media } from '@citizenlab/cl2-component-library';
+import { compact } from 'lodash-es';
 import { createPortal } from 'react-dom';
 import { FocusOn } from 'react-focus-on';
 import CSSTransition from 'react-transition-group/CSSTransition';
@@ -83,6 +84,7 @@ interface InputProps {
   close: () => void;
   topBar?: JSX.Element | null;
   bottomBar?: JSX.Element | null;
+  mobileNavbarRef?: HTMLElement | null;
   children: JSX.Element | null | undefined;
   contentBgColor?: Color;
 }
@@ -122,8 +124,16 @@ class FullscreenModal extends PureComponent<Props, State> {
 
   render() {
     const { windowHeight } = this.state;
-    const { children, opened, topBar, bottomBar, className, contentBgColor } =
-      this.props;
+    const {
+      children,
+      opened,
+      topBar,
+      bottomBar,
+      mobileNavbarRef,
+      className,
+      contentBgColor,
+    } = this.props;
+    const shards = compact([mobileNavbarRef]);
 
     return createPortal(
       <CSSTransition
@@ -144,7 +154,7 @@ class FullscreenModal extends PureComponent<Props, State> {
           windowHeight={windowHeight}
           contentBgColor={contentBgColor}
         >
-          <StyledFocusOn autoFocus>
+          <StyledFocusOn autoFocus={false} shards={shards}>
             {topBar}
             <Content className="fullscreenmodal-scrollcontainer">
               {children}

front/app/components/admin/PostManager/components/FilterSidebar/FilterSidebarStatusesItem.tsx

@@ -16,13 +16,20 @@ import usePhase from 'api/phases/usePhase';
 
 import useFeatureFlag from 'hooks/useFeatureFlag';
 
-import ColorIndicator from 'component-library/components/ColorIndicator';
 import T from 'components/T';
 
 import { FormattedMessage } from 'utils/cl-intl';
 
 import messages from '../../messages';
 
+const ColorIndicator = styled.div`
+  width: 1rem;
+  height: 1rem;
+  background-color: ${(props) => props.color};
+  border-radius: ${(props) => props.theme.borderRadius};
+  margin-right: 0.5rem;
+`;
+
 const StatusText = styled.div`
   &:first-letter {
     text-transform: uppercase;
@@ -107,7 +114,7 @@ const FilterSidebarStatusesItem = ({ status, active, onClick }: Props) => {
               justifyContent="flex-start"
               w="100%"
             >
-              <ColorIndicator bgColor={status.attributes.color} />
+              <ColorIndicator color={status.attributes.color} />
               <Box display="flex" alignItems="center" gap="4px">
                 <StatusText>
                   <T value={status.attributes.title_multiloc} />

front/app/containers/IdeasIndexPage/index.tsx

@@ -5,7 +5,6 @@ import {
   fontSizes,
   colors,
   isRtl,
-  Box,
 } from '@citizenlab/cl2-component-library';
 import { useSearchParams } from 'react-router-dom';
 import styled from 'styled-components';
@@ -119,15 +118,6 @@ export default () => {
             <PageTitle>
               <FormattedMessage {...messages.inputsPageTitle} />
             </PageTitle>
-            {/* Needed to add an anchor here so that we can scroll up the page correctly
-                when fitlers are changed in the IdeaCardsWithFiltersSidebar component and scrollToTopIdeasList util.
-            */}
-            <Box
-              position="absolute"
-              mt="-100px"
-              id="ideas-list-scroll-anchor"
-              aria-hidden={true}
-            />
             <IdeaCardsWithFiltersSidebar
               invisibleTitleMessage={messages.a11y_IdeasListTitle1}
               ideaQueryParameters={ideasQueryParameters}

front/app/containers/MainHeader/Components/NavbarContent/MobileNavbarContent/FullMobileNavMenu.tsx

@@ -89,9 +89,14 @@ const StyledFullscreenModal = styled(FullscreenModal)`
 interface Props {
   onClose: () => void;
   isFullMenuOpened: boolean;
+  mobileNavbarRef: HTMLElement;
 }
 
-const FullMobileNavMenu = ({ onClose, isFullMenuOpened }: Props) => {
+const FullMobileNavMenu = ({
+  mobileNavbarRef,
+  onClose,
+  isFullMenuOpened,
+}: Props) => {
   const { data: navbarItems } = useNavbarItems();
   const localize = useLocalize();
   const { formatMessage } = useIntl();
@@ -113,7 +118,11 @@ const FullMobileNavMenu = ({ onClose, isFullMenuOpened }: Props) => {
   };
 
   return (
-    <StyledFullscreenModal opened={isFullMenuOpened} close={onClose}>
+    <StyledFullscreenModal
+      opened={isFullMenuOpened}
+      close={onClose}
+      mobileNavbarRef={mobileNavbarRef}
+    >
       <Container>
         <ContentContainer
           // Screen reader will add "navigation", so this will become

front/app/containers/MainHeader/Components/NavbarContent/MobileNavbarContent/index.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useState } from 'react';
+import React, { Suspense, useRef, useState } from 'react';
 
 import { Box, Button, media, isRtl } from '@citizenlab/cl2-component-library';
 import styled from 'styled-components';
@@ -84,6 +84,7 @@ const MobileNavbarContent = () => {
   const isEmailSettingsPage = isPage('email-settings', location.pathname);
 
   const [isFullMenuOpened, setIsFullMenuOpened] = useState(false);
+  const containerRef = useRef<HTMLElement>(null);
 
   const signIn = () => {
     triggerAuthenticationFlow({}, 'signin');
@@ -103,7 +104,7 @@ const MobileNavbarContent = () => {
   };
 
   return (
-    <nav>
+    <nav ref={containerRef}>
       <RightContainer>
         {!isEmailSettingsPage && (
           <>
@@ -139,10 +140,13 @@ const MobileNavbarContent = () => {
         )}
       </RightContainer>
       <Suspense fallback={null}>
-        <FullMobileNavMenu
-          isFullMenuOpened={isFullMenuOpened}
-          onClose={onCloseFullMenu}
-        />
+        {containerRef.current && (
+          <FullMobileNavMenu
+            isFullMenuOpened={isFullMenuOpened}
+            onClose={onCloseFullMenu}
+            mobileNavbarRef={containerRef.current}
+          />
+        )}
       </Suspense>
     </nav>
   );