fd-table__(cell|row)--activable, text color not inverted inside button or input

[reinholdk]

Describe the bug

Texts on buttons or inputs inside a table cell become invisible on activation of the cell/row.

Is this issue related to a specific component?

fd-button, fd-input, fd-table__row--activable

What version of the Fundamental Library Styles are you using?

0.18.0

What front-end framework are you implementing in, e.g., Angular, React, etc.?

other

To Reproduce Steps to reproduce the behavior: Click on the first row -> button and input text become invisible.

<table class="fd-table">
  <thead class="fd-table__header">
    <tr class="fd-table__row">
      <th class="fd-table__cell fd-table__cell--activable fd-table__cell--hoverable" scope="col">Hovering And</th>
      <th class="fd-table__cell fd-table__cell--activable fd-table__cell--hoverable" scope="col">Clicking</th>
      <th class="fd-table__cell fd-table__cell--activable fd-table__cell--hoverable" scope="col">On Header's Cell</th>
      <th class="fd-table__cell fd-table__cell--activable fd-table__cell--hoverable" scope="col">Will Trigger</th>
      <th class="fd-table__cell fd-table__cell--activable fd-table__cell--hoverable" scope="col">Color Change</th>
    </tr>
  </thead>
  <tbody class="fd-table__body">
    <tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable">
      <td class="fd-table__cell"><input type="text" class="fd-input" value="Test"></fd>
      <td class="fd-table__cell">
        <button class="fd-button">On This Row will cause</button>
      </td>
      <td class="fd-table__cell">
        <span class="fd-object-number fd-object-number--negative">
                    <span class="fd-object-number__text">-2,000.00</span><span class="fd-object-number__unit">EUR</span>
        </span>
      </td>
      <td class="fd-table__cell">
        <span class="fd-object-status fd-object-status--negative">
                    <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
                    <span class="fd-object-status__text">Highlight of Whole Row</span>
        </span>
      </td>
      <td class="fd-table__cell">01/26/17</td>
    </tr>
    <tr class="fd-table__row">
      <td class="fd-table__cell fd-table__cell--activable">Clicking On Cell</td>
      <td class="fd-table__cell fd-table__cell--activable">
        <a class="fd-object-marker fd-object-marker--link">
          <i class="fd-object-marker__icon sap-icon--private" role="presentation"></i>
          <span class="fd-object-marker__text">Will cause</span>
        </a>
      </td>
      <td class="fd-table__cell fd-table__cell--activable">Highlight of cell</td>
      <td class="fd-table__cell fd-table__cell--activable">Last Name</td>
      <td class="fd-table__cell fd-table__cell--activable">01/26/17</td>
    </tr>
    <tr class="fd-table__row">
      <td class="fd-table__cell fd-table__cell--hoverable">Hovering On Any Cell</td>
      <td class="fd-table__cell fd-table__cell--hoverable">Will Change</td>
      <td class="fd-table__cell fd-table__cell--hoverable">Background</td>
      <td class="fd-table__cell fd-table__cell--hoverable">Of Certain</td>
      <td class="fd-table__cell fd-table__cell--hoverable">Cell</td>
    </tr>
    <tr class="fd-table__row fd-table__row--hoverable">
      <td class="fd-table__cell">Hovering On Any Cell</td>
      <td class="fd-table__cell">And cells</td>
      <td class="fd-table__cell">Will Change</td>
      <td class="fd-table__cell">Background of Whole Row</td>
      <td class="fd-table__cell">01/26/17</td>
    </tr>
  </tbody>
</table>

Expected behavior Text on active row/cell shall be inverted.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS
• Browser: chrome, safari

[droshev]

We need to make sure that table works with all components:

<tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable">
            <td class="fd-table__cell"><button class="fd-button">On This Row will cause</button></td>
            <td class="fd-table__cell"><p class="fd-text">On This Row will cause</p></td>
            <td class="fd-table__cell">
                <span class="fd-object-number fd-object-number--negative">
                    <span class="fd-object-number__text">-2,000.00</span><span class="fd-object-number__unit">EUR</span>
                </span>
            </td>
            <td class="fd-table__cell">
                <span class="fd-object-status fd-object-status--negative">
                    <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
                    <span class="fd-object-status__text">Highlight of Whole Row</span>
                </span>
            </td>
            <td class="fd-table__cell">01/26/17</td>
        </tr>
        <tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable">
            <td class="fd-table__cell"><a href="#" class="fd-link" tabindex="0">Default link</a></td>
            <td class="fd-table__cell"><a href="#" class="fd-link fd-link--emphasized" tabindex="0">Emphasized link</a></td>
            <td class="fd-table__cell">
                <label class="fd-switch">
                    <span class="fd-switch__control">
                        <input class="fd-switch__input" type="checkbox" checked name="" value="" aria-labelledby="label1" id="y21YO32510">
                            <div class="fd-switch__slider">
                            <div class="fd-switch__track">
                                <span class="fd-switch__handle" role="presentation"></span>
                            </div>
                        </div>
                    </span>
                </label>
            </td>
            <td class="fd-table__cell">
                <span class="fd-object-status fd-object-status--negative">
                    <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
                    <span class="fd-object-status__text">Highlight of Whole Row</span>
                </span>
            </td>
            <td class="fd-table__cell">01/26/17</td>
        </tr>
        <tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable">
            <td class="fd-table__cell">
                <span class="fd-info-label fd-info-label--accent-color-1">
                    <span class="fd-info-label__text">On This Row will cause</span>
                </span>
            </td>
            <td class="fd-table__cell">
                <span class="fd-object-status fd-object-status--positive fd-object-status--inverted">
                    <i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
                    <span class="fd-object-status__text">Change</span>
                </span>
            </td>
            <td class="fd-table__cell">
                <span class="fd-avatar fd-avatar--xs" role="presentation" tabindex="0">
                    <i role="presentation" class="fd-avatar__icon sap-icon--washing-machine"></i>
                </span>
            </td>
            <td class="fd-table__cell">
                <div class="fd-rating-indicator fd-rating-indicator--xs">
                    <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
                    <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-1" name="rating-xs" value="1">
                    <label class="fd-rating-indicator__label" for="rating-xs-1"></label>
                
                    <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-2" name="rating-xs" value="2" checked>
                    <label class="fd-rating-indicator__label" for="rating-xs-2"></label>
                
                    <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-3" name="rating-xs" value="3">
                    <label class="fd-rating-indicator__label" for="rating-xs-3"></label>
                
                    <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-4" name="rating-xs" value="4">
                    <label class="fd-rating-indicator__label" for="rating-xs-4"></label>
                
                    <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-5" name="rating-xs" value="5">
                    <label class="fd-rating-indicator__label" for="rating-xs-5"></label>
                    </div>
                
                    <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
                </div>
            </td>
            <td class="fd-table__cell">
                <span class="fd-counter" aria-label="Unread count">999+</span>
            </td>
        </tr>
        <tr class="fd-table__row">
            <td class="fd-table__cell fd-table__cell--activable">Clicking On Cell</td>
            <td class="fd-table__cell fd-table__cell--activable">
                <a class="fd-object-marker fd-object-marker--link">
                    <i class="fd-object-marker__icon sap-icon--private" role="presentation"></i>
                    <span class="fd-object-marker__text">Will cause</span>
                </a>
            </td>
            <td class="fd-table__cell fd-table__cell--activable">Highlight of cell</td>
            <td class="fd-table__cell fd-table__cell--activable">Last Name</td>
            <td class="fd-table__cell fd-table__cell--activable">01/26/17</td>
        </tr>
        <tr class="fd-table__row">
            <td class="fd-table__cell fd-table__cell--hoverable">Hovering On Any Cell</td>
            <td class="fd-table__cell fd-table__cell--hoverable">Will Change</td>
            <td class="fd-table__cell fd-table__cell--hoverable">Background</td>
            <td class="fd-table__cell fd-table__cell--hoverable">Of Certain</td>
            <td class="fd-table__cell fd-table__cell--hoverable">Cell</td>
        </tr>
        <tr class="fd-table__row fd-table__row--hoverable">
            <td class="fd-table__cell">Hovering On Any Cell</td>
            <td class="fd-table__cell">And cells</td>
            <td class="fd-table__cell">Will Change</td>
            <td class="fd-table__cell">Background of Whole Row</td>
            <td class="fd-table__cell">01/26/17</td>
        </tr>

Try to include also the form components Make sure to include the examples on the doc