@socketsupply/components - npm Package Compare versions

Comparing version 13.2.2 to 13.2.4

input/index.js

@@ -122,2 +122,3 @@ const Tonic = require('@socketsupply/tonic')
         padding: 8px;
+        margin: 0;
         background-color: var(--tonic-input-background, var(--tonic-background, transparent));
@@ -124,0 +125,0 @@ border: 1px solid var(--tonic-border, #ccc);

package.json

 {
   "name": "@socketsupply/components",
-  "version": "13.2.2",
+  "version": "13.2.4",
   "description": "Example components",
@@ -5,0 +5,0 @@ "scripts": {

select/index.js

@@ -8,3 +8,2 @@ const Tonic = require('@socketsupply/tonic')
       invalid: false,
-      iconArrow: TonicSelect.svg.default(),
       width: '250px',
@@ -40,2 +39,9 @@ radius: '2px'
 
+      tonic-select .tonic--select {
+        position: relative;
+        border: 1px solid var(--tonic-border, #ccc);
+        border-radius: 2px;
+        background-color: var(--tonic-input-background, var(--tonic-background, #f66));
+      }
+
       tonic-select.tonic--loading .tonic--wrapper:before {
@@ -57,9 +63,32 @@ margin-top: -8px;
 
+      tonic-select .tonic--arrow {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 38px;
+        z-index: 1;
+      }
+
+      tonic-select .tonic--arrow:before {
+        content: "";
+        width: 6px;
+        height: 6px;
+        position: absolute;
+        top: 46%;
+        left: 50%;
+        -webkit-transform: translateY(-50%) translateX(-50%) rotate(135deg);
+        -moz-transform: translateY(-50%) translateX(-50%) rotate(135deg);
+        transform: translateY(-50%) translateX(-50%) rotate(135deg);
+        border-top: 1px solid var(--tonic-primary, #333);
+        border-right: 1px solid var(--tonic-primary, #333);
+      }
+
       tonic-select select {
         color: var(--tonic-primary, #333);
         font: 14px var(--tonic-monospace, 'Andale Mono', monospace);
-        background-color: var(--tonic-input-background, var(--tonic-background, #f66));
-        background-repeat: no-repeat;
-        background-position: center right;
-        border: 1px solid var(--tonic-border, #ccc);
+        background-color: transparent;
+        border: none;
+        width: 100%;
         -webkit-appearance: none;
@@ -69,7 +98,12 @@ -moz-appearance: none;
         position: relative;
+        z-index: 2;
+        margin: 0;
+        outline: none;
       }
 
-      tonic-select select:focus {
+      tonic-select select:focus ~ .tonic--background {
+        content: " ";
+        position: absolute;
+        top: 0; left: 0; right: 0; bottom: 0;
         background-color: var(--tonic-input-background-focus, rgba(241, 241, 241, 0.75));
-        outline: none;
       }
@@ -266,7 +300,4 @@
     const {
-      height,
-      width,
       padding,
-      radius,
-      iconArrow
+      radius
     } = this.props
@@ -276,10 +307,7 @@
       wrapper: {
-        width
+        width: '100%'
       },
       select: {
-        width,
-        height,
         borderRadius: radius,
-        padding,
-        backgroundImage: `url('${iconArrow}')`
+        padding
       }
@@ -341,14 +369,20 @@ }
         ${this.renderLabel()}
-        <select ... ${{
-          styles: 'select',
-          disabled: disabled === 'true',
-          multiple: multiple === 'true',
-          name,
-          tabindex,
-          required,
-          size,
-          id: `tonic--select_${this.props.id}`
-        }}>
-          ${this.childNodes}
-        </select>
+        <div class="tonic--select">
+          <select ... ${{
+            styles: 'select',
+            width: '100%',
+            height: '100%',
+            disabled: disabled === 'true',
+            multiple: multiple === 'true',
+            name,
+            tabindex,
+            required,
+            size,
+            id: `tonic--select_${this.props.id}`
+          }}>
+            ${this.childNodes}
+          </select>
+          <div class="tonic--arrow"></div>
+          <div class="tonic--background"></div>
+        </div>
 
@@ -363,10 +397,2 @@ <div class="tonic--invalid">
 
-TonicSelect.svg = {}
-TonicSelect.svg.toURL = s => `data:image/svg+xml;base64,${window.btoa(s)}`
-TonicSelect.svg.default = () => TonicSelect.svg.toURL(`
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <path fill="#D7DBDD" d="M61.4,45.8l-11,13.4c-0.2,0.3-0.5,0.3-0.7,0l-11-13.4c-0.3-0.3-0.1-0.8,0.4-0.8h22C61.4,45,61.7,45.5,61.4,45.8z"/>
-  </svg>
-`)
-
 module.exports = { TonicSelect }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1013150

increased by0.19%

Lines of code

27419

increased by0.27%

Worsened metrics

Number of package files

79

decreased by-1.25%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes