{primaryAction && (
-
-
+
+
)}
{secondaryAction && (
-
-
+
+
)}
{showMenu && (
@@ -186,3 +193,10 @@ export function Page({
);
}
+
+export const getActionProps = (actionProps: ButtonActionProps): ButtonProps => {
+ const buttonProps = { ...actionProps };
+ if (actionProps.ref) delete buttonProps.ref;
+
+ return buttonProps;
+};
diff --git a/packages/components/src/Tooltip/Tooltip.css b/packages/components/src/Tooltip/Tooltip.css
index 3406d0025f..45e98a2184 100644
--- a/packages/components/src/Tooltip/Tooltip.css
+++ b/packages/components/src/Tooltip/Tooltip.css
@@ -17,7 +17,7 @@
display: inline-block;
position: relative;
max-width: 250px;
- padding: calc(var(--space-base) - var(--space-smallest)) var(--space-base);
+ padding: var(--space-small) calc(var(--space-small) + var(--space-smaller));
border-radius: var(--radius-base);
background-color: var(--tooltip--surface);
}
@@ -88,7 +88,7 @@
.tooltipMessage {
margin: 0;
color: var(--color-text--reverse);
- font-size: var(--typography--fontSize-base);
- font-weight: 600;
+ font-size: var(--typography--fontSize-small);
+ font-weight: 500;
line-height: var(--typography--lineHeight-base);
}
diff --git a/packages/components/src/Tooltip/Tooltip.tsx b/packages/components/src/Tooltip/Tooltip.tsx
index e4c6e1e6d9..83840fe34e 100644
--- a/packages/components/src/Tooltip/Tooltip.tsx
+++ b/packages/components/src/Tooltip/Tooltip.tsx
@@ -9,8 +9,8 @@ import { useTooltipPositioning } from "./useTooltipPositioning";
import { Placement } from "./Tooltip.types";
const variation = {
- startOrStop: { scale: 0.6, opacity: 0 },
- done: { scale: 1, opacity: 1 },
+ startOrStop: { opacity: 0 },
+ done: { opacity: 1 },
};
interface TooltipProps {
@@ -24,15 +24,12 @@ interface TooltipProps {
* @default 'top'
*/
readonly preferredPlacement?: Placement;
-
- readonly setTabIndex?: boolean;
}
export function Tooltip({
message,
children,
preferredPlacement = "top",
- setTabIndex = true,
}: TooltipProps) {
const [show, setShow] = useState(false);
@@ -75,8 +72,9 @@ export function Tooltip({
animate="done"
exit="startOrStop"
transition={{
- damping: 50,
- stiffness: 500,
+ ease: "easeOut",
+ duration: 0.15,
+ delay: 0.3,
}}
>
{message}
@@ -109,10 +107,7 @@ export function Tooltip({
// This is to avoid having to add those attribute as a prop on every
// component we have.
activator.setAttribute("aria-description", message);
-
- if (setTabIndex) {
- activator.setAttribute("tabindex", "0"); // enable focus
- }
+ activator.setAttribute("tabindex", "0"); // enable focus
}
};
diff --git a/packages/components/src/Typography/Typography.test.tsx b/packages/components/src/Typography/Typography.test.tsx
index 48fd27a797..aba21d05b1 100644
--- a/packages/components/src/Typography/Typography.test.tsx
+++ b/packages/components/src/Typography/Typography.test.tsx
@@ -255,3 +255,43 @@ it("renders a center-aligned text", () => {
`);
});
+
+describe("underlining", () => {
+ it("renders an underline when a style is specified", () => {
+ const { container } = render(
+
Underline me ,
+ );
+
+ const snapshot = `
+
+ `;
+
+ expect(container).toMatchInlineSnapshot(snapshot);
+ });
+
+ it("renders an underline with a customizable color", () => {
+ const { container } = render(
+
Underline me ,
+ );
+
+ const snapshot = `
+
+ `;
+
+ expect(container).toMatchInlineSnapshot(snapshot);
+ });
+});
diff --git a/packages/components/src/Typography/Typography.tsx b/packages/components/src/Typography/Typography.tsx
index f785ac8c44..5634e4b237 100644
--- a/packages/components/src/Typography/Typography.tsx
+++ b/packages/components/src/Typography/Typography.tsx
@@ -10,6 +10,8 @@ import emphasis from "./css/Emphasis.css";
import truncate from "./css/Truncate.css";
import alignment from "./css/TextAlignment.css";
import fontFamilies from "./css/FontFamilies.css";
+import underlineStyles from "./css/Underline.css";
+import { UnderlineStyle, UnderlineStyleWithColor } from "./types";
interface TypographyProps {
readonly id?: string;
@@ -50,6 +52,16 @@ interface TypographyProps {
readonly fontFamily?: keyof typeof fontFamilies;
readonly children: ReactNode;
readonly numberOfLines?: number;
+
+ /**
+ * The style (and optionally a color) of underline the text is decorated with.
+ * All semantic color tokens (other than the base values) defined in tokens.web
+ * are valid values. If omitted, no underline is applied.
+ *
+ * @example "solid" for a non-dashed underline of the same color as `textColor`
+ * @example "double color-invoice" for a double underline in the specified color
+ */
+ readonly underline?: UnderlineStyle | UnderlineStyleWithColor | undefined;
}
export type TypographyOptions = Omit
;
@@ -65,6 +77,7 @@ export function Typography({
emphasisType,
numberOfLines,
fontFamily,
+ underline,
}: TypographyProps) {
const shouldTruncateText = numberOfLines && numberOfLines > 0;
const className = classnames(
@@ -76,23 +89,49 @@ export function Typography({
emphasisType && emphasis[emphasisType],
fontFamily && fontFamilies[fontFamily],
shouldTruncateText && truncate.textTruncate,
+ underline && underlineStyles.basicUnderline,
{
...(align && { [alignment[align]]: align !== `start` }),
},
);
- let truncateLines: CSSProperties | undefined;
+ let stylesOverrides: CSSProperties = {};
if (shouldTruncateText) {
- truncateLines = {
+ stylesOverrides = {
WebkitLineClamp: numberOfLines,
WebkitBoxOrient: "vertical",
};
}
+ if (underline) {
+ const [underlineStyle, underlineColor] = underline.split(" ");
+
+ stylesOverrides.textDecorationStyle = underlineStyle as UnderlineStyle;
+ stylesOverrides.textDecorationColor = computeUnderlineColor(
+ underlineColor,
+ textColor,
+ );
+ }
+
return (
-
+
{children}
);
}
+
+function computeUnderlineColor(
+ textDecorationColor: string,
+ textColor?: keyof typeof textColors,
+): string | undefined {
+ // Use the specified underline color if one is provided. If no underline color
+ // is specified, fall back to the text color for the underline.
+ if (textDecorationColor) {
+ return `var(--${textDecorationColor})`;
+ }
+
+ if (textColor) {
+ return textColors[textColor];
+ }
+}
diff --git a/packages/components/src/Typography/css/Underline.css b/packages/components/src/Typography/css/Underline.css
new file mode 100644
index 0000000000..311580a75c
--- /dev/null
+++ b/packages/components/src/Typography/css/Underline.css
@@ -0,0 +1,5 @@
+.basicUnderline {
+ text-decoration-line: underline;
+ text-decoration-thickness: 1px;
+ text-underline-offset: var(--space-smaller);
+}
diff --git a/packages/components/src/Typography/css/Underline.css.d.ts b/packages/components/src/Typography/css/Underline.css.d.ts
new file mode 100644
index 0000000000..cfe1d093a0
--- /dev/null
+++ b/packages/components/src/Typography/css/Underline.css.d.ts
@@ -0,0 +1,5 @@
+declare const styles: {
+ readonly "basicUnderline": string;
+};
+export = styles;
+
diff --git a/packages/components/src/Typography/types.ts b/packages/components/src/Typography/types.ts
new file mode 100644
index 0000000000..2a452cb088
--- /dev/null
+++ b/packages/components/src/Typography/types.ts
@@ -0,0 +1,15 @@
+import { tokens } from "@jobber/design";
+
+type Color = {
+ // Omit non-color properties from the token map
+ [K in keyof typeof tokens]: K extends `color-${string}`
+ ? // Omit the base colors as they shouldn't be used
+ K extends `color-base-${string}`
+ ? never
+ : K
+ : never;
+}[keyof typeof tokens];
+
+export type UnderlineStyle = "solid" | "double" | "dotted" | "dashed";
+
+export type UnderlineStyleWithColor = `${UnderlineStyle} ${Color}`;
diff --git a/packages/design/CHANGELOG.md b/packages/design/CHANGELOG.md
index 4329d03ffb..7a8d6f41db 100644
--- a/packages/design/CHANGELOG.md
+++ b/packages/design/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [0.65.1](https://github.com/GetJobber/atlantis/compare/@jobber/design@0.65.0...@jobber/design@0.65.1) (2024-09-17)
+
+
+### Bug Fixes
+
+* **design:** Update critical color for dark mode ([#2006](https://github.com/GetJobber/atlantis/issues/2006)) ([88254f2](https://github.com/GetJobber/atlantis/commit/88254f22708ca8c7ef60283187e8a9c136210f89))
+
+
+
+
+
# [0.65.0](https://github.com/GetJobber/atlantis/compare/@jobber/design@0.64.0...@jobber/design@0.65.0) (2024-08-22)
diff --git a/packages/design/package.json b/packages/design/package.json
index 0d102c6b44..066215967c 100644
--- a/packages/design/package.json
+++ b/packages/design/package.json
@@ -1,6 +1,6 @@
{
"name": "@jobber/design",
- "version": "0.65.0",
+ "version": "0.65.1",
"description": "Design foundation for the Jobber Atlantis Design System",
"license": "MIT",
"type": "module",
diff --git a/packages/design/src/tokens/dark.tokens.json b/packages/design/src/tokens/dark.tokens.json
index 2662113e0b..ca600f9509 100644
--- a/packages/design/src/tokens/dark.tokens.json
+++ b/packages/design/src/tokens/dark.tokens.json
@@ -51,7 +51,7 @@
}
},
"critical": {
- "$value": "{color.base.red-.600}"
+ "$value": "{color.base.red-.500}"
},
"critical-": {
"surface": {