Modularise component styles

j1mie commented 5 years ago

Context

Make components, and their styles consumable on an individual basis
Enables consumers to compile Sass if preferred to CSS
Preview each component and its style in isolation of other styles to test partials (rather than importing globals/index, which has known performance issues)
Debug performance issues

Components (tag yourself on component PRs you're working on)

[x] Accordion @j1mie
[x] Breadcrumb - @SimonFinney
[x] Button - @SimonFinney
[x] Card - @SimonFinney
[x] Checkbox @j1mie
[x] Codesnippet @j1mie
[x] ComboButton - @SimonFinney
[x] ContentSwitcher @j1mie
[x] DataDecorator @SimonFinney
[x] DataTable @SimonFinney
[x] DatePicker @SimonFinney
[x] DelimitedList - @SimonFinney
[x] Dropdown @j1mie
[x] ErrorPage - @SimonFinney
[x] ExternalLink - @SimonFinney
[x] FileUploader - @SimonFinney
[x] FilterPanel - @SimonFinney
[x] Form @j1mie
[x] Header - @SimonFinney
[x] ICA / ICASkeleton - @SimonFinney
[x] IconButton - @SimonFinney
[x] IconButtonBar @SimonFinney
[x] InlineLoading @j1mie
[x] Link @j1mie
[x] Loading @SimonFinney
[x] Modal @j1mie
[x] MultiSelect @j1mie
[x] Nav - @SimonFinney
[x] NonEntitledSection - @SimonFinney
[x] Notification - @SimonFinney
[x] NumberInput / Skeleton @j1mie
[x] OverflowMenu
[x] Pagination @j1mie
[x] Panel @j1mie
[x] PanelV2 - @SimonFinney
[x] Pill - @SimonFinney
[x] Portal @j1mie
[x] ProgressIndicator / Skeleton - @SimonFinney
[x] ProfileImage - @SimonFinney
[x] RadioButton
[x] RadioButtonGroup - @SimonFinney
[x] ScrollGradient - @SimonFinney
[x] Search - @SimonFinney
[x] SearchBar - @SimonFinney
[x] Select @j1mie
[x] Shell - @SimonFinney
[x] SkeletonText - @SimonFinney
[x] Slider @j1mie
[x] Stacked notification - @SimonFinney
[x] StatusIcon - @SimonFinney
[x] StatusIndicator - @SimonFinney
[x] StepIndicator - @SimonFinney
[x] StringFormatter @SimonFinney
[x] StructuredList @j1mie
[x] Summary card @SimonFinney
[x] Tabs @j1mie
[x] Tag / InteractiveTag @j1mie
[x] TagWall @j1mie
[x] TagWallFilter @j1mie
[x] Tearsheet @j1mie
[x] TearsheetSmall @j1mie
[x] TextArea @j1mie
[x] TextInput @j1mie
[x] Tile @SimonFinney
[x] Timepicker @j1mie
[x] Toggle / ToggleSmall @SimonFinney
[x] Toolbar - @SimonFinney
[x] Tooltip - @SimonFinney
[x] Transition - @SimonFinney
[x] TypeLayout - @SimonFinney
[x] Wizard - @SimonFinney

Other

[x] Revisit outstanding TODOs

j1mie commented 5 years ago

@SimonFinney thanks for sharing the link for Sass Modules via slack. I'm wondering if this is something we can look at in relation to this work? @jendowns

SimonFinney commented 5 years ago

@j1mie I'd love that! Currently, this feature is only available in dart-sass so it would require us to migrate over and I believe anyone else planning on consuming it would have to do the same 😭

j1mie commented 5 years ago

Hrmmmm, okay scratch that so!

SimonFinney commented 4 years ago

Update

Groundwork will be done this sprint to determine the work required to cherry-pick the commits into dev
Discussion scheduled with @joshblack to understand how Carbon have been testing Sass performance and what guidance can be leveraged

SimonFinney commented 4 years ago

This will reduce compilation time down from 63 seconds to 16. Recommended guidance for offering teams -

https://github.com/carbon-design-system/carbon/blob/master/docs/guides/sass.md#optimizing-your-sass-builds
Separating vendor styles within applications:

// vendor.scss

@import '@carbon/ibm-security/scss/index';

// application.scss

// Application styles.

// index.scss

@import 'vendor';
@import 'application';

SimonFinney commented 4 years ago

:tada: This issue has been resolved in version 1.18.1-prerelease.8 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

SimonFinney commented 4 years ago

:tada: This issue has been resolved in version 1.19.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

carbon-design-system / ibm-security