feat(data-grid) Add actions cell type

[jano314159]

No description provided.

[acstll]

Thank you @sagi-t this is great!

My only comment is regarding a little change in the CSS.

And also, I would ask you to run the code formatter too (you can do yarn format from the root folder or from packages/components).

Before this is ready to merge, we need to update the documentation (Storybook). There's some info regarding cell types in packages/storybook-vue/stories/3_components/data-grid/DataGrid.stories.mdx…

Is this something you'd like to give it a try? I can also help, just let me know.

Thanks again!

[acstll]

@sagi-t thanks again for the update!

We were discussing yesterday that it would be nice to offer the possibility also to have buttons with icons or icon-only buttons.

I thought about this for the implementation:

const { label, ...props } = action;
+ if (typeof label === 'object' && '__html' in label) {
+   return <scale-button innerHTML={label.__html} {...props}></scale-button>;
+ }
return <scale-button {...props}>{label}</scale-button>;

so one can replace the label with some HTML, but we still keep label as the only prop in the row object not going into the button as attribute, which I think is important to keep the API clean and consistent.

{
  label: {
    __html: `<scale-icon-action-edit></scale-icon-action-edit>`
  },
  variant: 'secondary',
  iconOnly: 'true',
  ariaLabel: 'Edit',
  onClick: () => { /* ... */ },
}

Do you agree? would you do it differently?

[jano314159]

Hi @acstll. No I don't, I totally agree with you because these options are very important in this concept and also for us, We just didn't think of it :D So thank you. I will make the change as soon as possible.

if it is okay for you. :)

[acstll]

if it is okay for you. :)

totally OK 👍

I will then take care of the documentation part afterwards.

Thanks again!

[jano314159]

Thank you @acstll
I'm Finished. We are looking forward to the documentation part from your side :D
After is it merged when can we expect this to be released? We would like to use this component as soon as possible 💯

[acstll]

thank you @sagi-t!

I'll take care of the docs in a different PR.

We can make a release tomorrow, with the feature undocumented, so you can start using it right away :)

The prettier check is still failing (which is weird, since you already did that in 78ec7b8); could you please try and run yarn format once more inside packages/components/?

[jano314159]

thank you @sagi-t!

I'll take care of the docs in a different PR.

We can make a release tomorrow, with the feature undocumented, so you can start using it right away :)

The prettier check is still failing (which is weird, since you already did that in 78ec7b8); could you please try and run yarn format once more inside packages/components/?

Yes of course :)

[jano314159]

thank you @sagi-t!
I'll take care of the docs in a different PR.
We can make a release tomorrow, with the feature undocumented, so you can start using it right away :)
The prettier check is still failing (which is weird, since you already did that in 78ec7b8); could you please try and run yarn format once more inside packages/components/?

Yes of course :)

Hmm🧐. Interesting I did that a second ago and everything is fine nothing changes on the files.
Am I do something wrong? :D

[acstll]

Hmm🧐. Interesting I did that a second ago and everything is fine nothing changes on the files.
Am I do something wrong? :D

that is weird indeed, can you try with yarn instead of npm? (we use Yarn v1) — that makes a difference sometimes 🤷
also, you can try yarn format directly from the packages/components directory, not from the root.

Let me know how that goes.

(I can still merge it and fix it later.)

Thank you 🙏

[jano314159]

Hmm🧐. Interesting I did that a second ago and everything is fine nothing changes on the files.
Am I do something wrong? :D

that is weird indeed, can you try with yarn instead of npm? (we use Yarn v1) — that makes a difference sometimes 🤷
also, you can try yarn format directly from the packages/components directory, not from the root.

Let me know how that goes.

(I can still merge it and fix it later.)

Thank you 🙏

Yay 🥶 So now I used yarn format instead of npm in the packages/components directory as you can see the picture below 👇

But nothing has changed 😮‍💨 Sorry for that @acstll. Any idea for the possible solution ?
I'm looking forward to your response and thank you for your patience 🙏

[acstll]

No worries, I'm gonna merge and then re-check if the prettier issue persist, and fix it in another PR :)

[acstll]

Thank you very much, once more @sagi-t

We'll make the release on Monday 🙏