Update VSCode settings.

fortanix · Oct 11, 2024 · b05f73e · b05f73e
1 parent 05284f0
commit b05f73e
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 27 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,22 @@
 {
   // https://github.com/Microsoft/vscode-css-languageservice/blob/main/docs/customData.md
   // https://stackoverflow.com/questions/42520229/vs-code-and-intellisense-for-css-grid-and-css-modules
-  "css.customData": [".vscode/custom.css-data.json"]
+  "css.customData": [".vscode/custom.css-data.json"],
+
+  // Editor (code)
+  "editor.insertSpaces": true, // Insert spaces when pressing Tab
+  "editor.tabSize": 2,
+  "editor.detectIndentation": true, // Detect tabSize/insertSpaces automatically when opening a file
+  "editor.renderWhitespace": "selection", // Render whitespace as visible when selecting text
+  "editor.wordWrap": "wordWrapColumn",
+  "editor.wordWrapColumn": 120,
+  "editor.rulers": [120],
+  "editor.formatOnSave": false, // Disable auto-format
+  "editor.formatOnPaste": false,
+  "editor.comments.ignoreEmptyLines": false,
+  "files.insertFinalNewline": true, // Insert a newline at the end of the file when saving
+  "files.trimTrailingWhitespace": false, // Do not trim trailing whitespace
+  "editor.trimAutoWhitespace": false,
+  "files.eol": "\n",
+  "javascript.preferences.quoteStyle": "single",
 }
diff --git a/src/components/overlays/Modal/Modal.module.scss b/src/components/overlays/Modal/Modal.module.scss
@@ -8,26 +8,26 @@
 @layer baklava.components {
   .bk-modal {
     @include bk.component-base(bk-modal);
-
+    
     @include Panel.bk-panel;
-
+    
     /* --bk-modal-background-color: color-mix(in srgb, var(--bk-panel-background-color) 80%, transparent); */
     --bk-modal-background-color:  var(--bk-panel-background-color);
-
+    
     margin: auto;
     padding: 0;
     height: fit-content;
     min-height: bk.$spacing-16;
     max-width: calc(100% - bk.$spacing-6);
     max-height: calc(100% - bk.$spacing-6);
-
+    
     box-shadow: 0 8px 10px 1px rgba(0 0 0 / 14%), 0 3px 14px 2px rgba(0 0 0 / 12%), 0 5px 5px -3px rgba(0 0 0 / 3%);
     background-color: var(--bk-modal-background-color);
     border-radius: bk.$sizing-2;
-
+    
     display: none; /* flex */
     flex-direction: column;
-
+    
     &.bk-modal-small {
       // 484px
       width: calc(484 * bk.$size-1);
@@ -52,19 +52,19 @@
       position: sticky;
       top: 0;
       padding: 0;
-
+      
       background: var(--bk-modal-background-color);
-
+      
       display: flex;
       flex-direction: row;
       align-items: baseline;
       margin-bottom: bk.$spacing-7;
-
+      
       h1 {
         font-size: 16px; // do not match bk variable sizes
         font-weight: bk.$font-weight-semibold;
       }
-
+      
       :nth-child(1 of :global(.action)) {
         margin-left: auto;
       }
@@ -87,7 +87,7 @@
       flex: 1; /* Make sure we cover all available space */
       overflow: auto;
     }
-
+    
     /* Variant: slide out */
     --modal-slide-out-inset: var(--bk-sizing-3);
     &:is(.bk-modal--slide-out-left, .bk-modal--slide-out-right) {
@@ -97,7 +97,7 @@
       width: 60vw;
       height: auto;
       max-height: 100%;
-
+      
       &.bk-modal--slide-out-left {
         right: auto;
         transform-origin: center left;
@@ -110,25 +110,25 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
-
+      
       opacity: 1;
       transform: scaleX(0);
       &:modal {
         transform: scaleX(1);
-
+        
         @starting-style {
           opacity: 1;
           transform: scaleX(0);
         }
       }
-
+      
       .bk-modal__content {
         overflow: auto;
       }
     }
-
+    
     /* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#animating_dialogs */
-
+    
     opacity: 0;
     scale: 0.98 0.98;
     transition:
@@ -137,21 +137,21 @@
       overlay 1ms ease-out allow-discrete,
       display 1ms ease-out allow-discrete;
     transition-duration: 200ms; /* Exit transition duration */
-
+    
     &:modal {
       display: flex;
       opacity: 1;
       scale: 1 1;
       transition-duration: 120ms; /* Enter transition duration */
       transition-timing-function: ease-in;
-
+      
       @starting-style {
         opacity: 0;
         scale: 1.05 1.05;
       }
     }
   }
-
+  
   /* Note: `::backdrop` cannot be nested/scoped (at least in Chrome v120) */
   .bk-modal::backdrop {
     --transition-time: 200ms;
@@ -171,10 +171,10 @@
       background-color: rgb(0 0 0 / 0%);
     }
   }
-
+  
   .bk-modal-spinner {
     outline: none !important; // prevent blue border on Esc pressing
-
+    
     .bk-modal__content {
       display: flex;
       justify-content: center;

diff --git a/src/components/overlays/Modal/Modal.stories.tsx b/src/components/overlays/Modal/Modal.stories.tsx
@@ -48,7 +48,7 @@ const reusableModalChildren: React.JSX.Element = (
     </Modal.Header>
     <Modal.Content>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-
+      
       <ModalWithTrigger triggerLabel="Open Submodal">
         <Modal.Header>
           <h1>Submodal title</h1>
@@ -58,7 +58,7 @@ const reusableModalChildren: React.JSX.Element = (
           <OverflowTester/>
         </Modal.Content>
       </ModalWithTrigger>
-
+      
       <OverflowTester/>
     </Modal.Content>
     <Modal.Footer>This is a modal footer with eventual action buttons</Modal.Footer>

diff --git a/src/components/overlays/Modal/Modal.tsx b/src/components/overlays/Modal/Modal.tsx
@@ -117,7 +117,7 @@ const Modal = ({
       if (dialog === null) {
         return;
       }
-
+      
       if (active && event.target === dialog) {
         onClose();
       }
@@ -129,7 +129,7 @@ const Modal = ({
     if (dialog === null) {
       return;
     }
-
+    
     dialog.addEventListener('close', handleCloseEvent);
     return () => {
       dialog.removeEventListener('close', handleCloseEvent);