feat(button-link): add button link and button link with icon #137

[rbarilani]

• feat(button-link): add button link and button link with icon Create dc-btn--link #137
• chore(fabricator): downgrade to 1.1.10 due to an issue, see v1.1.11: You must pass a string or Handlebars AST to Handlebars.compile. fbrctr/fabricator-assemble#40 Create dc-btn--link #137

PLEASE RUN: npm update fabricator-assemble

@dami-gg @gabrielhl @xonic @mrac WDYT?

!!! #159 must be merged before this one !!!

[rbarilani]

@gabrielhl Can you add some notes for the flat button and flat button icon and maybe find a better way to present this component in the demo section?

[gabrielhl]

Would switch this for border-color:transparent. Border: 0 makes the flat button height 2px smaller than the other buttons.

[gabrielhl]

@rbarilani will do that now

[rbarilani]

reminder for me: remove dc-btn--link-large, etc. (use dc-btn--large).

[rbarilani]

@gabrielhl @xonic at this point I would like to remove also dc-btn--link-[success,destroy,disabled] and just use dc-link--[success,destroy,disabled]. WDYT?

[gabrielhl]

Since it's a button atom, shouldn't we be using dc-btn--destroy, dc-btn--disabled etc?

[xonic]

+1 for btn modifiers

On 24.03.2016, at 11:21, Gabriel Lovato [email protected] wrote:

Since it's a button atom, shouldn't we be using dc-btn--destroy, dc-btn--disabled etc?

―
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

[rbarilani]

@xonic @gabrielhl Well I can't use btn modifiers because they add background and border and white color. So unless I do a specific selector like .dc-btn--link.dc-btn--destroy I can't use them. (and that's against our extreme approach)

[xonic]

From a logical perspective, to me, the link button belongs to the group of buttons. I don't think that btn--link should be combined with other mods than --disabled. To be sure though, and give more flexibility, I'd override the background. What do you think guys?

[rbarilani]

The thing is that we our current approach users of our library can work just with mixins, like so:

.3rdparty-link-success {
 @include dc-btn;
 @include dc-btn--link;
 @include dc-btn--link--success;
}

// or

.3rdparty-link {
  @include dc-btn;
  @include dc-btn--link;
}
.3rdparty-link.disabled {
   @include dc-btn--link--disabled;
}

This is possible because we don't rely directly on selectors.
But ok we can relax that concept now, if you want.

[gabrielhl]

Would something like this maybe work? Defining the state as a mixin and then combining the selector?

@mixin dc-btn--link--destroy--no-touch; {
    &:hover {
        background: transparent;
        color: $dc-red50;
    }
}

and then when definining the selectors

.no-touch .dc-btn-link.dc-btn--destroy {
        @include dc-btn--link--destroy--no-touch;
}

[rbarilani]

Would something like this maybe work? Defining the state as a mixin and then combining the selector?

@mixin dc-btn--link--destroy--no-touch; {
&:hover {
background: transparent;
color: $dc-red50;
}
}
and then when definining the selectors

.no-touch .dc-btn-link.dc-btn--destroy {
@include dc-btn--link--destroy--no-touch;
}

Yep is what I'm doing to have both approaches available. It can work and I like it BUT I have only one doubt: btn--link can have also a success modifier unlike dc-btn... IHMO we should add a dc-btn--success modifier valid for dc-btn and dc-btn--link.... WDYT?

[xonic]

@rbarilani Ok, I've discussed the issue with @gabrielhl and we think the following makes sense:

• Remove .dc-link--success --> we're not ever gonna need this kind of modifier
• Make the combination of .dc-btn--link.dc-btn--destroy work. How? In idle state it should look like .dc-btn--link and on :hover it should look like the ordinary .dc-btn--destroy

[rbarilani]

@gabrielhl @xonic ok maybe now is done. @gabrielhl can you update the .dc-btn--link note?