Spacing issue between radio__icon and field_label

brandonlai commented 6 years ago

Using CDN version of ds6 skin produces different results for radio than in documentation.

screen shot 2018-07-12 at 5 49 59 pm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://ir.ebaystatic.com/cr/v/c1/skin/v5.1.1/ds6/skin.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>

<fieldset>
    <legend>Choose an Option</legend>
    <span class="field">
        <span class="field__control radio">
            <input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
            <span class="radio__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-radio-1">Option 1</label>
    </span>
    <span class="field">
        <span class="field__control radio">
            <input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
            <span class="radio__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-radio-2">Option 2</label>
    </span>
    <span class="field">
        <span class="field__control radio">
            <input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
            <span class="radio__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-radio-3">Option 3</label>
    </span>
</fieldset>

</body>
</html>

seangates commented 6 years ago

@ianmcburnie I'm not sure how yet, but the DS4 field.less CSS is bundled at the very beginning of the documentation CSS (not the CDN CSS, though).

Maybe you can help me look through the Gulp process to find out what's up? Maybe it's caching that field.less file somewhere in the process?

@brandonlai You will probably need to handle the spacing on your own, as this is a bundling issue with our documentation's own CSS, not Skin's CSS. Let me know if you have questions.

ianmcburnie commented 6 years ago

@PrashantAshok and I decided to add the DS4 field CSS to the DS6 docs, because the checkbox and radio examples use it. We decided not to add field to DS6 until we were sure it was a good idea to retain it or just have teams use something like flex box or grids for the layout in future.

This does mean though that teams will need to manually copy and paste the css for field if they really do want it (from below), which obviously isn't ideal:

https://github.com/eBay/skin/blob/master/dist/field/ds4/field.css

Or of course they could just handle the spacing themselves for now.

Maybe for v6 we can add field to DS6 also.

senthilp commented 6 years ago

@ianmcburnie This is a very common use case. Should we consider adding field CSS to DS6 in the next release or maybe add extra classed for flexbox, which developers can use?

ianmcburnie commented 6 years ago

I think we will add it to DS6 for v6 as we are now trying to keep DS4 and DS6 in sync in terms of features.

eBay / ebayui-core

Spacing issue between radio__icon and field_label #253