fix(#2003): popover remove relative prop

apps/angular-tests/src/app/dropdown/dropdown.component.html

@@ -32,8 +32,12 @@ <h1>Dropdown</h1>
   </goab-form-item>
 
   <goab-form-item label="Country">
-    <goab-dropdown [filterable]="true" [relative]="true" name="country" width="30ch">
-      <goab-dropdown-item *ngFor="let opt of countries" [value]="opt.code" [label]="opt.name"></goab-dropdown-item>
+    <goab-dropdown [filterable]="true" name="country" width="30ch">
+      <goab-dropdown-item
+        *ngFor="let opt of countries"
+        [value]="opt.code"
+        [label]="opt.name"
+      ></goab-dropdown-item>
     </goab-dropdown>
   </goab-form-item>
 </form>
@@ -57,8 +61,12 @@ <h1>Dropdown</h1>
 <goab-container accent="thin">
   <form [formGroup]="form">
     <goab-form-item label="Select Option">
-      <goab-dropdown [relative]="true" name="option" formControlName="option" width="100%">
-        <goab-dropdown-item *ngFor="let option of options" [value]="option.value" [label]="option.displayValue" />
+      <goab-dropdown name="option" formControlName="option" width="100%">
+        <goab-dropdown-item
+          *ngFor="let option of options"
+          [value]="option.value"
+          [label]="option.displayValue"
+        />
       </goab-dropdown>
     </goab-form-item>
   </form>

libs/angular-components/src/lib/components/date-picker/date-picker.ts

@@ -46,6 +46,9 @@ export class GoabDatePicker implements ControlValueAccessor {
   @Input() max?: Date | string;
   @Input() error?: boolean;
   @Input() disabled?: boolean;
+  /***
+   * @deprecated This property has no effect and will be removed in a future version
+   */
   @Input() relative?: boolean;
   @Input() testId?: string;
   @Input() mt?: Spacing;

libs/angular-components/src/lib/components/dropdown/dropdown.spec.ts

@@ -55,7 +55,6 @@ class TestDropdownComponent {
   placeholder?: string;
   testId?: string;
   width?: string;
-  relative?: boolean;
   mt?: Spacing;
   mb?: Spacing;
   ml?: Spacing;

libs/angular-components/src/lib/components/dropdown/dropdown.ts

@@ -59,6 +59,9 @@ export class GoabDropdown implements ControlValueAccessor{
   @Input() placeholder?: string;
   @Input() testId?: string;
   @Input() width?: string;
+  /***
+   * @deprecated This property has no effect and will be removed in a future version
+   */
   @Input() relative?: boolean;
   @Input() mt?: Spacing;
   @Input() mb?: Spacing;

libs/angular-components/src/lib/components/popover/popover.spec.ts

@@ -11,7 +11,6 @@ import { GoabButton } from "../button/button";
       [maxWidth]="maxWidth"
       [padded]="padded"
       [position]="position"
-      [relative]="relative"
       [mt]="mt"
       [mb]="mb"
       [ml]="ml"
@@ -29,7 +28,6 @@ class TestPopoverComponent {
   maxWidth = "320px";
   padded = true;
   position?: GoabPopoverPosition;
-  relative?: boolean;
   testId?: string;
   mt?: Spacing;
   mb?: Spacing;
@@ -55,7 +53,6 @@ describe("GoABPopover", () => {
     component.maxWidth = "500px";
     component.padded = false;
     component.position = "above" as GoabPopoverPosition;
-    component.relative = true;
     component.mt = "l" as Spacing;
     component.mb = "s" as Spacing;
     component.ml = "xs" as Spacing;
@@ -75,7 +72,6 @@ describe("GoABPopover", () => {
     expect(el.getAttribute("maxwidth")).toBe(component.maxWidth);
     expect(el.getAttribute("padded")).toBe(`${component.padded}`);
     expect(el.getAttribute("position")).toBe(component.position);
-    expect(el.getAttribute("relative")).toBe(`${component.relative}`);
 
     expect(el.getAttribute("mt")).toBe("l");
     expect(el.getAttribute("mb")).toBe("s");

libs/angular-components/src/lib/components/popover/popover.ts

@@ -32,6 +32,9 @@ export class GoabPopover {
   @Input() minWidth?: string;
   @Input() padded = true;
   @Input() position?: GoabPopoverPosition;
+  /***
+   * @deprecated This property has no effect and will be removed in a future version
+   */
   @Input() relative?: boolean;
   @Input() testId?: string;
   @Input() mt?: Spacing;

libs/common/src/lib/common.ts

@@ -255,6 +255,9 @@ export interface GoabPopoverProps extends Margins {
   maxWidth?: string;
   padded?: boolean;
   position?: GoabPopoverPosition;
+  /***
+   * @deprecated This property has no effect and will be removed in a future version
+   */
   relative?: boolean;
 }
 

libs/react-components/src/lib/date-picker/date-picker.spec.tsx

@@ -15,7 +15,6 @@ describe("DatePicker", () => {
     const min = addMonths(value, -1);
     const max = addMonths(value, 1);
     const disabled = true;
-    const relative = true;
 
     const { baseElement } = render(
       <DatePicker
@@ -26,7 +25,6 @@ describe("DatePicker", () => {
         testId="foo"
         error={error}
         disabled={disabled}
-        relative={relative}
         onChange={noop}
       />,
     );
@@ -41,7 +39,6 @@ describe("DatePicker", () => {
     expect(el?.getAttribute("disabled")).toBe("true");
     expect(el?.getAttribute("min")).toBe(min.toISOString());
     expect(el?.getAttribute("max")).toBe(max.toISOString());
-    expect(el?.getAttribute("relative")).toBe("true");
     expect(el?.getAttribute("testid")).toBe("foo");
   });
 
@@ -71,15 +68,4 @@ describe("DatePicker", () => {
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toBeCalledWith({ name, value, type: "date" });
   });
-
-  it("should render without relative property", () => {
-    const value = new Date();
-    const { baseElement } = render(
-      <DatePicker name="foo" value={value} onChange={noop} />,
-    );
-
-    const el = baseElement.querySelector("goa-date-picker");
-    expect(el).toBeTruthy();
-    expect(el?.getAttribute("relative")).toBeNull();
-  });
 });

libs/react-components/src/lib/date-picker/date-picker.tsx

@@ -30,6 +30,9 @@ export interface GoabDatePickerProps extends Margins {
   min?: Date;
   max?: Date;
   testId?: string;
+  /***
+   * @deprecated This property has no effect and will be removed in a future version
+   */
   relative?: boolean;
   disabled?: boolean;
   onChange: (detail: GoabDatePickerOnChangeDetail) => void;

libs/react-components/src/lib/dropdown/dropdown.tsx

@@ -55,6 +55,9 @@ export interface GoabDropdownProps extends Margins {
   placeholder?: string;
   testId?: string;
   width?: string;
+  /***
+   * @deprecated This property has no effect and will be removed in a future version
+   */
   relative?: boolean;
 }
 

libs/react-components/src/lib/popover/popover.tsx

@@ -27,6 +27,9 @@ export interface GoabPopoverProps extends Margins {
   padded?: boolean;
   position?: GoabPopoverPosition;
   children: ReactNode;
+  /***
+   * @deprecated This property has no effect and will be removed in a future version
+   */
   relative?: boolean;
 }
 

libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte

@@ -157,7 +157,8 @@
   {#if _desktop}
     <goa-popover
       bind:this={_popoverEl}
-      context="app-header-menu"
+      class="app-header-menu-popover"
+      context="menu"
       focusborderwidth="0"
       borderradius="0"
       padded="false"
@@ -206,6 +207,10 @@
     font: var(--goa-typography-body-m);
   }
 
+  goa-popover.app-header-menu-popover {
+    position: inherit;
+  }
+
   /* Menu item with children */
   button {
     padding: var(--goa-app-header-padding-nav-item-with-children);

libs/web-components/src/components/app-header/AppHeader.svelte

@@ -230,10 +230,10 @@
     <!-- Menu and menu button for tablet -->
     {#if _showToggleMenu && _tablet}
       <goa-popover
-        class="menu"
+        class="app-header-popover"
+        context="menu-toggle-area"
         open={_showMenu}
         minwidth="16rem"
-        context="menu-toggle-area"
         focusborderwidth="0"
         borderradius="4"
         padded="false"
@@ -299,6 +299,10 @@
     font: var(--goa-app-header-typography-service-name);
   }
 
+  goa-popover.app-header-popover {
+    position: inherit;
+  }
+
   /* Spans the full page width */
   .container {
     border-bottom: var(--goa-app-header-border-bottom);

libs/web-components/src/components/calendar/Calendar.svelte

@@ -331,7 +331,6 @@
         data-testid="months"
         width="160px"
         maxheight="240px"
-        relative="true"
         value={_calendarDate?.getMonth()}
         on:_change={setMonth}
       >
@@ -348,7 +347,6 @@
         data-testid="years"
         width="104px"
         maxheight="240px"
-        relative="true"
         value={_calendarDate?.getFullYear()}
         on:_change={setYear}
       >

libs/web-components/src/components/date-picker/DatePicker.html-data.json

@@ -21,13 +21,6 @@
       "type": "string",
       "description": "Max allowed date value"
     },
-    {
-      "name": "relative",
-      "type": "boolean",
-      "valueSet": "boolean",
-      "defaultValue": "false",
-      "description": "Set to true when datepicker is nested in a position=relative element"
-    },
     {
       "name": "disabled",
       "type": "boolean",

libs/web-components/src/components/date-picker/DatePicker.svelte

@@ -2,13 +2,7 @@
 
 <script lang="ts">
   import { onMount, tick } from "svelte";
-  import {
-    addDays,
-    addMonths,
-    addYears,
-    format,
-    startOfDay,
-  } from "date-fns";
+  import { addDays, addMonths, addYears, format, startOfDay } from "date-fns";
   import type { Spacing } from "../../common/styling";
   import { padLeft, toBoolean } from "../../common/utils";
   import { receive, dispatch, relay } from "../../common/utils";
@@ -19,7 +13,9 @@
     FieldsetResetErrorsMsg,
     FormFieldMountMsg,
     FormFieldMountRelayDetail,
-    FieldsetErrorRelayDetail, FieldsetResetFieldsMsg, FormItemMountMsg,
+    FieldsetErrorRelayDetail,
+    FieldsetResetFieldsMsg,
+    FormItemMountMsg,
   } from "../../types/relay-types";
 
   type DateValue = {
@@ -40,7 +36,10 @@
   export let error: string = "false";
   export let min: string = "";
   export let max: string = "";
-  export let relative: string = "false";
+  /***
+   * @deprecated This property has no effect and will be removed in a future version
+   */
+  export let relative: string = "";
   export let disabled: string = "false";
   export let testid: string = "";
 
@@ -70,8 +69,17 @@
     setDate(value);
     addRelayListener();
     sendMountedMessage();
+    showDeprecationWarnings();
   });
 
+  function showDeprecationWarnings() {
+    if (relative != "") {
+      console.warn(
+        "Date Picker `relative` property is deprecated. It should be removed from your code because it is no longer needed to help with positioning.",
+      );
+    }
+  }
+
   // Listen for relayed messages
   function addRelayListener() {
     receive(_rootEl, (action, data, event) => {
@@ -86,7 +94,7 @@
           error = "false";
           break;
         case FieldsetResetFieldsMsg:
-          onSetValue({name, value: ""})
+          onSetValue({ name, value: "" });
           break;
 
         // prevent child fields from mounting/registering themselves with parent components
@@ -125,15 +133,15 @@
 
   function setDate(value: string) {
     // invalid date
-    if (!value || !(new Date(value).getDate())) {
+    if (!value || !new Date(value).getDate()) {
       _date = null;
       _inputDate = { day: "", month: "", year: "" };
       return;
     }
 
     if (type === "input") {
       const [year, month, day] = value.split("-");
-      _inputDate = { year: year, month: `${+month-1}`, day: day };
+      _inputDate = { year: year, month: `${+month - 1}`, day: day };
     } else if (type === "calendar") {
       _date = startOfDay(new Date(value));
     }
@@ -252,7 +260,7 @@
       e as CustomEvent<{ name: string; value: string }>
     ).detail;
 
-    _inputDate = {..._inputDate, [elName]: +value};
+    _inputDate = { ..._inputDate, [elName]: +value };
 
     if (!new Date(+_inputDate.year, +_inputDate.month, +_inputDate.day)) {
       return;
@@ -275,7 +283,6 @@
     bind:this={_rootEl}
     tabindex="-1"
     {testid}
-    {relative}
     {mt}
     {mb}
     {ml}
@@ -309,7 +316,12 @@
   <goa-form-item error={_error && error} bind:this={_rootEl}>
     <goa-block direction="row">
       <goa-form-item label="Month" helptext="Month">
-        <goa-dropdown name="month" on:_change={onInputChange} {error} value={_inputDate.month+""}>
+        <goa-dropdown
+          name="month"
+          on:_change={onInputChange}
+          {error}
+          value={_inputDate.month + ""}
+        >
           <goa-dropdown-item value="0" label="January" />
           <goa-dropdown-item value="1" label="February" />
           <goa-dropdown-item value="2" label="March" />

libs/web-components/src/components/date-picker/date-picker.spec.ts

@@ -21,14 +21,11 @@ it("it renders", async () => {
 
 it("renders with props", async () => {
   const value = addDays(new Date(), -10);
-  const relative = "true";
 
-  const { container } = render(DatePicker, { value, relative });
+  const { container } = render(DatePicker, { value });
 
-  const popover = container.querySelector("goa-popover");
   const input = container.querySelector("goa-input");
 
-  expect(popover?.getAttribute("relative")).toBe("true");
   expect(input?.getAttribute("value")).toBe(format(value, "PPP"));
 });
 

libs/web-components/src/components/date-picker/doc.md

@@ -1,11 +1,9 @@
 # DatePicker Library
 
-
 Use it like this:
 
 ```
 	<goa-date-picker></goa-date-picker>
-	<goa-date-picker relative="true"></goa-date-picker>
 	<goa-date-picker [value]="date"></goa-date-picker>
 	<goa-date-picker [min]="min" [max]="max"></goa-date-picker>
 ```