[C] round of tweaks

components/content-blocks/FilterTool/index.tsx

@@ -3,9 +3,7 @@ import { FunctionComponent, useState } from "react";
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
 import { BaseContentBlockProps } from "@/components/shapes";
 import { useTranslation } from "react-i18next";
-import WidgetContainer from "@/components/layout/WidgetContainer";
 import FilterTool from "@rubin-epo/epo-widget-lib/FilterTool";
-import withModal from "@/components/hoc/withModal/withModal";
 import * as Styled from "./styles";
 
 const Fragment = graphql(`
@@ -20,9 +18,8 @@ const Fragment = graphql(`
 
 const FilterToolBlock: FunctionComponent<
   BaseContentBlockProps<FragmentType<typeof Fragment>>
-> = ({ data, openModal, isOpen }) => {
+> = ({ data }) => {
   const { t } = useTranslation();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {
     preSelectedColor,
     readOnly = false,
@@ -34,27 +31,25 @@ const FilterToolBlock: FunctionComponent<
 
   return (
     <>
-      {!isOpen && widgetInstructions && (
+      {widgetInstructions && (
         <Styled.WidgetInstructions
           dangerouslySetInnerHTML={{ __html: widgetInstructions }}
         />
       )}
-      <WidgetContainer
+      <Styled.WidgetContainer
         title={t("widgets.filter_tool")}
-        paddingSize="none"
         instructions={widgetInstructions || undefined}
-        {...{ openModal, isOpen }}
       >
         <FilterTool
-          isDisabled={readOnly || undefined}
+          isDisabled={!!readOnly}
           selectedColor={selectedColor}
           selectionCallback={(selection) => setSelectedColor(selection)}
         />
-      </WidgetContainer>
+      </Styled.WidgetContainer>
     </>
   );
 };
 
 FilterToolBlock.displayName = "ContentBlock.FilterTool";
 
-export default withModal(FilterToolBlock);
+export default FilterToolBlock;

components/content-blocks/FilterTool/styles.ts

@@ -1,6 +1,11 @@
 "use client";
+import WidgetContainerWithModal from "@/components/layout/WidgetContainerWithModal";
 import styled from "styled-components";
 
+export const WidgetContainer = styled(WidgetContainerWithModal)`
+  --widget-padding: 0px;
+`;
+
 export const WidgetInstructions = styled.div`
   color: var(--text-color);
   margin-block-end: var(--interaction-group-margin);

components/layout/WidgetContainer/InteractionText/styles.ts

@@ -5,7 +5,7 @@ export const InstructionsContainer = styled.div`
   color: var(--widget-text-color);
   display: flex;
   justify-content: center;
-  margin-block: 1em;
+  height: var(--instructions-height, 2em);
 `;
 
 export const InfoButton = styled.button`

components/layout/WidgetContainer/styles.ts

@@ -4,8 +4,12 @@ import styled from "styled-components";
 export const WidgetBlock = styled.div`
   --target-height: 1;
   --widget-header-height: 36px;
-  --widget-padding: calc(var(--PADDING_SMALL, 20px) / 2);
+  --widget-padding-resize: 0.5;
+  --widget-padding: calc(
+    var(--PADDING_SMALL, 20px) * var(--widget-padding-resize)
+  );
   --widget-header-padding: calc(var(--PADDING_SMALL, 20px) / 4);
+  --instructions-height: 2em;
 
   --global-ui-height: calc(
     var(--pager-height, 0px) + var(--header-height, 0px)
@@ -20,28 +24,28 @@ export const WidgetBlock = styled.div`
 
   &[data-modal-open="true"] {
     --global-ui-height: 0px;
-    --widget-ui-height: var(--widget-padding, 0px);
+    --widget-ui-height: calc(
+      calc(var(--widget-padding, 0px) * 3) + var(--instructions-height)
+    );
     --widget-background-color: var(--white, #fff);
   }
 
-  background-color: var(--widget-background-color);
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
 
   @container (min-width: ${token("BREAK_LARGE_TABLET")}) {
-    --widget-padding: var(--PADDING_SMALL, 20px);
+    --widget-padding-resize: 1;
     --target-height: 0.85;
 
     background-color: transparent;
-    justify-content: center;
   }
 `;
 
 export const WidgetContainer = styled.div`
-  background-color: var(--widget-background-color, var(--neutral10, #f5f5f5));
   color: var(--widget-text-color, initial);
   max-width: 100%;
   max-height: 100%;
@@ -64,6 +68,7 @@ export const WidgetTitle = styled.h3`
 `;
 
 export const WidgetBody = styled.div`
+  background-color: var(--widget-background-color, var(--neutral10, #f5f5f5));
   display: flex;
   flex-direction: column;
   padding: var(--widget-padding);

package.json

@@ -58,7 +58,7 @@
     "@greatsumini/react-facebook-login": "^3.3.3",
     "@react-oauth/google": "^0.11.0",
     "@rubin-epo/epo-react-lib": "^2.0.21",
-    "@rubin-epo/epo-widget-lib": "0.9.10",
+    "@rubin-epo/epo-widget-lib": "^0.9.11-beta.1",
     "@unly/universal-language-detector": "^2.0.3",
     "@urql/core": "^4.1.0",
     "@urql/next": "^1.1.0",

yarn.lock

@@ -2982,10 +2982,10 @@
     react-uid "^2.3.2"
     styled-components "^6.1.1"
 
-"@rubin-epo/[email protected].10":
-  version "0.9.10"
-  resolved "https://registry.yarnpkg.com/@rubin-epo/epo-widget-lib/-/epo-widget-lib-0.9.10.tgz#46835ae2083f0114c4fc632d16f0bc4e67e1688c"
-  integrity sha512-nMscMiJmHbwz2FwgkIZqlBuKo9wW/W8BDCIO8bc61wb3l3X6tc+7+vikOyRGBOesZNxJ9XvkSVV6MuFy3hq25g==
+"@rubin-epo/epo-widget-lib@^0.9.11-beta.1":
+  version "0.9.11-beta.1"
+  resolved "https://registry.yarnpkg.com/@rubin-epo/epo-widget-lib/-/epo-widget-lib-0.9.11-beta.1.tgz#bac1a69848b60c7af0837a498c3a1995d0847f84"
+  integrity sha512-bW2n4zCjCwjftUjsY2umE1R3EROd8Un7Pq5jadzEpatKMC7nZJIy6z+8B/Zluzx8J+nEspNC0NwIP3j5cMv7bg==
   dependencies:
     "@rubin-epo/epo-react-lib" "^2.0.20"
     context-filter-polyfill "^0.3.6"