[locked] Menu Buttons Standartization

[silviyaboteva]

Quick Overview

The main concept is described here: #1617

This discussion covers the DropDownButton and SplitButton.

In this discussion, we will write down the questions that arise during the process of standardizing the Menu Buttons and the decisions we make. After all discussed cases are addressed, in the corresponding issue 1 and issue 2 we will list the statements and the expected result of the task.

Now up to the new features:

Content

Menu button should be able to show / hide dropdown arrow. Menu button dropdown arrow must respect theme settings about sizing: auto or fixed.
Split button dropdown arrow must respect theme settings about sizing -- auto or fixed.

Fill Mode, Size, Rounding, Shape, Theme Color properties

We will utilize props for the same, but they will be applied to the underlying element/s.

Rendering

<!-- default rendering of ddbutton-->
<div class="k-dropdown-button">
  <button
    type="button"
    class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
  >
    <span class="k-button-icon k-icon k-i-gear"></span>
    <span class="k-button-text">Text</span>
    <span className="k-icon k-i-chevron-down"></span>
  </button>
</div>

<-- classes variants for ddbutton --> 
<div class="k-dropdown-button">
<button type="button" class="
   k-button 
   k-button-solid | k-button-outline | k-button-flat | k-button-link | undefined
   k-button-md | k-button-sm | k-button-lg | undefined
   k-button-rectangle | k-button-square
   k-rounded-md | k-rounded-sm | k-rounded-lg | k-rounded-circle | k-rounded-pill | undefined
   k-button-solid-base | k-button-solid-primary | k-button-solid-secondary | k-button-solid-tertiary | k-button-solid-info | k-button-solid-success | k-button-solid-warning | k-button-solid-error | k-button-solid-dark | k-button-solid-light | k-button-solid-inverse | 
    k-button-outline-base | k-button-outline-primary | k-button-outline-secondary | k-button-outline-tertiary | k-button-outline-info | k-button-outline-success | k-button-outline-warning | k-button-outline-error | k-button-outline-dark | k-button-outline-light | k-button-outline-inverse | 
    k-button-flat-base | k-button-flat-primary | k-button-flat-secondary | k-button-flat-tertiary | k-button-flat-info | k-button-flat-success | k-button-flat-warning | k-button-flat-error | k-button-flat-dark | k-button-flat-light | k-button-flat-inverse | 
    k-button-link-base | k-button-link-primary | k-button-link-secondary | k-button-link-tertiary | k-button-link-info | k-button-link-success | k-button-link-warning | k-button-link-error | k-button-link-dark | k-button-link-light | k-button-link-inverse | undefined
">
    <span class="k-button-icon k-icon k-i-folder"></span>
    <span class="k-button-text">Button</span></button>
    <span className="k-icon k-i-chevron-down"></span>
</button>
</div>

<!-- default rendering of splitbutton-->
<div class="k-split-button k-button-group">
  <button
    class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
    type="button"
  >
    <span className="k-button-icon k-icon k-i-save"></span>
    <span className="k-button-text">Text</span>
  </button>
  <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button">
    <span role="presentation" class="k-icon k-i-arrow-s"></span>
  </button>
</div>

<-- classes variants for splitbutton --> 
<div class="k-split-button k-button-group">
<button type="button" class="
   k-button 
   k-button-solid | k-button-outline | k-button-flat | k-button-link | undefined
   k-button-md | k-button-sm | k-button-lg | undefined
   k-button-rectangle | k-button-square
   k-rounded-md | k-rounded-sm | k-rounded-lg | k-rounded-circle | k-rounded-pill | undefined
   k-button-solid-base | k-button-solid-primary | k-button-solid-secondary | k-button-solid-tertiary | k-button-solid-info | k-button-solid-success | k-button-solid-warning | k-button-solid-error | k-button-solid-dark | k-button-solid-light | k-button-solid-inverse | 
    k-button-outline-base | k-button-outline-primary | k-button-outline-secondary | k-button-outline-tertiary | k-button-outline-info | k-button-outline-success | k-button-outline-warning | k-button-outline-error | k-button-outline-dark | k-button-outline-light | k-button-outline-inverse | 
    k-button-flat-base | k-button-flat-primary | k-button-flat-secondary | k-button-flat-tertiary | k-button-flat-info | k-button-flat-success | k-button-flat-warning | k-button-flat-error | k-button-flat-dark | k-button-flat-light | k-button-flat-inverse | 
    k-button-link-base | k-button-link-primary | k-button-link-secondary | k-button-link-tertiary | k-button-link-info | k-button-link-success | k-button-link-warning | k-button-link-error | k-button-link-dark | k-button-link-light | k-button-link-inverse | undefined
">
    <span class="k-button-icon k-icon k-i-save"></span>
    <span class="k-button-text">Text</span></button>
</button>
<button class="...">
    <span role="presentation" class="k-icon k-i-arrow-s"></span>
  </button>
</div>

Menu Items part

TODO

Component API

In this section, we can think and write down the list of the props that will be added to the component. I'll start with the React Buttons:

 <DropDownButton
    items={data}
    text="Text"
    icon="gear"
    iconPosition={'start (Default) | end'}
    showArrow={true | false (Default)}
    arrowIconName={'star'}
    size={'small | medium (Default) | large | none'}
    themeColor={'base (Default) | primary | secondary | tertiary | info | success | warning | error | dark | light | inverse | none'}
    shape={ 'rectangle (Default) | square | none' }
    rounded={'small | medium | large | circle | pill | none '}
    fillMode={'solid (Default) | outline | flat | | link | none'}
    >
</DropDownButton>

<SplitButton
  items={data}
  text="Text"
  icon="save"
  iconPosition={'start (Default) | end'}
  arrowIconName={'something'}
  size={'small | medium (Default) | large | none'}
  themeColor={'base (Default) | primary | secondary | tertiary | info | success | warning | error | dark | light | inverse | none'}
  shape={ 'rectangle (Default) | square | none' }
  rounded={'small | medium | large | circle | pill | none '}
  fillMode={'solid (Default) | outline | flat | | link | none'}
/>

Playground

https://stackblitz.com/edit/react-uvyvdj?file=app%2Fmain.tsx

[silviyaboteva]

Tagging for visibility, comments and concerns: @tapopov @Raisolution @zdravkov @jivanova @Xizario @VicTachev @nenchef