gravity-ui/components

Feat(DefinitionList)

Opened this issue · 5 comments

Please add an editable property or the ability to add your own controls:

image

@Raubzeug Hi! Would you triage this one?

@lu-perfect Hi! If I understood you correctly, such an ability is already supported in the DefinitionList: content property is ReactNode, so you can pass whatever you need.

@Raubzeug

It seems to me that this is wrong, you can also say that you have html and css, why do you need uikit.
If something repeats frequently, it should be highlighted as a separate feature.

I would like to have a more flexible api. Then why did you add the copy options? You could also write - use content.

For example, if you have an entity with 20 properties, will you prescribe your solutions for each property? (I wrote a rough code, obviously we will allocate it rather into a component of some kind. But it will be dirty anyway, as library users will need to figure out how it should look themselves.).

<DefinitionList
        items={[
          {
            name: "Test 1",
            content: (
              <div
                style={{ display: "flex", alignItems: "center", gap: "4px" }}
              >
                <span>test</span>
                <Button size="s">
                  <Icon size={14} data={Pencil} />
                </Button>
              </div>
            ),
            copyText: "test",
          },
          {
            name: "Test 2",
            content: (
              <div
                style={{ display: "flex", alignItems: "center", gap: "4px" }}
              >
                <span>test 2</span>
                <Button size="s">
                  <Icon size={14} data={Pencil} />
                </Button>
              </div>
            ),
            copyText: "test",
          },
          {
            name: "Test 3",
            content: (
              <div
                style={{ display: "flex", alignItems: "center", gap: "4px" }}
              >
                <span>test 3</span>
                <Button size="s">
                  <Icon size={14} data={Pencil} />
                </Button>
              </div>
            ),
            copyText: "test",
          },
        ]}
      />

I would like to see:
a) an array of actions so that it all looks in the same style and so that the developers who use it do not think about how to make it look adequate in the general concept
b) edit property, similar to copy

btw, you are already using this in production, and given that the icon here is quite strange, I assume that the situation I was talking about arose here - the developer had to come up with how the basic functionality should look and work.

telegram-cloud-photo-size-2-5231018142598289467-y

@lu-perfect
We discussed this issue deeper and it seems that copy is essential action, that most of users will want to use in DefinitionList, but other actions like edit or maybe click, or go outside link etc. are much rarer cases.
And if we decide to implement all of this cases, component will grow complicated and hard to maintain, not to say that all of this cases has lots of ways to implement, and every user has his own best one.
Every component in every library has it's own level of abstraction. We provide api that allows to handle most of user's needs (we hope so), but sometimes it takes a little harder, I admit.
In you case I suggest to make content a separate component, so you won't need lots of copy-paste.

Btw, the example, you showed is an old component, even not from this library. I hope guys will move to a fresh one, and it will look much nicer.