Button - iconPosition center doesn't work

[flashultra]

When set iconPosition = "center"; and have textAlign = "center"; on button , both ( text and icon ) are set on the left side of the button. ( using new-component-model , haxeui-openfl -> html5 )

[ianharrigan]

What is the effect you are looking for with center / center? The text being in the center of the button icon?

[flashultra]

No. Icon to be on the center and text to be after the icon or maybe icon + text with some offset to be at center. Here is example at the moment with:

1. icon = left , text = center
2. icon = center , text = center

So maybe center , center should look more like 1 ) ? Defiantly 2) looks wrong

[ianharrigan]

right, so i think left / center is the whole "thing" (icon and text) centered. Basically, the icon position is relative to the label position, so "right" means "right of the label", "top" means "top of the label", etc. I cant add some type of handling for center / center, but im not sure what it should look like... the text in the center of the icon and the whole thing centered in the button? I agree that #2 certainly doesnt look right - its just a question of what does for those params.

Ian

[flashultra]

I see - icon position is relative to label position . I just test left - left and looks ok i.e first show icon after that text . I think center should do the same - icon on the center and after that arrow ( as I mention above maybe same as left - center ? ) Here is left - left ( looks ok ) :

Here is right - right which looks more like right - center ( for text)

One more ( text - center , icon - right )

[ianharrigan]

Yeah, you are right... makes sense... those two are not consistent.

[flashultra]

So for me : 1, left- left is ok 2. right - right - maybe icon and text should be at the right side of the button ? 3, center ( text ) - left ( icon ) - ok 4, center ( text ) - right (icon ) - ok 5, center - center - wrong

[ianharrigan]

Cool - ill have a look at them, work out all the variants and see what looks off... but yeah, the fact they are inconsistent means something should be done about it

[flashultra]

I forgot about variant when icon is center , so

1. text = left, icon = center
2. text = right, icon = center

Both doesn't looks right too

[ianharrigan]

I guess the best test app for this is:

    <grid columns="6">
        <label />
        <label text="left" horizontalAlign="center" />
        <label text="center" horizontalAlign="center" />
        <label text="right" horizontalAlign="center" />
        <label text="top" horizontalAlign="center" />
        <label text="bottom" horizontalAlign="center" />
        
        <label text="left" verticalAlign="center" />
        <button text="Text" width="100" height="100" iconPosition="left" textAlign="left" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="right" textAlign="left" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="center" textAlign="left" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="top" textAlign="left" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="bottom" textAlign="left" icon="haxeui-core/styles/default/haxeui_small.png" />
        
        <label text="center" verticalAlign="center" />
        <button text="Text" width="100" height="100" iconPosition="left" textAlign="center" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="right" textAlign="center" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="center" textAlign="center" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="top" textAlign="center" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="bottom" textAlign="center" icon="haxeui-core/styles/default/haxeui_small.png" />
        
        <label text="right" verticalAlign="center" />
        <button text="Text" width="100" height="100" iconPosition="left" textAlign="right" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="right" textAlign="right" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="center" textAlign="right" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="top" textAlign="right" icon="haxeui-core/styles/default/haxeui_small.png" />
        <button text="Text" width="100" height="100" iconPosition="bottom" textAlign="right" icon="haxeui-core/styles/default/haxeui_small.png" />
    </grid>

certainly inconsistencies:

[flashultra]

Are you sure about center - center ? It's different from my test. On your test you have : left, right , center , top , bottom , but you name it wrong - left, center, right, top , bottom

[intoxopox]

Yes, the top labeling should read left, right, center, top, bottom. I can confirm that the issues with iconPosition center still exist.