refactor: DLT-2122 move css out of recipes

[juliodialpad]

Move CSS within vue recipes to dialtone-css

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

• Refactor

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-2122

📖 Description

• Moved all CSS within recipes to dialtone-css
• Renamed classes that were not using BEM (Maybe breaking change)

💡 Context

We're moving all CSS defined in dialtone vue to dialtone-css.

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.

For all Vue changes:

• I have added / updated unit tests.
• I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script. Read docs here: Dialtone Vue Sync Script

For all CSS changes:

• I have used design tokens whenever possible.

🔮 Next Steps

Visually test and review all the recipes to check that everything's still working as expected.

[iropolo]

I will take a look to this today.

[francisrupert]

Wow, that's a lotta work, but quite necessary. I didn't go through each line, but here are a few themes I see repeated throughout:

1. There's quite a bit of nesting going on, resulting in over-specific CSS selectors. Unless there's a really good reason, keep them as flat as possible, e.g.

.dt-recipe-attachment-carousel__progress-bar {
  ...
  .dt-recipe-attachment-carousel__progress-bar__circle {
    ...
  }
}

...can probably be...

.dt-recipe-attachment-carousel__progress-bar {
  ...
}
.dt-recipe-attachment-carousel__progress-bar__circle {
  ...
}

...or perhaps...

.dt-recipe-attachment-carousel {
  &__progress-bar {
    ...
  }
  &__progress-bar__circle {
    ...
  }
}

2. The above example also has some double-BEM'ing going on wit __. To take the above as an example, perhaps...

.dt-recipe-attachment-carousel {
  &__progress-bar {
    ...
  }
  &__progress-bar-circle {
    ...
  }
}

It's a case by case judgement call, and naming... things is fun... and hard.

3. Should data-qa values also match BEM convention? I don't have an opinion on that. e.g.

class="dt-recipe-feed-item-row__left-time"
data-qa="dt-recipe-feed-item-row--left-time"

[francisrupert]

Should these CSS utilities values be folded into .dt-recipe-ivr-node__connector? There are a few others like that throughout this diff.

[braddialpad]

yeah I think so for sure

[iropolo]

Should be ok, the remaining percy error is an icon update (expected).

edit: didn't see Fracis comment. My comment was regarding fixing PR percy errors.

[braddialpad]

Should be ok, the remaining percy error is an icon update (expected).

Seems like there's an additional border problem on the latest build

[braddialpad]

Since this is such a big change with high potential for conflicts, I'd rather get this into the main branch and make francis' requested changes in a separate PR. The only thing we want to change before merging here are any further visual regressions.

[braddialpad]

Merged in staging, going to see if it fixes the final percy error

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-577/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-577/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-577/

[braddialpad]

Alright looks good! I'm going to merge this and create a separate "clean up" PR