@gitlab/ui 79.1.1 → 79.3.0

package/src/tokens/text.dark.tokens.stories.js

@@ -3,7 +3,12 @@ import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({
   containerClass: 'gl-bg-gray-950',
-  tokens: COMPILED_TOKENS.text,
+  tokens: {
+    primary: COMPILED_TOKENS.text.primary,
+    secondary: COMPILED_TOKENS.text.secondary,
+    tertiary: COMPILED_TOKENS.text.tertiary,
+    ...COMPILED_TOKENS.text.color,
+  },
   isBackgroundColorStory: false,
 });
 

package/src/tokens/text.tokens.json

@@ -3,17 +3,73 @@
     "primary": {
       "$value": "#333238",
       "$type": "color",
+      "$description": "Use text.color.strong instead",
+      "deprecated": true,
       "themeable": true
     },
     "secondary": {
       "$value": "#737278",
       "$type": "color",
+      "$description": "Use text.color.subtle instead",
+      "deprecated": true,
       "themeable": true
     },
     "tertiary": {
       "$value": "#89888d",
       "$type": "color",
+      "$description": "Use text.color.disabled instead",
+      "deprecated": true,
       "themeable": true
+    },
+    "color": {
+      "default": {
+        "$value": "#434248",
+        "$type": "color",
+        "$description": "Used for the default text color.",
+        "themeable": true
+      },
+      "subtle": {
+        "$value": "#626168",
+        "$type": "color",
+        "$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "themeable": true
+      },
+      "strong": {
+        "$value": "#1f1e24",
+        "$type": "color",
+        "$description": "Used for text with the highest contrast.",
+        "themeable": true
+      },
+      "heading": {
+        "$value": "#1f1e24",
+        "$type": "color",
+        "$description": "Used for headings level 1-6.",
+        "themeable": true
+      },
+      "link": {
+        "$value": "#0b5cad",
+        "$type": "color",
+        "$description": "Used for default text links.",
+        "themeable": true
+      },
+      "danger": {
+        "$value": "#c91c00",
+        "$type": "color",
+        "$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+        "themeable": true
+      },
+      "success": {
+        "$value": "#217645",
+        "$type": "color",
+        "$description": "Used for text indicating success or validity.",
+        "themeable": true
+      },
+      "disabled": {
+        "$value": "#89888d",
+        "$type": "color",
+        "$description": "Used for disabled text.",
+        "themeable": true
+      }
     }
   }
 }

package/src/tokens/text.tokens.stories.js

@@ -2,7 +2,12 @@ import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({
-  tokens: COMPILED_TOKENS.text,
+  tokens: {
+    primary: COMPILED_TOKENS.text.primary,
+    secondary: COMPILED_TOKENS.text.secondary,
+    tertiary: COMPILED_TOKENS.text.tertiary,
+    ...COMPILED_TOKENS.text.color,
+  },
   isBackgroundColorStory: false,
 });
 

package/src/tokens/tokens_story.vue

@@ -1,12 +1,18 @@
 <script>
 import { colorFromBackground } from '../utils/utils';
+import { GlTooltipDirective } from '../directives/tooltip';
+import GlBadge from '../components/base/badge/badge.vue';
 import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
 
 export default {
   name: 'TokensStory',
   components: {
+    GlBadge,
     GlColorContrast,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: ['isBackgroundColorStory', 'lightBackground', 'darkBackground', 'containerClass'],
   props: {
     tokens: {
@@ -53,8 +59,13 @@ export default {
         :class="getClasses(token.value)"
         :style="getStyle(token.value)"
       >
-        <code class="gl-reset-color">{{ getTokenName(token) }}</code>
+        <code v-gl-tooltip :title="token.comment" class="gl-reset-color">
+          {{ getTokenName(token) }}
+        </code>
         <div class="gl-display-flex gl-align-items-center gl-gap-3">
+          <gl-badge v-if="token.deprecated" v-gl-tooltip :title="token.comment" variant="danger">
+            Deprecated
+          </gl-badge>
           <code class="gl-reset-color">{{ token.value }}</code>
           <gl-color-contrast
             v-if="!isAlpha(token.value)"

package/src/utils/utils.js

@@ -204,3 +204,21 @@ export function stopEvent(
 export function filterVisible(els) {
   return (els || []).filter((el) => isVisible(el));
 }
+
+/**
+ * Given an element, returns a Rect object
+ * with top and bottom boundaries removed.
+ */
+export function getHorizontalBoundingClientRect(el) {
+  const rect = el?.getBoundingClientRect();
+
+  if (rect) {
+    return {
+      x: rect.x,
+      width: rect.width,
+      y: 0, // top of the document
+      height: document.documentElement.clientHeight, // bottom of the document
+    };
+  }
+  return null;
+}

package/src/utils/utils.spec.js

@@ -3,6 +3,7 @@ import {
   isElementTabbable,
   focusFirstFocusableElement,
   stopEvent,
+  getHorizontalBoundingClientRect,
 } from './utils';
 
 describe('isElementFocusable', () => {
@@ -153,4 +154,55 @@ describe('stopEvent', () => {
     expect(event.stopPropagation).not.toHaveBeenCalled();
     expect(event.stopImmediatePropagation).toHaveBeenCalledTimes(1);
   });
+
+  describe('getHorizontalBoundingClientRect', () => {
+    describe('when there is a reference element', () => {
+      let mainElement;
+
+      const [
+        MAIN_LEFT_BOUNDARY,
+        MAIN_WIDTH,
+        MAIN_TOP_BOUNDARY,
+        MAIN_HEIGHT,
+        DOCUMENT_TOP_BOUNDARY,
+        DOCUMENT_HEIGHT,
+      ] = [10, 20, 30, 40, 0, 50];
+
+      beforeEach(() => {
+        mainElement = document.createElement('main');
+        jest.spyOn(mainElement, 'getBoundingClientRect').mockImplementation(() => {
+          return {
+            x: MAIN_LEFT_BOUNDARY,
+            width: MAIN_WIDTH,
+            y: MAIN_TOP_BOUNDARY,
+            height: MAIN_HEIGHT,
+          };
+        });
+        Object.defineProperty(document.documentElement, 'clientHeight', {
+          get() {
+            return DOCUMENT_HEIGHT;
+          },
+        });
+      });
+
+      afterEach(() => {
+        mainElement = null;
+      });
+
+      it("returns the element's horizontal boundaries and the document's vertical boundaries", () => {
+        expect(getHorizontalBoundingClientRect(mainElement)).toEqual({
+          x: MAIN_LEFT_BOUNDARY,
+          width: MAIN_WIDTH,
+          y: DOCUMENT_TOP_BOUNDARY,
+          height: DOCUMENT_HEIGHT,
+        });
+      });
+    });
+
+    describe('when there is no reference element', () => {
+      it('returns `null`', () => {
+        expect(getHorizontalBoundingClientRect(null)).toEqual(null);
+      });
+    });
+  });
 });

package/tailwind.defaults.js

@@ -26,7 +26,7 @@ const dataVizColors = Object.entries(COMPILED_TOKENS['data-viz']).reduce((acc, [
   return acc;
 }, {});
 
-const textColors = Object.entries(COMPILED_TOKENS.text).reduce((acc, [scale, token]) => {
+const textColors = Object.entries(COMPILED_TOKENS.text.color).reduce((acc, [scale, token]) => {
   acc[scale] = cssCustomPropertyWithValue(token);
   return acc;
 }, {});
@@ -40,6 +40,14 @@ const colors = {
   ...dataVizColors,
 };
 
+const textColor = {
+  ...colors,
+  ...textColors,
+  primary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.primary),
+  secondary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.secondary),
+  tertiary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.tertiary),
+};
+
 const gridSize = 0.5; // rem
 const spacing = {
   0: '0',
@@ -102,9 +110,6 @@ module.exports = {
       semibold: 500,
       bold: 600,
     },
-    textColor: {
-      ...colors,
-      ...textColors,
-    },
+    textColor,
   },
 };