How to apply Grommet opt-in options on every type of import

AntoineDuComptoirDesPharmacies commented 5 months ago

Is this something you or your team is interested in contributing a pull request towards?

Depending of the cause, and difficulty to understand/fix.

Expected Behavior

When enabling a opt-in feature on Grommet node, the feature is applied for available for every component, without taking into consideration the way it have been imported.

Actual Behavior

When enabling a opt-in feature on Grommet node, the feature is only applied for components that have been imported the same way as Grommet component.

URL, screen shot, or Codepen exhibiting the issue

The example here is about the opt-in cssGap of box.

Both import using roots (Working) : https://codesandbox.io/p/sandbox/grommet-v2-template-roots-import-rvj3kr?file=%2Findex.js%3A15%2C22-15%2C32

Both import using file level (Working) : https://codesandbox.io/p/sandbox/grommet-v2-template-file-import-q2l5gp?file=%2Findex.js%3A15%2C9

Mix of import (Not working) : https://codesandbox.io/p/sandbox/grommet-v2-template-mixed-import-f6j35v?file=%2Findex.js%3A11%2C15

Steps to Reproduce

Go to one of the sandbox linked above.
Open developper console and check if the gap have been created through CSS or using an invisible DOM element

Your Environment

Grommet version: 2.38.0
Browser Name and version: Chrome 126
Operating System and version (desktop or mobile): Windows 10 Desktop

britt6612 commented 5 months ago

@AntoineDuComptoirDesPharmacies I was trying to open your codesandbox where it is not working and was getting an error. Can you paste a code snippet or check the link please?

AntoineDuComptoirDesPharmacies commented 5 months ago

@britt6612, You are right, I didn't notice that these code sandbox were private. I put them in public mode.

Here are some additional code snippet.

Both import using roots (Working) : import { grommet, Box, Heading, Grommet, Paragraph } from "grommet";

Both import using file level (Working) :

import { Grommet } from "grommet/components/Grommet";
import { Box } from "grommet/components/Box";

Mix of import (Not working) :

import { grommet, Heading, Grommet, Paragraph } from "grommet";

import { Box } from "grommet/components/Box";

For everyone :

  <Grommet
    theme={grommet}
    options={{
      box: {
        cssGap: true,
      },
    }}
  >
    <Box pad="small" gap="50px">
      <Heading>Hello World</Heading>
      <Paragraph>Hello from a Grommet page!</Paragraph>
    </Box>
  </Grommet>

Yours faithfully, LCDP

grommet / grommet