Contributions/solittlework/1813 datepicker width

[chrisolsen]

Before (the change)

Steps needed to test

import { GoabBlock, GoabDatePicker, GoabFormItem, GoabInput } from "@abgov/react-components";
import { GoabDatePickerOnChangeDetail, GoabInputOnChangeDetail } from "@abgov/ui-components-common";

export const TestContent = () => {
  function onChange(event: GoabDatePickerOnChangeDetail) {
    console.log(event.value);
  }
  function inputOnChange(event: GoabInputOnChangeDetail) {
    console.log(event.value);
  }
  return (
    <GoabBlock direction="column">
      <GoabFormItem label="Without Width Input">
        <GoabInput name="item" value="" onChange={inputOnChange}></GoabInput>
      </GoabFormItem>
      <GoabFormItem label="Without Width DatePicker">
        <GoabDatePicker onChange={onChange} name="item" value={new Date(2025, 5, 4)}></GoabDatePicker>
      </GoabFormItem>
      <GoabFormItem label="100% Input">
        <GoabInput name="item" value="" width="100%" onChange={inputOnChange}></GoabInput>
      </GoabFormItem>
      <GoabFormItem label="100%">
        <GoabDatePicker onChange={onChange} width="100%" name="item" value={new Date(2025, 5, 4)}></GoabDatePicker>
      </GoabFormItem>

      <GoabFormItem label="50ch Input">
        <GoabInput name="item" value="" width="50ch" onChange={inputOnChange}></GoabInput>
      </GoabFormItem>
      <GoabFormItem label="50ch">
        <GoabDatePicker onChange={onChange} width="50ch" name="item" value={new Date(2025, 5, 4)}></GoabDatePicker>
      </GoabFormItem>


      <GoabFormItem label="200px Input">
        <GoabInput name="item" value="" width="200px" onChange={inputOnChange}></GoabInput>
      </GoabFormItem>
      <GoabFormItem label="200px">
        <GoabDatePicker onChange={onChange} width="200px" name="item" value={new Date(2025, 5, 4)}></GoabDatePicker>
      </GoabFormItem>
    </GoabBlock>
  )
}

[chrisolsen]

This change only seems to work when using ch units. Can someone else verify this?

[vanessatran-ddi]

This change only seems to work when using ch units. Can someone else verify this?

For me ch works like input, however the % isn't.

I compared the same width with our goa-input and looks like the % is not correct.

[ArakTaiRoth]

@chrisolsen @vanessatran-ddi Issue with percentage width has been fixed. And tests have been created for testing the width property.

[vanessatran-ddi]

Do we need to change the width here? I see the width sets to "4ch" because of this issue #2703, https://github.com/GovAlta/ui-components/pull/2706/files

[vanessatran-ddi]

Same here, looks like "6ch" is a correct value, not "5ch"

[vanessatran-ddi]

I just have a concern about the merged issue comments above. The rest I have tested and it works well with ch, % and px, both react and angular. Since it has changes on popover, I also made a test on dropdown, app header menu and it looks good.

[chrisolsen]

@ArakTaiRoth you have conflicts

[ArakTaiRoth]

@chrisolsen All conflicts have been fixed

[chrisolsen]

@ArakTaiRoth Why are these changes being made? If I remove them I see no change to datepicker, but with them the target within a normal popover takes up 100% of the parent

[ArakTaiRoth]

@chrisolsen Perhaps we should talk about this. This is what I see for the Datepicker with that change:

And this is what I see if I change it back to what it was (display: flex):

That all being said, I do see the issue with popover-target becoming 100% width, so that needs to be fixed.

[chrisolsen]

These changes are still resulting the clickable area extending way beyond the components visual boundry.

[ArakTaiRoth]

Closing, as this PR got messed up by previous changes. A new PR for this story is incoming.