From f2eda31595a99d253797ddc1ebc8cc5cf2c09c6a Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 1 Aug 2023 10:08:50 +0200 Subject: [PATCH 1/3] refactor(icons): extracted icons mixin related files #526 --- source/_patterns/00-base/icons/_icon.scss | 4 ++++ source/_patterns/01-elements/buttons/_button.variables.scss | 2 -- source/_patterns/01-elements/buttons/button.scss | 1 + .../_patterns/01-elements/checkbox/_checkbox.variables.scss | 2 -- source/_patterns/01-elements/checkbox/checkbox.scss | 1 + source/_patterns/01-elements/link/_link.variables.scss | 2 -- source/_patterns/01-elements/link/link.scss | 1 + .../02-components/accordion/_accordion.variables.scss | 2 -- source/_patterns/02-components/accordion/accordion.scss | 1 + .../02-components/breadcrumb/_breadcrumb.variables.scss | 2 -- source/_patterns/02-components/breadcrumb/breadcrumb.scss | 1 + source/_patterns/02-components/dialog/_dialog.variables.scss | 2 -- source/_patterns/02-components/dialog/dialog.scss | 1 + .../_patterns/02-components/dropdown/_dropdown.variables.scss | 2 -- source/_patterns/02-components/dropdown/dropdown.scss | 1 + .../language-switcher/_language-switcher.variables.scss | 2 -- .../02-components/language-switcher/language-switcher.scss | 1 + .../02-components/link-list/_link-list.variables.scss | 2 -- source/_patterns/02-components/link-list/link-list.scss | 1 + .../mainnavigation/_mainnavigation.variables.scss | 2 -- .../02-components/mainnavigation/mainnavigation.scss | 1 + .../02-components/overflow-menu/_overflow-menu.variables.scss | 2 -- .../_patterns/02-components/overflow-menu/overflow-menu.scss | 1 + .../02-components/pagination/_pagination.variables.scss | 2 -- source/_patterns/02-components/pagination/pagination.scss | 1 + .../_patterns/02-components/sidenavi/_sidenavi.variables.scss | 2 -- source/_patterns/02-components/sidenavi/sidenavi.scss | 1 + .../02-components/sitesearch/_sitesearch.variables.scss | 2 -- source/_patterns/02-components/sitesearch/sitesearch.scss | 1 + 29 files changed, 18 insertions(+), 28 deletions(-) create mode 100644 source/_patterns/00-base/icons/_icon.scss diff --git a/source/_patterns/00-base/icons/_icon.scss b/source/_patterns/00-base/icons/_icon.scss new file mode 100644 index 0000000000..3a625ec125 --- /dev/null +++ b/source/_patterns/00-base/icons/_icon.scss @@ -0,0 +1,4 @@ +// This file is meant to get included within internal or even imported externally in case of that somebody wants to use the icon mixin +@import "icons.variables"; +@import "icons.helpers"; +@import "icons.placeholder"; diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index b59d43f710..f7bc6b747d 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -1,6 +1,4 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; // We want to set the alpha value and that for need the long form hex code // stylelint-disable color-hex-length diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 42f833cdf6..22a73ef17b 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -1,5 +1,6 @@ @charset "utf-8"; +@import "../../00-base/icons/icon"; @import "button.variables"; .elm-button { diff --git a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss index 8f93fe9c52..b091d4d363 100644 --- a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss +++ b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss @@ -1,5 +1,3 @@ -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; @import "../../00-base/colors/colors.variables"; $checkbox---backgroundColor: rgba(255, 255, 255, 0.1) !default; diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss index 4751e36bba..dffa00fe8a 100644 --- a/source/_patterns/01-elements/checkbox/checkbox.scss +++ b/source/_patterns/01-elements/checkbox/checkbox.scss @@ -1,6 +1,7 @@ @charset "utf-8"; @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "checkbox.variables"; .elm-checkbox { diff --git a/source/_patterns/01-elements/link/_link.variables.scss b/source/_patterns/01-elements/link/_link.variables.scss index 4306a8d6e2..197afe8a35 100644 --- a/source/_patterns/01-elements/link/_link.variables.scss +++ b/source/_patterns/01-elements/link/_link.variables.scss @@ -1,6 +1,4 @@ -@import "../../00-base/icons/icons.variables"; @import "../../00-base/colors/colors.variables"; -@import "../../00-base/icons/icons.helpers"; $link--disabled-opacity: 0.4 !default; $link-reaMain--color: $db-color-cyan-600 !default; diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss index 4abba98267..43f2a9d818 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "link.variables"; .elm-link { diff --git a/source/_patterns/02-components/accordion/_accordion.variables.scss b/source/_patterns/02-components/accordion/_accordion.variables.scss index b6d028fe99..3bcb2b787a 100644 --- a/source/_patterns/02-components/accordion/_accordion.variables.scss +++ b/source/_patterns/02-components/accordion/_accordion.variables.scss @@ -1,6 +1,4 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; $accordion---paddingLeft: 46 !default; $accordion---paddingRight: to-rem( diff --git a/source/_patterns/02-components/accordion/accordion.scss b/source/_patterns/02-components/accordion/accordion.scss index 33d309a9f7..004f07e1a1 100644 --- a/source/_patterns/02-components/accordion/accordion.scss +++ b/source/_patterns/02-components/accordion/accordion.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "accordion.variables"; .cmp-accordion { diff --git a/source/_patterns/02-components/breadcrumb/_breadcrumb.variables.scss b/source/_patterns/02-components/breadcrumb/_breadcrumb.variables.scss index 4970f7f3b9..0281343943 100644 --- a/source/_patterns/02-components/breadcrumb/_breadcrumb.variables.scss +++ b/source/_patterns/02-components/breadcrumb/_breadcrumb.variables.scss @@ -1,5 +1,3 @@ -@import "../../00-base/icons/icons.helpers"; -@import "../../00-base/icons/icons.variables"; @import "../../00-base/colors/colors.variables"; $breadcrumb-divider--icon: "chevron-right" !default; diff --git a/source/_patterns/02-components/breadcrumb/breadcrumb.scss b/source/_patterns/02-components/breadcrumb/breadcrumb.scss index 50e8b8a6d5..6a062be3ca 100644 --- a/source/_patterns/02-components/breadcrumb/breadcrumb.scss +++ b/source/_patterns/02-components/breadcrumb/breadcrumb.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "breadcrumb.variables"; .cmp-breadcrumb { diff --git a/source/_patterns/02-components/dialog/_dialog.variables.scss b/source/_patterns/02-components/dialog/_dialog.variables.scss index ac2de68d36..e2ed767625 100644 --- a/source/_patterns/02-components/dialog/_dialog.variables.scss +++ b/source/_patterns/02-components/dialog/_dialog.variables.scss @@ -1,5 +1,3 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; $dialog-backdrop--backgroundColor: rgba(0, 0, 0, 0.9) !default; diff --git a/source/_patterns/02-components/dialog/dialog.scss b/source/_patterns/02-components/dialog/dialog.scss index 01cb407cc2..49b64bcc9b 100644 --- a/source/_patterns/02-components/dialog/dialog.scss +++ b/source/_patterns/02-components/dialog/dialog.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "dialog.variables"; .cmp-dialog { diff --git a/source/_patterns/02-components/dropdown/_dropdown.variables.scss b/source/_patterns/02-components/dropdown/_dropdown.variables.scss index f78f84a3de..95a5fa2835 100644 --- a/source/_patterns/02-components/dropdown/_dropdown.variables.scss +++ b/source/_patterns/02-components/dropdown/_dropdown.variables.scss @@ -1,3 +1 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; diff --git a/source/_patterns/02-components/dropdown/dropdown.scss b/source/_patterns/02-components/dropdown/dropdown.scss index 70ef1b9a74..0e8ec3f868 100644 --- a/source/_patterns/02-components/dropdown/dropdown.scss +++ b/source/_patterns/02-components/dropdown/dropdown.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "../overflow-menu/overflow-menu"; @import "dropdown.variables"; diff --git a/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss b/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss index d3e2d9df3a..95a5fa2835 100644 --- a/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss +++ b/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss @@ -1,3 +1 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.helpers"; -@import "../../00-base/icons/icons.variables"; diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss index baf7c4033c..ee23e2b91d 100644 --- a/source/_patterns/02-components/language-switcher/language-switcher.scss +++ b/source/_patterns/02-components/language-switcher/language-switcher.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "language-switcher.variables"; .cmp-language-switcher { diff --git a/source/_patterns/02-components/link-list/_link-list.variables.scss b/source/_patterns/02-components/link-list/_link-list.variables.scss index f78f84a3de..95a5fa2835 100644 --- a/source/_patterns/02-components/link-list/_link-list.variables.scss +++ b/source/_patterns/02-components/link-list/_link-list.variables.scss @@ -1,3 +1 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; diff --git a/source/_patterns/02-components/link-list/link-list.scss b/source/_patterns/02-components/link-list/link-list.scss index 7dd6e1e882..8fb7638a91 100644 --- a/source/_patterns/02-components/link-list/link-list.scss +++ b/source/_patterns/02-components/link-list/link-list.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "link-list.variables"; .cmp-link-list { diff --git a/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss b/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss index 82e1065876..5fb5a0be5a 100644 --- a/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss +++ b/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss @@ -1,6 +1,4 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; $header-big-link-paddingTop: 32 * 0.0625 !default; $header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index f4bd1d89aa..592998133c 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; // TODO: Replace magic numbers e.g. with flexbox implementations and extract variables as well for multi-brand @import "mainnavigation.variables"; diff --git a/source/_patterns/02-components/overflow-menu/_overflow-menu.variables.scss b/source/_patterns/02-components/overflow-menu/_overflow-menu.variables.scss index 4e264102e1..a804f034d0 100644 --- a/source/_patterns/02-components/overflow-menu/_overflow-menu.variables.scss +++ b/source/_patterns/02-components/overflow-menu/_overflow-menu.variables.scss @@ -1,6 +1,4 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; $overflowMenu---borderRadius: 8px !default; $overflowMenu---backgroundColor: #fff !default; diff --git a/source/_patterns/02-components/overflow-menu/overflow-menu.scss b/source/_patterns/02-components/overflow-menu/overflow-menu.scss index 4ad5cf4665..d25e6796ba 100644 --- a/source/_patterns/02-components/overflow-menu/overflow-menu.scss +++ b/source/_patterns/02-components/overflow-menu/overflow-menu.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "overflow-menu.variables"; .cmp-overflow-menu { diff --git a/source/_patterns/02-components/pagination/_pagination.variables.scss b/source/_patterns/02-components/pagination/_pagination.variables.scss index f78f84a3de..95a5fa2835 100644 --- a/source/_patterns/02-components/pagination/_pagination.variables.scss +++ b/source/_patterns/02-components/pagination/_pagination.variables.scss @@ -1,3 +1 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; diff --git a/source/_patterns/02-components/pagination/pagination.scss b/source/_patterns/02-components/pagination/pagination.scss index 2a7447e0b0..bd8fc96581 100644 --- a/source/_patterns/02-components/pagination/pagination.scss +++ b/source/_patterns/02-components/pagination/pagination.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "pagination.variables"; .cmp-pagination { diff --git a/source/_patterns/02-components/sidenavi/_sidenavi.variables.scss b/source/_patterns/02-components/sidenavi/_sidenavi.variables.scss index e2b8c7b732..64c0839af5 100644 --- a/source/_patterns/02-components/sidenavi/_sidenavi.variables.scss +++ b/source/_patterns/02-components/sidenavi/_sidenavi.variables.scss @@ -1,6 +1,4 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; $sidenavi-link--color: $db-color-cool-gray-200 !default; $sidenavi-linkCurrent-hover-color: $db-color-cool-gray-600 !default; diff --git a/source/_patterns/02-components/sidenavi/sidenavi.scss b/source/_patterns/02-components/sidenavi/sidenavi.scss index 357374f6ef..95c956dba6 100644 --- a/source/_patterns/02-components/sidenavi/sidenavi.scss +++ b/source/_patterns/02-components/sidenavi/sidenavi.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "sidenavi.variables"; .cmp-sidenavi { diff --git a/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss b/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss index 3c96b5c913..356d2ab263 100644 --- a/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss +++ b/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss @@ -1,6 +1,4 @@ @import "../../../css/helpers/functions"; -@import "../../00-base/icons/icons.variables"; -@import "../../00-base/icons/icons.helpers"; $sitesearch-form-full-maxWidth: to-rem( $pxValue: 500 diff --git a/source/_patterns/02-components/sitesearch/sitesearch.scss b/source/_patterns/02-components/sitesearch/sitesearch.scss index aa6e6a2d29..a7971aec19 100644 --- a/source/_patterns/02-components/sitesearch/sitesearch.scss +++ b/source/_patterns/02-components/sitesearch/sitesearch.scss @@ -1,4 +1,5 @@ @import "../../../css/partials.meta"; +@import "../../00-base/icons/icon"; @import "sitesearch.variables"; .cmp-sitesearch { From da6642a66266fd1c00d16ba394b853374d47bdc3 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 1 Aug 2023 20:09:47 +0200 Subject: [PATCH 2/3] Update _icons.md --- source/_patterns/00-base/icons/_icons.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/source/_patterns/00-base/icons/_icons.md b/source/_patterns/00-base/icons/_icons.md index 650f60570a..fc5f5e21b0 100644 --- a/source/_patterns/00-base/icons/_icons.md +++ b/source/_patterns/00-base/icons/_icons.md @@ -21,6 +21,8 @@ All of the available glyphs variables are shown on this page right next to the i #### SCSS (recommended) +If you're only using our SCSS files incrementally and not including the `@db-ui/core/sources/css/enterprise/db-ui-core` at the beginning of your code, you would need to import the `@db-ui/core/sources/_patterns/00-base/icons/icon` file for being able to use the `icon()` SCSS mixin, that we describe below. + ##### Icon for element Use the following SCSS mixin for setting an icon: From cb646fb1f2122350cb37a9a9d9d45df758174ceb Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 1 Aug 2023 20:10:53 +0200 Subject: [PATCH 3/3] Update _icon.scss --- source/_patterns/00-base/icons/_icon.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/00-base/icons/_icon.scss b/source/_patterns/00-base/icons/_icon.scss index 3a625ec125..785a61c32e 100644 --- a/source/_patterns/00-base/icons/_icon.scss +++ b/source/_patterns/00-base/icons/_icon.scss @@ -1,4 +1,4 @@ -// This file is meant to get included within internal or even imported externally in case of that somebody wants to use the icon mixin +// This file is meant to get included within internal or even imported externally in case of that somebody wants to use the icon SCSS mixin @import "icons.variables"; @import "icons.helpers"; @import "icons.placeholder";