diff --git a/semcore/base-trigger/src/LinkTrigger.jsx b/semcore/base-trigger/src/LinkTrigger.jsx index e5b4529a6d..4aa049ce53 100644 --- a/semcore/base-trigger/src/LinkTrigger.jsx +++ b/semcore/base-trigger/src/LinkTrigger.jsx @@ -11,15 +11,12 @@ class RootLinkTrigger extends Component { static displayName = 'LinkTrigger'; getTextProps(props) { - const { placeholder, empty, Children, size } = this.asProps; + const { placeholder, empty } = this.asProps; const content = empty ? placeholder : props.children; - const addons = findAllComponents(Children, [LinkTrigger.Addon.displayName]); - const addonWidth = size >= 600 ? 28 : 20; return { 'use:children': content, empty, - 'w': `calc(100% - ${addonWidth * (addons.length + 1)}px)`, }; } diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css index 93335b2862..5054d48cd2 100644 --- a/semcore/base-trigger/src/style/base-trigger.shadow.css +++ b/semcore/base-trigger/src/style/base-trigger.shadow.css @@ -66,15 +66,9 @@ SInner { } SText { - display: inline; /* disable-tokens-validator */ padding: 1px 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - line-height: var(--intergalactic-lh-200, 142%); flex-grow: 1; - text-align: left; } SAddon { diff --git a/semcore/core/src/core-types/Component.ts b/semcore/core/src/core-types/Component.ts index 7a0defac38..21239f2f49 100644 --- a/semcore/core/src/core-types/Component.ts +++ b/semcore/core/src/core-types/Component.ts @@ -8,6 +8,7 @@ RefObject, } from 'react'; import type { CORE_COMPONENT } from './symbols'; +import { CORE_INSTANCE } from './symbols'; import type { IStyledProps } from '../styled/index'; type HandlersType = { [K in keyof UCProps]?: (arg: T) => void }; @@ -86,6 +87,8 @@ export abstract class Component< protected Root: RootResult = undefined as any; protected isControlled = false; + + protected [CORE_INSTANCE]: any; } // eslint-disable-next-line @typescript-eslint/no-namespace @@ -269,6 +272,7 @@ export namespace Intergalactic { __props: Props; __context: Context; __additionalContext: AdditionalContext; + __IS_ICON: boolean; displayName: string; newInstance: () => Component; [CORE_COMPONENT]: boolean; diff --git a/semcore/core/src/coreFactory.tsx b/semcore/core/src/coreFactory.tsx index 46bb6fbb94..b7773ef440 100644 --- a/semcore/core/src/coreFactory.tsx +++ b/semcore/core/src/coreFactory.tsx @@ -354,7 +354,11 @@ function createComponent(OriginComponent: React.ForwardRefRenderFunction, P>) { +type BaseComponentOptions = { + isIcon?: boolean; +}; + +function createBaseComponent(OriginComponent: React.ForwardRefRenderFunction, P>, opt?: BaseComponentOptions) { const Component = React.forwardRef, P>(OriginComponent) as unknown as Intergalactic.Component; Component.displayName = OriginComponent.displayName ?? ''; // @ts-ignore @@ -363,6 +367,8 @@ function createBaseComponent(Ori }; Component[CORE_COMPONENT] = true; + Component.__IS_ICON = Boolean(opt?.isIcon); + return Component; } diff --git a/semcore/fullscreen-modal/src/FullscreenModal.jsx b/semcore/fullscreen-modal/src/FullscreenModal.jsx index a3fbc6747c..e9c9a7a30d 100644 --- a/semcore/fullscreen-modal/src/FullscreenModal.jsx +++ b/semcore/fullscreen-modal/src/FullscreenModal.jsx @@ -1,5 +1,5 @@ import { Flex, Box } from '@semcore/base-components'; -import Button from '@semcore/button'; +import Button, { ButtonLink } from '@semcore/button'; import { createComponent, Component, sstyled, Root } from '@semcore/core'; import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance'; import fire from '@semcore/core/lib/utils/fire'; @@ -147,15 +147,13 @@ function Description(props) { function Back(props) { const SBack = Root; - const SBackText = Text; const { Children, styles } = props; return sstyled(styles)( - - - + + - + , ); } diff --git a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css index e72fcf9177..031cb7e641 100644 --- a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css +++ b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css @@ -28,29 +28,7 @@ SBack { z-index: 1; top: 8px; left: 32px; - display: flex; - align-items: center; margin-bottom: var(--intergalactic-spacing-3x, 12px); - color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); - font-size: var(--intergalactic-fs-100, 12px); - line-height: var(--intergalactic-lh-100, 133%); - background: none; - padding: 0; - border: none; - outline: none; - - &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.088 0.026 147.7 / 0.583)); - } -} - -SBackText { - margin-left: var(--intergalactic-spacing-1x, 4px); - font-size: var(--intergalactic-fs-200, 14px); - line-height: var(--intergalactic-lh-200, 142%); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } STitle, diff --git a/semcore/icon/src/Icon.tsx b/semcore/icon/src/Icon.tsx index 57dbe82172..a796dae08f 100644 --- a/semcore/icon/src/Icon.tsx +++ b/semcore/icon/src/Icon.tsx @@ -123,4 +123,4 @@ function Icon({ ); } -export default createBaseComponent<'svg', IconProps>(Icon); +export default createBaseComponent<'svg', IconProps>(Icon, { isIcon: true }); diff --git a/semcore/icon/transform-svg-icon.ts b/semcore/icon/transform-svg-icon.ts index 70201f4fcf..bfd108a436 100644 --- a/semcore/icon/transform-svg-icon.ts +++ b/semcore/icon/transform-svg-icon.ts @@ -119,7 +119,7 @@ function Root${name}({ Root${name}.displayName = '${name}' -const ${name} = createBaseComponent(Root${name}) +const ${name} = createBaseComponent(Root${name}, { isIcon: true }) export { ${name} as default diff --git a/semcore/link/src/Link.tsx b/semcore/link/src/Link.tsx index 0cc896ac88..81ba22cebb 100644 --- a/semcore/link/src/Link.tsx +++ b/semcore/link/src/Link.tsx @@ -4,6 +4,7 @@ import type { Intergalactic, IRootComponentProps } from '@semcore/core'; import { createComponent, Component, Root, sstyled, CORE_INSTANCE } from '@semcore/core'; import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren'; import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance'; +import { findAllComponents } from '@semcore/core/lib/utils/findComponent'; import hasLabels from '@semcore/core/lib/utils/hasLabels'; import logger from '@semcore/core/lib/utils/logger'; import type { NSText } from '@semcore/typography'; @@ -47,9 +48,30 @@ class RootLink extends Component { + if (addon.props.tag?.__IS_ICON || addon.props.children?.type?.__IS_ICON) { + acc++; + } + return acc; + }, 0); + + if (addonLeft && typeof addonLeft === 'object' && '__IS_ICON' in addonLeft) { + addonsCount++; + } + if (addonRight && typeof addonRight === 'object' && '__IS_ICON' in addonRight) { + addonsCount++; + } + return { 'hint:triggerRef': this.containerRef, + 'w': `calc(100% - ${addonWidth * addonsCount}px)`, }; } @@ -68,7 +90,7 @@ class RootLink extends Component - {/* */} - + - + , ); } diff --git a/semcore/side-panel/src/style/side-panel.shadow.css b/semcore/side-panel/src/style/side-panel.shadow.css index 4565f7db15..4a12d38e53 100644 --- a/semcore/side-panel/src/style/side-panel.shadow.css +++ b/semcore/side-panel/src/style/side-panel.shadow.css @@ -71,12 +71,6 @@ SClose { SBack { max-width: 100%; - - SBackText { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } } SHeader { diff --git a/stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx b/stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx index 8476512c19..02c0c73145 100644 --- a/stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx +++ b/stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx @@ -35,7 +35,7 @@ const Demo = (props: HeaderConfig) => { {props.showClose && } {props.showBack && ( - + {props.backText} )} diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 4cc412195d..46ddcbb486 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -1040,7 +1040,6 @@ "carousel", "drag-and-drop", "feature-highlight", - "fullscreen-modal", "notice", "typography" ] @@ -1051,7 +1050,6 @@ "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.", "components": [ "feature-highlight", - "fullscreen-modal", "notice" ] },