feat: Add toHexShortString() method (#237)

scttcper · Feb 14, 2023 · 9dccfb6 · 9dccfb6
1 parent 365fdd2
commit 9dccfb6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -318,6 +318,18 @@ const color = new TinyColor('red');
 color.toHex8String(); // "#ff0000ff"
 ```
 
+### toHexShortString
+
+```ts
+const color1 = new TinyColor('#ff000000');
+color1.toHexShortString(); // "#ff000000"
+color1.toHexShortString(true); // "#f000"
+
+const color2 = new TinyColor('#ff0000ff');
+color2.toHexShortString(); // "#ff0000"
+color2.toHexShortString(true); // "#f00"
+```
+
 ### toRgb
 
 ```ts

diff --git a/src/index.ts b/src/index.ts
@@ -220,7 +220,7 @@ export class TinyColor {
   }
 
   /**
-   * Returns the hex value of the color -with a # appened.
+   * Returns the hex value of the color -with a # prefixed.
    * @param allow3Char will shorten hex value to 3 char if possible
    */
   toHexString(allow3Char = false): string {
@@ -236,13 +236,21 @@ export class TinyColor {
   }
 
   /**
-   * Returns the hex 8 value of the color -with a # appened.
+   * Returns the hex 8 value of the color -with a # prefixed.
    * @param allow4Char will shorten hex value to 4 char if possible
    */
   toHex8String(allow4Char = false): string {
     return '#' + this.toHex8(allow4Char);
   }
 
+  /**
+   * Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
+   * @param allowShortChar will shorten hex value to 3 or 4 char if possible
+   */
+  toHexShortString(allowShortChar = false): string {
+    return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
+  }
+
   /**
    * Returns the object as a RGBA object.
    */

diff --git a/test/conversions.spec.ts b/test/conversions.spec.ts
@@ -111,13 +111,4 @@ describe('TinyColor Conversions', () => {
       expect(tiny.toHexString()).toBe(new TinyColor(tiny).toHexString());
     }
   });
-  it('Alpha compositing correctly', () => {
-    const tiny1 = new TinyColor('rgba(255,0,0,0.5)');
-    const tiny2 = new TinyColor('rgba(0,255,0,0.5)');
-    const tiny3 = new TinyColor('rgba(0,0,255,1)');
-    const tiny4 = new TinyColor('rgba(0,0,0,0.5)');
-    expect(tiny1.onBackground(tiny2).toRgbString()).toBe('rgba(170, 85, 0, 0.75)');
-    expect(tiny1.onBackground(tiny3).toRgbString()).toBe('rgb(128, 0, 128)');
-    expect(tiny3.onBackground(tiny4).toRgbString()).toBe('rgb(0, 0, 255)');
-  });
 });
diff --git a/test/index.spec.ts b/test/index.spec.ts
@@ -188,6 +188,10 @@ describe('TinyColor', () => {
     expect(new TinyColor('rgba 255 0 0 0').toHex8String()).toBe('#ff000000');
     expect(new TinyColor('rgba 255 0 0 1').toHex8String()).toBe('#ff0000ff');
     expect(new TinyColor('rgba 255 0 0 1').toHex8String(true)).toBe('#f00f');
+    expect(new TinyColor('rgba 255 0 0 0').toHexShortString()).toBe('#ff000000');
+    expect(new TinyColor('rgba 255 0 0 0').toHexShortString(true)).toBe('#f000');
+    expect(new TinyColor('rgba 255 0 0 1').toHexShortString()).toBe('#ff0000');
+    expect(new TinyColor('rgba 255 0 0 1').toHexShortString(true)).toBe('#f00');
     expect(new TinyColor('rgb 255 0 0').toHex()).toBe('ff0000');
     expect(new TinyColor('rgb 255 0 0').toHex(true)).toBe('f00');
     expect(new TinyColor('rgba 255 0 0 0.5').toHex8()).toBe('ff000080');
@@ -757,6 +761,15 @@ describe('TinyColor', () => {
     expect(new TinyColor('#ffffff00').onBackground('#000').toHex()).toBe('000000');
     expect(new TinyColor('#ffffff77').onBackground('#000').toHex()).toBe('777777');
     expect(new TinyColor('#262a6d82').onBackground('#644242').toHex()).toBe('443658');
+    expect(new TinyColor('rgba(255,0,0,0.5)').onBackground('rgba(0,255,0,0.5)').toRgbString()).toBe(
+      'rgba(170, 85, 0, 0.75)',
+    );
+    expect(new TinyColor('rgba(255,0,0,0.5)').onBackground('rgba(0,0,255,1)').toRgbString()).toBe(
+      'rgb(128, 0, 128)',
+    );
+    expect(new TinyColor('rgba(0,0,255,1)').onBackground('rgba(0,0,0,0.5)').toRgbString()).toBe(
+      'rgb(0, 0, 255)',
+    );
   });
   it('complement', () => {
     const complementDoesntModifyInstance = new TinyColor('red');