fix(#2003): popover remove relative prop

BumbleB2na · BumbleB2na · commit 961eb31f2508 · 2025-01-20T15:48:40.000-07: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
@@ -21,7 +21,6 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
     [attr.max]="max"
     [attr.error]="error"
     [attr.disabled]="disabled"
-    [attr.relative]="relative"
     [attr.testid]="testId"
     [attr.mt]="mt"
     [attr.mb]="mb"
@@ -46,7 +45,6 @@ export class GoabDatePicker implements ControlValueAccessor {
   @Input() max?: Date | string;
   @Input() error?: boolean;
   @Input() disabled?: boolean;
-  @Input() relative?: boolean;
   @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
@@ -27,7 +27,6 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
       [attr.placeholder]="placeholder"
       [attr.testid]="testId"
       [attr.width]="width"
-      [attr.relative]="relative"
       [id]="id"
       (_change)="_onChange($event)"
     >
@@ -59,7 +58,6 @@ export class GoabDropdown implements ControlValueAccessor{
   @Input() placeholder?: string;
   @Input() testId?: string;
   @Input() width?: string;
-  @Input() relative?: boolean;
   @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
@@ -12,7 +12,6 @@ import { NgTemplateOutlet } from "@angular/common";
       [attr.minwidth]="minWidth"
       [attr.padded]="padded"
       [attr.position]="position"
-      [attr.relative]="relative"
       [attr.testid]="testId"
       [attr.mt]="mt"
       [attr.mb]="mb"
@@ -32,7 +31,6 @@ export class GoabPopover {
   @Input() minWidth?: string;
   @Input() padded = true;
   @Input() position?: GoabPopoverPosition;
-  @Input() relative?: boolean;
   @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
@@ -253,7 +253,6 @@ export interface GoabPopoverProps extends Margins {
   maxWidth?: string;
   padded?: boolean;
   position?: GoabPopoverPosition;
-  relative?: boolean;
 }
 
 // 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,6 @@ interface WCProps extends Margins {
   error?: boolean;
   min?: string;
   max?: string;
-  relative?: boolean;
   disabled?: boolean;
   testid?: string;
 }
@@ -30,7 +29,6 @@ export interface GoabDatePickerProps extends Margins {
   min?: Date;
   max?: Date;
   testId?: string;
-  relative?: boolean;
   disabled?: boolean;
   onChange: (detail: GoabDatePickerOnChangeDetail) => void;
 }
@@ -47,7 +45,6 @@ export function GoabDatePicker({
   mr,
   mb,
   ml,
-  relative,
   onChange,
 }: GoabDatePickerProps): JSX.Element {
   const ref = useRef<HTMLInputElement>(null);
@@ -84,7 +81,6 @@ export function GoabDatePicker({
       mr={mr}
       mb={mb}
       ml={ml}
-      relative={relative}
     />
   );
 }
diff --git a/libs/react-components/src/lib/dropdown/dropdown.tsx b/libs/react-components/src/lib/dropdown/dropdown.tsx
@@ -20,7 +20,6 @@ interface WCProps extends Margins {
   placeholder?: string;
   value?: string;
   width?: string;
-  relative?: boolean;
   id?: string;
   testid?: string;
 }
@@ -55,7 +54,6 @@ export interface GoabDropdownProps extends Margins {
   placeholder?: string;
   testId?: string;
   width?: string;
-  relative?: boolean;
 }
 
 function stringify(value: string | string[] | undefined): string {
@@ -106,7 +104,6 @@ export function GoabDropdown(props: GoabDropdownProps): JSX.Element {
       placeholder={props.placeholder}
       testid={props.testId}
       width={props.width}
-      relative={props.relative}
       id={props.id}
     >
       {props.children}
diff --git a/libs/react-components/src/lib/popover/popover.tsx b/libs/react-components/src/lib/popover/popover.tsx
@@ -6,7 +6,6 @@ interface WCProps extends Margins {
   minwidth?: string;
   padded?: boolean;
   position?: GoabPopoverPosition;
-  relative?: boolean;
   testid?: string;
 }
 
@@ -27,7 +26,6 @@ export interface GoabPopoverProps extends Margins {
   padded?: boolean;
   position?: GoabPopoverPosition;
   children: ReactNode;
-  relative?: boolean;
 }
 
 export function GoabPopover({
@@ -37,7 +35,6 @@ export function GoabPopover({
   minWidth,
   padded,
   position,
-  relative,
   children,
   mt,
   mr,
@@ -51,7 +48,6 @@ export function GoabPopover({
       minwidth={minWidth}
       padded={padded}
       position={position}
-      relative={relative}
       mt={mt}
       mr={mr}
       mb={mb}
diff --git a/libs/web-components/src/components/calendar/Calendar.svelte b/libs/web-components/src/components/calendar/Calendar.svelte
@@ -312,7 +312,6 @@
         arialabel={`${name} month`}
         data-testid="months"
         width="calc(314px / 2 - 1.5rem)"
-        relative="true"
         value={_calendarDate?.getMonth()}
         on:_change={setMonth}
       >
@@ -328,7 +327,6 @@
         arialabel={`${name} year`}
         data-testid="years"
         width="calc(314px / 2 - 1.5rem)"
-        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
@@ -26,7 +26,6 @@
   export let error: string = "false";
   export let min: string = "";
   export let max: string = "";
-  export let relative: string = "false";
   export let disabled: string = "false";
   export let testid: string = "";
 
@@ -64,7 +63,7 @@
       initDate();
     }
   });
-  
+
   function addRelayListener() {
     receive(_rootEl, (action, data) => {
       switch (action) {
@@ -209,7 +208,6 @@
   bind:this={_rootEl}
   tabindex="-1"
   {testid}
-  {relative}
   {mt}
   {mb}
   {ml}
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
@@ -24,7 +24,6 @@ describe("GoADropdown", () => {
       expect(popover?.getAttribute("disabled")).toBe("false");
       expect(popover?.getAttribute("open")).toBe("false");
       expect(popover?.getAttribute("padded")).toBe("false");
-      expect(popover?.getAttribute("relative")).toBe("false");
 
       const dropdown = result.queryByTestId("favcolor-dropdown");
       const inputField = dropdown?.querySelector("input");
@@ -106,7 +105,6 @@ describe("GoADropdown", () => {
         expect(popover?.getAttribute("disabled")).toBe("false");
         expect(popover?.getAttribute("open")).toBe("false");
         expect(popover?.getAttribute("padded")).toBe("false");
-        expect(popover?.getAttribute("relative")).toBe("false");
 
         expect(inputField?.getAttribute("id")).toBe("favcolor");
         expect(inputField?.getAttribute("aria-autocomplete")).toBe("list");
diff --git a/libs/web-components/src/components/dropdown/Dropdown.svelte b/libs/web-components/src/components/dropdown/Dropdown.svelte
@@ -50,7 +50,6 @@
   export let error: string = "false";
   export let multiselect: string = "false";
   export let native: string = "false";
-  export let relative: string = "false";
   export let mt: Spacing = null;
   export let mr: Spacing = null;
   export let mb: Spacing = null;
@@ -634,7 +633,6 @@
     <!-- list and filter -->
     <goa-popover
       {disabled}
-      {relative}
       data-testid="option-list"
       width={_popoverMaxWidth || "300px"}
       open={_isMenuVisible}
diff --git a/libs/web-components/src/components/popover/Popover.html-data.json b/libs/web-components/src/components/popover/Popover.html-data.json
@@ -19,12 +19,6 @@
       "type": "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/popover/Popover.svelte b/libs/web-components/src/components/popover/Popover.svelte

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