From 9a52c1aa67ad15a35ab797243399469b1e9aac15 Mon Sep 17 00:00:00 2001 From: N1MBER Date: Mon, 28 Nov 2022 18:11:41 +0300 Subject: [PATCH] fix(prefix): add prefix for class names consta-design-system/uikit#2596 --- .../__stand__/rcTreeAdapterVariants.css | 4 ++-- src/mixs/RcTree/RcTree.css | 12 ++++++------ .../RcTreeCustomControls/RcTreeCustomControls.css | 10 +++++----- src/utils/bem.ts | 7 +------ 4 files changed, 14 insertions(+), 19 deletions(-) diff --git a/src/adapters/rcTreeAdapter/__stand__/rcTreeAdapterVariants.css b/src/adapters/rcTreeAdapter/__stand__/rcTreeAdapterVariants.css index ad4f1b8..82b21c2 100644 --- a/src/adapters/rcTreeAdapter/__stand__/rcTreeAdapterVariants.css +++ b/src/adapters/rcTreeAdapter/__stand__/rcTreeAdapterVariants.css @@ -1,8 +1,8 @@ -.rcTreeAdapterVariants { +.rctr--rcTreeAdapterVariants { width: 100%; height: 80vh; - & .RcTree { + & .rctr--RcTree { overflow: auto; height: 100vh; max-height: 100%; diff --git a/src/mixs/RcTree/RcTree.css b/src/mixs/RcTree/RcTree.css index 6baa892..464ab4a 100644 --- a/src/mixs/RcTree/RcTree.css +++ b/src/mixs/RcTree/RcTree.css @@ -1,4 +1,4 @@ -.RcTree { +.rctr--RcTree { --tree-font-size: var(--size-text-xs); --tree-line-height: 1.3em; --tree-element-size: var(--space-m); @@ -63,14 +63,14 @@ width: var(--tree-element-size); height: var(--tree-element-size); - &.RcTree-icon__docu { + &.rctr--RcTree-icon__docu { width: var(--space-m); height: var(--space-m); background: var(--color-control-typo-ghost); mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzc2NF81MDgwMykiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0IDUuNDE0MjFDMTQgNS4wMTYzOSAxMy44NDE5IDQuNjM0ODYgMTMuNTYwNiA0LjM1MzU2TDkuNjQ2NDIgMC40MzkzMzZDOS4zNjUxMiAwLjE1ODAyOSA4Ljk4MzU5IC03LjYyOTM5ZS0wNiA4LjU4NTc2IC03LjYyOTM5ZS0wNkwzIC0xLjQzMDUxZS0wNkMyLjQ0NzcyIC0xLjQzMDUxZS0wNiAyIDAuNDQ3NzE0IDIgMC45OTk5OTlMMiAxNEMyIDE0LjU1MjMgMi40NDc3MiAxNSAzIDE1TDEzIDE1QzEzLjU1MjMgMTUgMTQgMTQuNTUyMyAxNCAxNEwxNCA2QzE0IDUuOTk2OTEgMTQgNS45OTM4MyAxNCA1Ljk5MDc2VjUuNDE0MjFaTTEyLjc5MjggNUg5LjVDOS4yMjM4NiA1IDkgNC43NzYxNCA5IDQuNVYxLjIwNzEzTDEyLjc5MjggNVoiIGZpbGw9IiMwMDM5NUMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF83NjRfNTA4MDMiPgo8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg=='); } - &.RcTree-icon_loading { + &.rctr--RcTree-icon_loading { width: var(--space-s); height: var(--space-s); background: var(--color-control-typo-ghost); @@ -82,7 +82,7 @@ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV82MDAwMF8xMjE4MzgiIGZpbGw9IndoaXRlIj4KPHBhdGggZD0iTTYgMEM3LjI2NzA4IDEuNTEwOTdlLTA4IDguNTAxNjMgMC40MDExMyA5LjUyNjcxIDEuMTQ1OUMxMC41NTE4IDEuODkwNjcgMTEuMzE0OCAyLjk0MDg0IDExLjcwNjMgNC4xNDU5QzEyLjA5NzkgNS4zNTA5NiAxMi4wOTc5IDYuNjQ5MDQgMTEuNzA2MyA3Ljg1NDFDMTEuMzE0OCA5LjA1OTE2IDEwLjU1MTggMTAuMTA5MyA5LjUyNjcxIDEwLjg1NDFDOC41MDE2MyAxMS41OTg5IDcuMjY3MDggMTIgNiAxMkM0LjczMjkyIDEyIDMuNDk4MzcgMTEuNTk4OSAyLjQ3MzI5IDEwLjg1NDFDMS40NDgyIDEwLjEwOTMgMC42ODUyMDggOS4wNTkxNiAwLjI5MzY2MSA3Ljg1NDFDLTAuMDk3ODg3MSA2LjY0OTA0IC0wLjA5Nzg4NjkgNS4zNTA5NiAwLjI5MzY2MSA0LjE0NTlMMi4xNzY3NSA0Ljc1Nzc1QzEuOTE0NDIgNS41NjUxNCAxLjkxNDQyIDYuNDM0ODYgMi4xNzY3NSA3LjI0MjI1QzIuNDM5MDkgOC4wNDk2NCAyLjk1MDMgOC43NTMyNSAzLjYzNzEgOS4yNTIyNUM0LjMyMzkxIDkuNzUxMjQgNS4xNTEwNiAxMC4wMiA2IDEwLjAyQzYuODQ4OTQgMTAuMDIgNy42NzYwOSA5Ljc1MTI0IDguMzYyOSA5LjI1MjI1QzkuMDQ5NyA4Ljc1MzI1IDkuNTYwOTEgOC4wNDk2NCA5LjgyMzI1IDcuMjQyMjVDMTAuMDg1NiA2LjQzNDg2IDEwLjA4NTYgNS41NjUxNCA5LjgyMzI1IDQuNzU3NzVDOS41NjA5MSAzLjk1MDM2IDkuMDQ5NyAzLjI0Njc1IDguMzYyOSAyLjc0Nzc1QzcuNjc2MDkgMi4yNDg3NiA2Ljg0ODk0IDEuOTggNiAxLjk4VjBaIi8+CjwvbWFzaz4KPHBhdGggZD0iTTYgMEM3LjI2NzA4IDEuNTEwOTdlLTA4IDguNTAxNjMgMC40MDExMyA5LjUyNjcxIDEuMTQ1OUMxMC41NTE4IDEuODkwNjcgMTEuMzE0OCAyLjk0MDg0IDExLjcwNjMgNC4xNDU5QzEyLjA5NzkgNS4zNTA5NiAxMi4wOTc5IDYuNjQ5MDQgMTEuNzA2MyA3Ljg1NDFDMTEuMzE0OCA5LjA1OTE2IDEwLjU1MTggMTAuMTA5MyA5LjUyNjcxIDEwLjg1NDFDOC41MDE2MyAxMS41OTg5IDcuMjY3MDggMTIgNiAxMkM0LjczMjkyIDEyIDMuNDk4MzcgMTEuNTk4OSAyLjQ3MzI5IDEwLjg1NDFDMS40NDgyIDEwLjEwOTMgMC42ODUyMDggOS4wNTkxNiAwLjI5MzY2MSA3Ljg1NDFDLTAuMDk3ODg3MSA2LjY0OTA0IC0wLjA5Nzg4NjkgNS4zNTA5NiAwLjI5MzY2MSA0LjE0NTlMMi4xNzY3NSA0Ljc1Nzc1QzEuOTE0NDIgNS41NjUxNCAxLjkxNDQyIDYuNDM0ODYgMi4xNzY3NSA3LjI0MjI1QzIuNDM5MDkgOC4wNDk2NCAyLjk1MDMgOC43NTMyNSAzLjYzNzEgOS4yNTIyNUM0LjMyMzkxIDkuNzUxMjQgNS4xNTEwNiAxMC4wMiA2IDEwLjAyQzYuODQ4OTQgMTAuMDIgNy42NzYwOSA5Ljc1MTI0IDguMzYyOSA5LjI1MjI1QzkuMDQ5NyA4Ljc1MzI1IDkuNTYwOTEgOC4wNDk2NCA5LjgyMzI1IDcuMjQyMjVDMTAuMDg1NiA2LjQzNDg2IDEwLjA4NTYgNS41NjUxNCA5LjgyMzI1IDQuNzU3NzVDOS41NjA5MSAzLjk1MDM2IDkuMDQ5NyAzLjI0Njc1IDguMzYyOSAyLjc0Nzc1QzcuNjc2MDkgMi4yNDg3NiA2Ljg0ODk0IDEuOTggNiAxLjk4VjBaIiBzdHJva2U9IiMwMDM5NUMiIHN0cm9rZS1vcGFjaXR5PSIwLjgiIHN0cm9rZS13aWR0aD0iMiIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNjAwMDBfMTIxODM4KSIvPgo8L3N2Zz4KCg=='); } - &:not(.RcTree-icon__docu):not(.RcTree-icon_loading) { + &:not(.rctr--RcTree-icon__docu):not(.rctr--RcTree-icon_loading) { width: var(--space-m); height: var(--space-m); background: var(--color-control-typo-ghost); @@ -204,7 +204,7 @@ } } - &.RcTree-treenode-selected { + &.rctr--RcTree-treenode-selected { & > *:not(:first-child) { background: var(--color-bg-ghost); font-weight: 600; @@ -214,7 +214,7 @@ &-switcher { background-image: none; - &-open .RcTree-switcher_open > * { + &-open .rctr--RcTree-switcher_open > * { transform: rotate(90deg); } } diff --git a/src/mixs/RcTree/__stand__/examples/RcTreeCustomControls/RcTreeCustomControls.css b/src/mixs/RcTree/__stand__/examples/RcTreeCustomControls/RcTreeCustomControls.css index 6c9b0b8..0a0c9e5 100644 --- a/src/mixs/RcTree/__stand__/examples/RcTreeCustomControls/RcTreeCustomControls.css +++ b/src/mixs/RcTree/__stand__/examples/RcTreeCustomControls/RcTreeCustomControls.css @@ -1,5 +1,5 @@ -.RcTreeCustomControls { - &.RcTree { +.rctr--RcTreeCustomControls { + &.rctr--RcTree { width: 100%; min-height: 400px; } @@ -14,12 +14,12 @@ line-height: 2em; } - & .RcTree-list { + & .rctr--RcTree-list { min-width: 270px; } - & .RcTree-node-content-wrapper, - & .RcTree-title { + & .rctr--RcTree-node-content-wrapper, + & .rctr--RcTree-title { width: 100%; } } diff --git a/src/utils/bem.ts b/src/utils/bem.ts index 8d697e5..b5eaccc 100644 --- a/src/utils/bem.ts +++ b/src/utils/bem.ts @@ -1,8 +1,3 @@ import { withNaming } from '@bem-react/classname'; -const reactBemNaming = { e: '-', m: '_', v: '_' }; - -export const cn = withNaming(reactBemNaming); - -export const withPrefix = (prefix: string) => - withNaming({ n: `${prefix}--`, ...reactBemNaming }); +export const cn = withNaming({ n: 'rctr--', e: '-', m: '_', v: '_' });