[UIK-5017] ellipsis cleanup

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)`,
     };
   }
 

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 {

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<UCProps> = { [K in keyof UCProps]?: <T = unknown>(arg: T) => void };
@@ -86,6 +87,8 @@ export abstract class Component<
   protected Root: RootResult<any> = 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<BaseTag, Props, Context>;
       [CORE_COMPONENT]: boolean;

semcore/core/src/coreFactory.tsx

@@ -354,7 +354,11 @@ function createComponent<T extends Intergalactic.InternalTypings.ComponentTag =
   return Component;
 }
 
-function createBaseComponent<T extends keyof React.JSX.IntrinsicElements, P>(OriginComponent: React.ForwardRefRenderFunction<React.ElementRef<T>, P>) {
+type BaseComponentOptions = {
+  isIcon?: boolean;
+};
+
+function createBaseComponent<T extends keyof React.JSX.IntrinsicElements, P>(OriginComponent: React.ForwardRefRenderFunction<React.ElementRef<T>, P>, opt?: BaseComponentOptions) {
   const Component = React.forwardRef<React.ElementRef<T>, P>(OriginComponent) as unknown as Intergalactic.Component<T, P>;
   Component.displayName = OriginComponent.displayName ?? '';
   // @ts-ignore
@@ -363,6 +367,8 @@ function createBaseComponent<T extends keyof React.JSX.IntrinsicElements, P>(Ori
   };
   Component[CORE_COMPONENT] = true;
 
+  Component.__IS_ICON = Boolean(opt?.isIcon);
+
   return Component;
 }
 

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)(
-    <SBack render={Box} tag='button' tabIndex={0}>
-      <ArrowLeft />
-      <SBackText>
+    <SBack render={ButtonLink} color='text-hint' size={200} addonLeft={ArrowLeft}>
+      <ButtonLink.Text ellipsis>
         <Children />
-      </SBackText>
+      </ButtonLink.Text>
     </SBack>,
   );
 }

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,

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 });

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

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<LinkProps, typeof RootLink.enhance, never, {},
     }
   }
 
-  getTextProps(): NSText.HintProps {
+  getTextProps(): NSText.Props {
+    const { addonLeft, addonRight, size, Children } = this.asProps;
+    const Component = this[CORE_INSTANCE];
+
+    const addons = findAllComponents(Children, [Component.Addon.displayName]);
+    const addonWidth = size === undefined || size < 600 ? 20 : 28;
+
+    let addonsCount = addons.reduce((acc, addon) => {
+      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<LinkProps, typeof RootLink.enhance, never, {},
       'aria-label': ariaLabel,
       hintPlacement,
     } = this.asProps;
-    // @ts-ignore
+
     const Link = this[CORE_INSTANCE];
     const SLink = Root;
     const SInner = Box;

semcore/link/src/Link.types.ts

@@ -1,4 +1,5 @@
 import type { BoxProps, SimpleHintPopperProps } from '@semcore/base-components';
+import type Icon from '@semcore/icon';
 import type { NSText } from '@semcore/typography';
 import type React from 'react';
 
@@ -25,9 +26,9 @@ export type LinkProps = BoxProps & NSText.BaseProps & {
    */
   noWrap?: boolean;
   /** Left addon tag */
-  addonLeft?: React.ElementType;
+  addonLeft?: typeof Icon | React.ElementType;
   /** Right addon tag */
-  addonRight?: React.ElementType;
+  addonRight?: typeof Icon | React.ElementType;
   /**
    * The position of the popper relative to the trigger that called it.
    * @default top

semcore/side-panel/src/SidePanel.jsx

@@ -224,15 +224,13 @@ function Title(props) {
 
 function Back(props) {
   const SBack = Root;
-  const SBackText = ButtonLink.Text;
   const { Children, styles } = props;
 
   return sstyled(styles)(
     <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft}>
-      {/* <ButtonLink.Addon><ArrowLeft /></ButtonLink.Addon> */}
-      <SBackText>
+      <ButtonLink.Text ellipsis>
         <Children />
-      </SBackText>
+      </ButtonLink.Text>
     </SBack>,
   );
 }

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 {

stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx

@@ -35,7 +35,7 @@ const Demo = (props: HeaderConfig) => {
         {props.showClose && <FullscreenModal.Close />}
 
         {props.showBack && (
-          <FullscreenModal.Back>
+          <FullscreenModal.Back wMax={120}>
             {props.backText}
           </FullscreenModal.Back>
         )}

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"
     ]
   },