update snap name

primer · Aug 15, 2024 · c4f29c8 · c4f29c8
1 parent e6d61f6
commit c4f29c8
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 24 deletions.
diff --git a/e2e/components/drafts/IssueLabel.test.ts b/e2e/components/drafts/IssueLabel.test.ts
@@ -5,94 +5,94 @@ import {themes} from '../../test-helpers/themes'
 const variants = [
   {
     title: 'Default',
-    id: 'drafts-components-issue-label--default',
+    id: 'drafts-components-issuelabel--default',
   },
   {
     title: 'Auburn',
-    id: 'drafts-components-issue-label-features--auburn',
+    id: 'drafts-components-issuelabel-features--auburn',
   },
   {
     title: 'Blue',
-    id: 'drafts-components-issue-label-features--blue',
+    id: 'drafts-components-issuelabel-features--blue',
   },
   {
     title: 'Brown',
-    id: 'drafts-components-issue-label-features--brown',
+    id: 'drafts-components-issuelabel-features--brown',
   },
   {
     title: 'Coral',
-    id: 'drafts-components-issue-label-features--coral',
+    id: 'drafts-components-issuelabel-features--coral',
   },
   {
     title: 'Cyan',
-    id: 'drafts-components-issue-label-features--cyan',
+    id: 'drafts-components-issuelabel-features--cyan',
   },
   {
     title: 'Gray',
-    id: 'drafts-components-issue-label-features--gray',
+    id: 'drafts-components-issuelabel-features--gray',
   },
   {
     title: 'Green',
-    id: 'drafts-components-issue-label-features--green',
+    id: 'drafts-components-issuelabel-features--green',
   },
   {
     title: 'Indigo',
-    id: 'drafts-components-issue-label-features--indigo',
+    id: 'drafts-components-issuelabel-features--indigo',
   },
   {
     title: 'Lemon',
-    id: 'drafts-components-issue-label-features--lemon',
+    id: 'drafts-components-issuelabel-features--lemon',
   },
   {
     title: 'Lime',
-    id: 'drafts-components-issue-label-features--lime',
+    id: 'drafts-components-issuelabel-features--lime',
   },
   {
     title: 'Olive',
-    id: 'drafts-components-issue-label-features--olive',
+    id: 'drafts-components-issuelabel-features--olive',
   },
   {
     title: 'Orange',
-    id: 'drafts-components-issue-label-features--orange',
+    id: 'drafts-components-issuelabel-features--orange',
   },
   {
     title: 'Pine',
-    id: 'drafts-components-issue-label-features--pine',
+    id: 'drafts-components-issuelabel-features--pine',
   },
   {
     title: 'Pink',
-    id: 'drafts-components-issue-label-features--pink',
+    id: 'drafts-components-issuelabel-features--pink',
   },
   {
     title: 'Plum',
-    id: 'drafts-components-issue-label-features--plum',
+    id: 'drafts-components-issuelabel-features--plum',
   },
   {
     title: 'Purple',
-    id: 'drafts-components-issue-label-features--purple',
+    id: 'drafts-components-issuelabel-features--purple',
   },
   {
     title: 'Red',
-    id: 'drafts-components-issue-label-features--red',
+    id: 'drafts-components-issuelabel-features--red',
   },
   {
     title: 'Teal',
-    id: 'drafts-components-issue-label-features--teal',
+    id: 'drafts-components-issuelabel-features--teal',
   },
   {
     title: 'Yellow',
-    id: 'drafts-components-issue-label-features--yellow',
+    id: 'drafts-components-issuelabel-features--yellow',
   },
 ] as const
 
 const sizes = [
   {
     title: 'Size: Large',
-    id: 'drafts-components-issue-label-features--size-large',
+    id: 'drafts-components-issuelabel-features--size-large',
   },
   {
     title: 'Size: Small',
-    id: 'drafts-components-issue-label-features--size-small',
+    id: 'drafts-components-issuelabel-features--size-small',
   },
 ] as const
 

diff --git a/packages/react/src/drafts/IssueLabel/getColorFromHex.ts b/packages/react/src/drafts/IssueLabel/getColorFromHex.ts
@@ -6,7 +6,6 @@ import type {Hex} from './IssueLabel'
  * transforms a hex color provided by the user into a color object with background and text colors
  * @param colorHex — the hex color provided by the user
  * @param colorScheme — the color scheme the user has currently set
- * @param isSelected
  * @param bgColor — the background color from the selected theme, needed to calc the contrast for the colors
  * @returns
  */
@@ -15,7 +14,6 @@ export const getColorsFromHex = (
   colorScheme = 'light',
   bgColor: Hex,
 ): React.CSSProperties | undefined => {
-  if (typeof colorHex !== 'string' || colorHex.startsWith('#') === false) return undefined
   // start values for light mode
   let bgLightness = 96
   let lightnessIncrement: 1 | -1 = -1
@@ -32,6 +30,12 @@ export const getColorsFromHex = (
   let {h, s} = hexToHsluv(colorHex)
 
   // avoid intense bright colors
+  // Hue range: 58 - 198
+  // 58 marks the transition from yellow to yellow-green
+  // 198 makes the tranisiton from cyan to blue
+  // yellow, yellow-green, green, cyan, blue tend to be bright and intense
+  // Setting the hue range of 58 and 198 helps avoid bright colors
+  // saturation: represents the intensity of a color, measured as a percentage from 0 to 100. Capping at 70% to avoid intense bright colors
   if (h >= 58 && h <= 198 && s > 70) {
     s = 70
   }