Lib: Refactor icon buttons

[xak]

Detailed description

Icon-only

The icon button — no text, only icon — was built to assume it would be empty. The styles remove the padding to ensure the buttons remain square.

&:empty {
  padding: 0;
}

There are some problems with approach.

• Cannot use an SVG or counter inside the button, padding remains.
• Cannot use input[type=button], padding removed

Icon and text

The icon is placed with ::before or ::after (RTL) meaning we cannot use an icon after the button text. In rare cases, such as a "Next" button the icon would be after the text.

Recommendation

We can begin transitioning toward using icons inside the button which will allow for before and after icons.

This should be the preferred markup for icon + text buttons ...

<button class="fd-button">
  <span class="sap-icon--navigation-left-arrow fd-button__icon" role="presentation"></span> <span class="fd-button__text">Previous</span>
</button>
<button class="fd-button">
  <span class="fd-button__text">Next</span> <span class="sap-icon--navigation-right-arrow fd-button__icon" role="presentation"></span>
</button>

To handle icon-only buttons we can introduce a new icon-button component to be used with button classes.

Either of these markups should work ...

<button class="fd-button fd-icon-button sap-icon--delete"></button>
<button class="fd-button fd-icon-button">
  <span class="sap-icon--delete fd-button__icon"></span>
</button>

The above should be possible to do without breaking the current implementation.

Note: A new __text element wraps the button label. This should be added to examples even if it is not required initially. This container will give us more flexibility.

The icon-button class will only remove the padding. The relationship between the icon and text can adjust the padding as needed.

Rough SASS ...

$block: #{$fd-namespace}-button;
.#{$block} {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  &__icon {
    @at-root {
      svg#{&} {
        //height and width
      }
    }
    & + .#{$block}__text {
      //padding-left
    }
  }
  &__text {
    & + .#{$block}__icon {
      //padding-left
    }
  }
}
$block: #{$fd-namespace}-icon-button;
.#{$block} {
  padding: 0;
}

Test

The final implementation should apply consistent styles to all of these configurations.

<button class="fd-button fd-icon-button sap-icon--delete"></button>
<button class="fd-button fd-button--compact fd-icon-button sap-icon--delete"></button>
<button class="fd-button fd-icon-button">
  <span class="sap-icon--delete fd-button__icon"></span>
</button>
<button class="fd-button fd-button--compact fd-icon-button">
  <span class="sap-icon--delete fd-button__icon"></span>
</button>
<button class="fd-button">
  <span class="sap-icon--bell fd-button__icon"></span>
  <span class="fd-button__text fd-counter fd-counter--notification" aria-label="Unread count">5000+</span>
</button>
<button class="fd-button fd-button--compact" aria-label="Notifications">
  <span class="sap-icon--bell fd-button__icon"></span>
  <span class="fd-button__text fd-counter fd-counter--notification" aria-label="Unread count">500</span>
</button>
<button class="fd-button">
  <span class="sap-icon--navigation-left-arrow fd-button__icon" role="presentation"></span> <span class="fd-button__text">Previous</span>
</button>
<button class="fd-button fd-button--compact">
  <span class="sap-icon--navigation-left-arrow fd-button__icon" role="presentation"></span> <span class="fd-button__text">Previous</span>
</button>
<button class="fd-button">
  <span class="fd-button__text">Next</span> <span class="sap-icon--navigation-right-arrow fd-button__icon" role="presentation"></span>
</button>
<button class="fd-button fd-button--compact">
  <span class="fd-button__text">Next</span> <span class="sap-icon--navigation-right-arrow fd-button__icon" role="presentation"></span>
</button>
<button class="fd-button">
    <svg class="fd-button__icon"viewBox="0 0 19.4 20" id="icon-create"><path d="M8.1 18.4V20H0V6.8L6.7 0H15v7h-1.7V1.7H7.5v5.8H1.6v10.9h6.5zm11.3-4.6H15V9.3h-1.7v4.5H8.8v1.7h4.5V20H15v-4.5h4.5v-1.7z"/></svg>
</button>
<button class="fd-button fd-button--compact">
  <svg class="fd-button__icon" viewBox="0 0 19.4 20" id="icon-create"><path d="M8.1 18.4V20H0V6.8L6.7 0H15v7h-1.7V1.7H7.5v5.8H1.6v10.9h6.5zm11.3-4.6H15V9.3h-1.7v4.5H8.8v1.7h4.5V20H15v-4.5h4.5v-1.7z"/></svg>
</button>
<input class="fd-button" type="button" name="" value="Submit">
<input class="fd-button fd-button--compact" type="button" name="" value="Submit">