eui

eui copied to clipboard

To reproduce:

• Create an <EuiFormControlLayoutDelimited compressed={true}>
• Add an EuiFieldText or EuiFieldNumber to the startControl or endControl
• Observe that the field doesn't fill the form control vertically

Workaround:

Set the .euiFormControlLayout__childrenWrapper inside the <EuiFormControlLayoutDelimited> to height: 100%

Hi @Zacqary According to the examples in our docs, using the raw EuiFormControlLayoutDelimited requires passing raw <input /> elements, not our fully fledged EuiFieldText/Number components:

Example:

<EuiFormControlLayoutDelimited
      prepend={<EuiFormLabel>Add</EuiFormLabel>}
      compressed
      startControl={
        <input
          type="number"
          placeholder="0"
          className="euiFieldNumber"
          aria-label="Use aria labels when no actual label is in use"
        />
      }
      delimiter="+"
      endControl={
        <input
          type="number"
          placeholder="100"
          className="euiFieldNumber"
          aria-label="Use aria labels when no actual label is in use"
        />
      }
    />

Though, I also just tested in a CodeSandbox using our field components directly, and they work just fine. https://codesandbox.io/s/agitated-water-bbfo96?file=/demo.tsx

Can you possibly provide more context on your implementation or alter the above codesandbox to reproduce what you ran into?

Looks like it may possibly be a cross browser input rendering issue? Do you mind specifying your OS and browser?

Sorry for the delay on responding. Saw this issue on Firefox 102.0b9 for Mac. Will add more context after the weekend.

No worries! I'm on FF 101.0.1 on macOS 11.6 and the CodeSandbox that Caroline linked is fine for me. My best guess is that there may be some custom CSS overrides in your app causing the alignment or height issues, or possibly even a custom browser extension. If not, then a CodeSandbox repro would be great.

Testing again and the issue seems to have resolved itself. Not sure what was going on, but I can close this for now.

So actually this is still in fact happening, I was mistaken. Here's how to reproduce:

• Check out Kibana a1eaaa4 (or open a cloud deployment of 8.4 whenever that's available)

• Comment out these lines to disable the workaround

• In the Stack Management page, create a Rule

• Hover over the Notify column and click the bell when it appears to open the snooze dialog

• Click Add Schedule, then switch on Make Recurring and set the Repeat to Custom

@Zacqary Just to confirm, has the linked commit been merged in / is this occurring on latest Kibana main?

It's not occurring in latest main because I wrapped the EuiFormControlLayoutDelimited in a div with some workaround CSS. You can get it to occur on main by commenting out that workaround.

I've been sitting here for the last half hour or so comparing @cchaos's CodeSandbox against Kibana and I gotta say it's been a very long time since I've been this absolutely baffled. The CSS and markup is pretty much exactly the same, FF is reporting the same box model and computed info.... I actually literally have no idea why this is working on our Codesandbox in native EUI - it shouldn't be. (EDIT: To clarify, I can repro the issue in Kibana on MacOS Firefox as well as Chrome and Safari)

Honestly, looking at the output DOM and CSS, I'm seeing a lot of unnecessary repetition and nesting (e.g., .euiFormControlLayout__childrenWrapper present twice, height: 100% present twice and unnecessarily overriding height: 40px, etc.). Since @Zacqary has a CSS workaround/override in the meanwhile, I'm tempted to say we should address this in our conversion of EuiFormControlLayoutDelimited to Emotion and clean up a good deal of the markup and CSS then.

I took a pass but also cannot find a root issue. I did compare the computed styles on .euiFormControlLayout__childrenWrapper between the code sandbox & kibana which found these differences:

console.log(JSON.stringify(window.getComputedStyle($0), null, 2))

- "blockSize": "40px",
+ "blockSize": "17px",

- "height": "40px",
+ "height": "17px",

- "perspectiveOrigin": "85.2891px 20px",
+ "perspectiveOrigin": "85.2891px 8.5px",

- "transformOrigin": "85.2891px 20px",
+ "transformOrigin": "85.2891px 8.5px",

- "webkitLocale": "auto",	
- "webkitLogicalHeight": "40px",
+ "webkitLocale": "\"en\"",
+ "webkitLogicalHeight": "17px",

Doesn't point to what is causing the difference, but the perspective/transform origin might be interesting? The 20px/8.5px ratio matches 40px/17px.

I moved things around, disabled various style & link elements, added & removed rules, but nothing stands out to me 😕

@constancecchen recommends addressing this in the Emotion conversion