fix(#2003): popover remove relative prop

BumbleB2na · BumbleB2na · commit 07bf4d8e4777 · 2025-04-08T17:05:55.000-06:00
diff --git a/apps/angular-tests/src/app/dropdown/dropdown.component.html b/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>
diff --git a/libs/angular-components/src/lib/components/date-picker/date-picker.ts b/libs/angular-components/src/lib/components/date-picker/date-picker.ts
@@ -46,7 +46,7 @@ export class GoabDatePicker implements ControlValueAccessor {
   @Input() max?: Date | string;
   @Input() error?: boolean;
   @Input() disabled?: boolean;
-  @Input() relative?: boolean;
+  @Input() relative?: boolean; // deprecated
   @Input() testId?: string;
   @Input() mt?: Spacing;
   @Input() mb?: Spacing;
diff --git a/libs/angular-components/src/lib/components/dropdown/dropdown.spec.ts b/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;
diff --git a/libs/angular-components/src/lib/components/dropdown/dropdown.ts b/libs/angular-components/src/lib/components/dropdown/dropdown.ts
@@ -59,7 +59,7 @@ export class GoabDropdown implements ControlValueAccessor{
   @Input() placeholder?: string;
   @Input() testId?: string;
   @Input() width?: string;
-  @Input() relative?: boolean;
+  @Input() relative?: boolean; // deprecated
   @Input() mt?: Spacing;
   @Input() mb?: Spacing;
   @Input() ml?: Spacing;
diff --git a/libs/angular-components/src/lib/components/popover/popover.spec.ts b/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");
diff --git a/libs/angular-components/src/lib/components/popover/popover.ts b/libs/angular-components/src/lib/components/popover/popover.ts
@@ -32,7 +32,7 @@ export class GoabPopover {
   @Input() minWidth?: string;
   @Input() padded = true;
   @Input() position?: GoabPopoverPosition;
-  @Input() relative?: boolean;
+  @Input() relative?: boolean; // deprecated
   @Input() testId?: string;
   @Input() mt?: Spacing;
   @Input() mb?: Spacing;
diff --git a/libs/common/src/lib/common.ts b/libs/common/src/lib/common.ts
@@ -255,7 +255,7 @@ export interface GoabPopoverProps extends Margins {
   maxWidth?: string;
   padded?: boolean;
   position?: GoabPopoverPosition;
-  relative?: boolean;
+  relative?: boolean; // deprecated
 }
 
 // Notification
diff --git a/libs/react-components/src/lib/date-picker/date-picker.spec.tsx b/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();
-  });
 });
diff --git a/libs/react-components/src/lib/date-picker/date-picker.tsx b/libs/react-components/src/lib/date-picker/date-picker.tsx
@@ -8,7 +8,7 @@ interface WCProps extends Margins {
   error?: boolean;
   min?: string;
   max?: string;
-  relative?: boolean;
+  relative?: boolean; // deprecated
   disabled?: boolean;
   testid?: string;
 }
@@ -30,7 +30,7 @@ export interface GoabDatePickerProps extends Margins {
   min?: Date;
   max?: Date;
   testId?: string;
-  relative?: boolean;
+  relative?: boolean; // deprecated
   disabled?: boolean;
   onChange: (detail: GoabDatePickerOnChangeDetail) => void;
 }
@@ -47,7 +47,7 @@ export function GoabDatePicker({
   mr,
   mb,
   ml,
-  relative,
+  relative, // deprecated
   onChange,
 }: GoabDatePickerProps): JSX.Element {
   const ref = useRef<HTMLInputElement>(null);
diff --git a/libs/react-components/src/lib/dropdown/dropdown.tsx b/libs/react-components/src/lib/dropdown/dropdown.tsx
@@ -20,7 +20,7 @@ interface WCProps extends Margins {
   placeholder?: string;
   value?: string;
   width?: string;
-  relative?: boolean;
+  relative?: boolean; // deprecated
   id?: string;
   testid?: string;
 }
@@ -55,7 +55,7 @@ export interface GoabDropdownProps extends Margins {
   placeholder?: string;
   testId?: string;
   width?: string;
-  relative?: boolean;
+  relative?: boolean; // deprecated
 }
 
 function stringify(value: string | string[] | undefined): string {
diff --git a/libs/react-components/src/lib/popover/popover.tsx b/libs/react-components/src/lib/popover/popover.tsx
@@ -6,7 +6,7 @@ interface WCProps extends Margins {
   minwidth?: string;
   padded?: boolean;
   position?: GoabPopoverPosition;
-  relative?: boolean;
+  relative?: boolean; // deprecated
   testid?: string;
 }
 
@@ -27,7 +27,7 @@ export interface GoabPopoverProps extends Margins {
   padded?: boolean;
   position?: GoabPopoverPosition;
   children: ReactNode;
-  relative?: boolean;
+  relative?: boolean; // deprecated
 }
 
 export function GoabPopover({
@@ -37,7 +37,7 @@ export function GoabPopover({
   minWidth,
   padded,
   position,
-  relative,
+  relative, // deprecated
   children,
   mt,
   mr,
diff --git a/libs/web-components/src/components/calendar/Calendar.svelte b/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}
       >
diff --git a/libs/web-components/src/components/date-picker/DatePicker.html-data.json b/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",
diff --git a/libs/web-components/src/components/date-picker/DatePicker.svelte b/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,7 @@
   export let error: string = "false";
   export let min: string = "";
   export let max: string = "";
-  export let relative: string = "false";
+  export let relative: string = "";  // deprecated and has no effect
   export let disabled: string = "false";
   export let testid: string = "";
 
@@ -70,8 +66,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 +91,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 +130,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 +257,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 +280,6 @@
     bind:this={_rootEl}
     tabindex="-1"
     {testid}
-    {relative}
     {mt}
     {mb}
     {ml}
@@ -309,7 +313,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" />
diff --git a/libs/web-components/src/components/date-picker/date-picker.spec.ts b/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"));
 });
 
diff --git a/libs/web-components/src/components/date-picker/doc.md b/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>
 ```
diff --git a/libs/web-components/src/components/dropdown/Dropdown.html-data.json b/libs/web-components/src/components/dropdown/Dropdown.html-data.json
@@ -68,12 +68,6 @@
       "valueSet": "boolean",
       "default": "false"
     },
-    {
-      "name": "relative",
-      "description": "Set to true if a parent element has a css position of `relative`",
-      "type": "boolean",
-      "default": "false"
-    },
     {
       "name": "mt",
       "description": "Top margin",
diff --git a/libs/web-components/src/components/dropdown/Dropdown.spec.ts b/libs/web-components/src/components/dropdown/Dropdown.spec.ts
diff --git a/libs/web-components/src/components/dropdown/Dropdown.svelte b/libs/web-components/src/components/dropdown/Dropdown.svelte
diff --git a/libs/web-components/src/components/popover/Popover.html-data.json b/libs/web-components/src/components/popover/Popover.html-data.json
diff --git a/libs/web-components/src/components/popover/Popover.svelte b/libs/web-components/src/components/popover/Popover.svelte

Original file line number	Diff line number	Diff line change
`@@ -255,7 +255,7 @@ export interface GoabPopoverProps extends Margins {`
`255`	`255`	`maxWidth?: string;`
`256`	`256`	`padded?: boolean;`
`257`	`257`	`position?: GoabPopoverPosition;`
`258`		`- relative?: boolean;`
	`258`	`+ relative?: boolean; // deprecated`
`259`	`259`	`}`
`260`	`260`
`261`	`261`	`// Notification`