addon-ui 0.4.2 → 0.6.0

package/src/components/Viewport/Provider.tsx

@@ -17,12 +17,21 @@ import styles from "./viewport.module.scss";
 
 export type ViewportProps = ComponentProps<"div"> & {
     mode?: ViewportMode;
+    transition?: boolean;
 };
 
 const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<ViewportProps>> = (
-    {children, className, style, mode: viewportMode = ViewportMode.Adaptive, ...props},
+    {
+        children,
+        className,
+        style,
+        mode: viewportMode = ViewportMode.Adaptive,
+        transition: viewportTransition = true,
+        ...props
+    },
     ref
 ) => {
+    const [transition, withTransition] = useState(viewportTransition);
     const [mode, setModeState] = useState<ViewportMode>(viewportMode);
     const [sizes, setSizesState] = useState<ViewportSizes | null>(null);
 
@@ -40,6 +49,7 @@ const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<Viewp
             setSizes,
             setMode,
             resetSizes,
+            withTransition,
         }),
         [mode, setSizes, setMode, resetSizes]
     );
@@ -81,6 +91,7 @@ const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<Viewp
                 className={classnames(
                     styles["viewport"],
                     {
+                        [styles["viewport--transition"]]: transition,
                         [styles["viewport--expanded"]]: mode === ViewportMode.Expanded,
                         [styles["viewport--fixed"]]: mode === ViewportMode.Fixed,
                     },

package/src/components/Viewport/context.ts

@@ -20,6 +20,8 @@ export interface ViewportContract {
 
     setSizes(sizes: ViewportSizes): void;
 
+    withTransition(transition: boolean): void;
+
     resetSizes(): void;
 }
 
@@ -30,6 +32,8 @@ export const ViewportContext = createContext<ViewportContract>({
 
     setSizes() {},
 
+    withTransition() {},
+
     resetSizes() {},
 });
 

package/src/components/Viewport/viewport.module.scss

@@ -6,13 +6,16 @@
   max-width: var(--viewport-max-width);
   min-height: var(--viewport-min-height);
   max-height: var(--viewport-max-height);
-  transition:
-    height var(--transition-speed-md) ease-in-out,
-    width var(--transition-speed-md) ease-in-out,
-    min-height var(--transition-speed-md) ease-in-out,
-    min-width var(--transition-speed-md) ease-in-out,
-    max-height var(--transition-speed-md) ease-in-out,
-    max-width var(--transition-speed-md) ease-in-out;
+
+  &--transition {
+    transition:
+      height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+      width var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+      min-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+      min-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+      max-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+      max-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out;
+  }
 
   &--expanded {
     min-height: var(--viewport-max-height);

package/src/components/index.ts

@@ -16,11 +16,14 @@ export * from "./Odometer";
 export * from "./ScrollArea";
 export * from "./SvgSprite";
 export * from "./Switch";
+export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextArea";
 export * from "./TextField";
 export * from "./Toast";
 export * from "./Tooltip";
+export * from "./Truncate";
+export * from "./TruncateList";
 export * from "./View";
 export * from "./ViewDrawer";
 export * from "./ViewModal";

package/src/components/types.ts

@@ -15,11 +15,17 @@ import type {
     OdometerProps,
     ScrollAreaProps,
     SwitchProps,
+    TabsProps,
+    TabsContentProps,
+    TabsListProps,
+    TabsTriggerProps,
     TagProps,
     TextAreaProps,
     TextFieldProps,
     ToastProps,
     TooltipProps,
+    TruncateProps,
+    TruncateListProps,
     ViewProps,
     ViewDrawerProps,
     ViewModalProps,
@@ -42,6 +48,10 @@ export interface ComponentsProps {
     odometer?: Pick<OdometerProps, "auto" | "format" | "duration">;
     scrollArea?: ScrollAreaProps;
     switch?: SwitchProps;
+    tabs?: TabsProps;
+    tabsContent?: TabsContentProps;
+    tabsList?: TabsListProps;
+    tabsTrigger?: TabsTriggerProps;
     tag?: Pick<TagProps, "variant" | "size" | "color" | "radius" | "clickable">;
     textArea?: TextAreaProps;
     textField?: TextFieldProps;
@@ -58,7 +68,9 @@ export interface ComponentsProps {
         | "radius"
         | "color"
     >;
-    tooltip?: TooltipProps;
+    tooltip?: Omit<TooltipProps, "content">;
+    truncate?: TruncateProps;
+    truncateList?: TruncateListProps;
     view?: ViewProps;
     viewDrawer?: ViewDrawerProps;
     viewModal?: ViewModalProps;

package/src/providers/ui/styles/reset.scss

@@ -123,5 +123,7 @@ body {
   will-change: background-color, color;
   transition:
     background-color var(--transition-speed-md),
+    border-color var(--transition-speed-md),
+    background var(--transition-speed-md),
     color var(--transition-speed-md);
 }

package/src/styles/mixins.scss

@@ -22,6 +22,12 @@
   }
 }
 
+@mixin view($view) {
+  html[view="#{$view}"] & {
+    @content;
+  }
+}
+
 @mixin browser($browser) {
   html[browser="#{$browser}"] & {
     @content;