New behaviour for selects #269

iamdanchi · 2022-05-20T14:53:26Z

lib/moon/components/select/single_select.ex

theycallmehero

Please see comment. We can discuss also, what would be nice API.

lib/moon/components/select/icon.ex

lib/moon/components/select/single_select.ex

lib/moon/components/select/dropdown.ex

lib/moon/components/select/multi_select.ex

theycallmehero · 2022-05-24T22:48:55Z

Basic motivation for this response:

Moon should not know anything about content it renders. It renders content. Having Icon or Logo or whatever knowledge is too much.
Moon Dropdown supports left_icon and right_icon already

Missing totally: content slot for MultiSelect for passing Dropdown with left_icon for example

Working example for Dropdown can be seen at:
https://github.com/coingaming/moon/blob/main/lib/moon_web/pages/components/select/dropdown_page.ex#L82-L92

This does basically everything that is required?

Now, what was missing. Inside of MultiSelect (https://github.com/coingaming/moon/blob/main/lib/moon/components/select/multi_select.ex#L149) there is <:content><:content> block. That needs to be Dropdown or slot with previous links content.

Now it basically works? (Like 3 lines of code for if-else added?)

Needs change: options prop

Additional feature. From your Affiliates code PR I see, that you try to add some props to options, so that dropdown visuals is generated from that.

Links:

icon: if(model.site.uid, do: prepare_logo_name(model.site.uid), else: "")

I think we could support this, but prefered naming for options prop would be:

 %{
        label: model.site.uid,
        value: model.id,
        left_icon_component: SomeLogoOrWhatEverComponent
  }

And this render to proper place:

<.live_component module={option.left_icon_component} id={option.value} />

Recommendations for future

Start from documentation Page example. In our case, it could have been MultiSelectPage improvement to support left_icon and right_icon example, based on DropdownPage example with left_icon or right_icon.

theycallmehero · 2022-06-02T17:48:33Z

lib/moon/components/list_items/single_line_item.ex

-          "text-trunks-100": !@current,
-          "w-10": @size == "medium",
-          "w-12": @size == "large"
+          "left-0",


We wrote 100% working code with flex and gap? Why that code is not used?

We wrote code, where bad position for for right_icon, because right_icon should be anchored to the edge of the element. So I reworked it again.

In your implementation, need to add classes for the right_icon object in the passed value, and not set in the template of the called module. I think it's bad, because need to do it on every call

I do not know even how to address this. Have we talked, that you should read TailwindCSS and understand it?

It makes me relatively sad, I show how it works, but you decide, that "Nah, I do it other way and I do not ask help, why Margus did show me".

If it happens once, that is ok, but it is kind of common pattern and makes me "wtf" already.

https://tailwindcss.com/docs/flex-grow

Can you restore back to the code that we wrote togeather (for a reason)?

So, I see. I returned it the way we did

iamdanchi · 2022-06-06T07:48:02Z

@margusp2heathmont please look on it.
Two question

About icon/logo. If we use it with call render function, we have a problem with default values (described in the prop are don't apply) Also it's not rerendered (I don't know why it happened)
What we do with flags? I prefer the same behavior as with the icon/logo. But where to get them? can be generated from charlists like regular emoticons. unfortunately I did not find how it was done in the moon-design

lib/moon/components/select/single_select.ex

lib/moon/components/select/dropdown.ex

lib/moon/components/select/helpers.ex

theycallmehero · 2022-06-13T15:27:33Z

lib/moon/components/select/single_select.ex

+          />
+        {/if}
+
+        <!--


Why there are comments in code?

It should work with classes, but it doesn't work on my side
Maybe you know how to fix it

theycallmehero · 2022-06-13T15:30:40Z

lib/moon_web/pages/components/select/single_select_page.ex

+            <:example>
+              <div class="flex flex-col gap-4">
+                <Form for={@user_changeset} change="form_update" submit="form_submit">
+                  <Field name={:role}>


Why there are 3 same forms?

it's 3 same forms with various fillings

label

inner label

inner label + with icon

theycallmehero

Good work!

Please help to understand, added few questions.

theycallmehero

Very good work!

Thank you and approved.

iamdanchi requested a review from theycallmehero May 20, 2022 14:53

theycallmehero reviewed May 23, 2022

View reviewed changes

lib/moon/components/select/single_select.ex Outdated Show resolved Hide resolved

theycallmehero requested changes May 23, 2022

View reviewed changes

iamdanchi force-pushed the hotfix/selects branch from dbe0b58 to b04c6f8 Compare May 24, 2022 09:39

iamdanchi requested a review from theycallmehero May 24, 2022 16:57

theycallmehero reviewed May 24, 2022

View reviewed changes

lib/moon/components/select/icon.ex Outdated Show resolved Hide resolved

theycallmehero reviewed May 24, 2022

View reviewed changes

lib/moon/components/select/single_select.ex Outdated Show resolved Hide resolved

theycallmehero reviewed May 24, 2022

View reviewed changes

lib/moon/components/select/dropdown.ex Show resolved Hide resolved

theycallmehero reviewed May 24, 2022

View reviewed changes

lib/moon/components/select/multi_select.ex Outdated Show resolved Hide resolved

iamdanchi force-pushed the hotfix/selects branch 3 times, most recently from b6a8c97 to 6c83e08 Compare June 1, 2022 09:36

theycallmehero reviewed Jun 2, 2022

View reviewed changes

iamdanchi force-pushed the hotfix/selects branch from df6e7b4 to 9790c0d Compare June 3, 2022 08:27

iamdanchi requested a review from theycallmehero June 6, 2022 07:48

theycallmehero reviewed Jun 6, 2022

View reviewed changes

lib/moon/components/select/single_select.ex Outdated Show resolved Hide resolved

iamdanchi force-pushed the hotfix/selects branch from 6c75f8d to fa56ee3 Compare June 7, 2022 17:10

iamdanchi changed the title ~~New behaviour for selects~~ [WIP] New behaviour for selects Jun 7, 2022

iamdanchi requested a review from theycallmehero June 8, 2022 06:27

iamdanchi force-pushed the hotfix/selects branch 2 times, most recently from 6f11316 to 096b6cf Compare June 13, 2022 14:14

iamdanchi changed the title ~~[WIP] New behaviour for selects~~ New behaviour for selects Jun 13, 2022

theycallmehero approved these changes Jun 13, 2022

View reviewed changes

theycallmehero reviewed Jun 13, 2022

View reviewed changes

lib/moon/components/select/dropdown.ex Outdated Show resolved Hide resolved

theycallmehero reviewed Jun 13, 2022

View reviewed changes

lib/moon/components/select/helpers.ex Outdated Show resolved Hide resolved

theycallmehero reviewed Jun 13, 2022

View reviewed changes

theycallmehero requested changes Jun 13, 2022

View reviewed changes

iamdanchi added 2 commits June 14, 2022 12:37

small fixes

b75305d

reworked dropdown, single/multi select

a60ac88

theycallmehero approved these changes Jun 14, 2022

View reviewed changes

small fixes

b7d1c0a

iamdanchi force-pushed the hotfix/selects branch from 58bf604 to b7d1c0a Compare June 14, 2022 11:25

iamdanchi merged commit 5a481af into main Jun 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New behaviour for selects #269

New behaviour for selects #269

iamdanchi commented May 20, 2022 •

edited

Loading

theycallmehero left a comment

theycallmehero commented May 24, 2022 •

edited

Loading

theycallmehero Jun 2, 2022 •

edited

Loading

iamdanchi Jun 6, 2022

theycallmehero Jun 6, 2022 •

edited

Loading

iamdanchi Jun 7, 2022

iamdanchi Jun 8, 2022

iamdanchi commented Jun 6, 2022

theycallmehero Jun 13, 2022

iamdanchi Jun 13, 2022

theycallmehero Jun 13, 2022

iamdanchi Jun 13, 2022

theycallmehero left a comment

theycallmehero left a comment

+                        />
+                      {/if}
+                      <!--

New behaviour for selects #269

New behaviour for selects #269

Conversation

iamdanchi commented May 20, 2022 • edited Loading

theycallmehero left a comment

Choose a reason for hiding this comment

theycallmehero commented May 24, 2022 • edited Loading

Missing totally: content slot for MultiSelect for passing Dropdown with left_icon for example

Needs change: options prop

Recommendations for future

theycallmehero Jun 2, 2022 • edited Loading

Choose a reason for hiding this comment

iamdanchi Jun 6, 2022

Choose a reason for hiding this comment

theycallmehero Jun 6, 2022 • edited Loading

Choose a reason for hiding this comment

iamdanchi Jun 7, 2022

Choose a reason for hiding this comment

iamdanchi Jun 8, 2022

Choose a reason for hiding this comment

iamdanchi commented Jun 6, 2022

theycallmehero Jun 13, 2022

Choose a reason for hiding this comment

iamdanchi Jun 13, 2022

Choose a reason for hiding this comment

theycallmehero Jun 13, 2022

Choose a reason for hiding this comment

iamdanchi Jun 13, 2022

Choose a reason for hiding this comment

theycallmehero left a comment

Choose a reason for hiding this comment

theycallmehero left a comment

Choose a reason for hiding this comment

iamdanchi commented May 20, 2022 •

edited

Loading

theycallmehero commented May 24, 2022 •

edited

Loading

theycallmehero Jun 2, 2022 •

edited

Loading

theycallmehero Jun 6, 2022 •

edited

Loading