npm - @aquera/nile-elements - Versions diffs - 0.1.32 → 0.1.33-beta-1.0 - Mend

@aquera/nile-elements 0.1.32 → 0.1.33-beta-1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/README.md CHANGED Viewed

@@ -79,9 +79,18 @@ To run a local development server that serves the basic demo located in `demo/in
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
+#### Version 0.1.33-beta-1.0
+- Nile Menu: Bugfix for using space key in nile input inside nile-menu
-#### Version 0.1.32
-- Nile Table: Nile Table available as a wrapper component
+#### Version 0.1.32-beta-1.5
+- Nile Tokens: Spacing tokens updated
+- Dependency Nile 0.3.61-beta-1.0
+#### Version 0.1.32-beta-1.4
+-  Nile Tooltip: Bug Fixes
+#### Version 0.1.32-beta-1.3
+- Nile Input: Safari's AutoFill icon defect fix
 #### Version 0.1.31
 - Nile Stepper: Stylings updates and State change bugfixes

package/demo/index.html CHANGED Viewed

@@ -1,39 +1,274 @@
 <!DOCTYPE html>
 <html lang="en-GB">
 <head>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
   <link rel="stylesheet" href="index.css" />
   <script type="module" src="index.js"></script>
+  <style>
+    body {
+      font-family: sans-serif;
+      padding: 150px;
+      padding-left: 300px;
+    }
+    .demo {
+      margin-bottom: 30px;
+    }
+    .demo h2 {
+      margin-bottom: 10px;
+    }
+    /* Container for testing the hoist prop */
+    .overflow-container {
+      overflow: auto;
+      width: 300px;
+      height: 100px;
+      border: 1px solid #ccc;
+      padding: 20px;
+      position: relative;
+    }
+  </style>
 </head>
-<style>
-  .flex-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 30px;
-    padding: 0;
-    margin: 0;
-    border: 1px solid silver;
-    height: 900px;
-  }
-  nile-button {
-    flex: 0 0 auto;
-    height: 38px;
-  }
-</style>
 <body>
-    <div style="padding: 30px;">
-        <nile-progress-bar value="80"></nile-progress-bar>
-    </div>
-    <div style="padding: 30px;">
-        <nile-circular-progressbar content="text"></nile-circular-progressbar>
-<nile-circular-progressbar value="80" size="60"></nile-circular-progressbar>
-<nile-circular-progressbar></nile-circular-progressbar>
-<nile-circular-progressbar value="30" content=" "></nile-circular-progressbar>
+  <h1>Nile Tooltip Component Demo</h1>
+  <!-- Default tooltip (hover and focus trigger) -->
+  <div class="demo">
+    <nile-tooltip placement="bottom"  >
+      <!-- The trigger element -->
+      <button>Hover me!</button>
+      <!-- The tooltip content (passed through a named slot) -->
+      <div slot="content">
+        <strong>Custom Tooltip:</strong> You can put any HTML here!
+      </div>
+    </nile-tooltip>
+  <!-- Large tooltip -->
+  <div class="demo">
+    <h2>Large Tooltip</h2>
+    <nile-tooltip content=" " placement="tops-birat">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <!-- Tooltip with bottom-start placement -->
+  <div class="demo">
+    <h2>Bottom-Start Placement</h2>
+    <nile-tooltip content="Tooltip at bottom-start does it work even lets check
+    freestar
+    What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+    " placement="bottom" max-width="400px" max-height="250px" >
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+<div style="padding: 150px;">
+  <div class="demo">
+    <h2>Top Placement</h2>
+    <nile-tooltip content="Tooltip at top  What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="top">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Top-Start Placement</h2>
+    <nile-tooltip content="Tooltip at top-start does it work even lets check  What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="top-start">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Top-End Placement</h2>
+    <nile-tooltip content="Tooltip at top-end does it work even lets chec  What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point ok" placement="top-end">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Right Placement</h2>
+    <nile-tooltip content="Tooltip at right  What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="right">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Right-Start Placement</h2>
+    <nile-tooltip content="Tooltip at right-start does it work even lets check  What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="right-start">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Right-End Placement</h2>
+    <nile-tooltip content="Tooltip at right-end does it work even lets check  What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="right-end">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Bottom Placement</h2>
+    <nile-tooltip content="Tooltip at bottom  What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o " placement="bottom">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Bottom-Start Placement</h2>
+    <nile-tooltip content="Tooltip at bottom-start   What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point odoes it work even lets check" placement="bottom-start">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Bottom-End Placement</h2>
+    <nile-tooltip content="Tooltip at bottom-end does i What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point ot work even lets check" placement="bottom-end">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Left Placement</h2>
+    <nile-tooltip content="Tooltip at
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum h"  placement="left">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Left-Start Placement</h2>
+    <nile-tooltip content="Tooltip at left-start doe What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point os it work even lets check"  placement="left-start">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <div class="demo">
+    <h2>Left-End Placement</h2>
+    <nile-tooltip content=" Tooltip at bottom-start does it work even lets check
+    freestar
+    What is Lorem Ipsum?
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    Why do we use it?
+    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+    " placement="left-end">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+</div>
+  <!-- Tooltip with right-end placement and skidding -->
+  <div class="demo">
+    <h2>Right-End Placement with Skidding</h2>
+    <nile-tooltip content="Tooltip right-end with skidding" placement="right-end" skidding="80">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <!-- Tooltip with increased distance -->
+  <div class="demo">
+    <h2>Increased Distance (20px)</h2>
+    <nile-tooltip content="Tooltip with 20px distance" distance="20">
+      <button>Hover over me</button>
+    </nile-tooltip>
+  </div>
+  <!-- Tooltip triggered by click -->
+  <div class="demo">
+    <h2>Click Trigger</h2>
+    <nile-tooltip content="Tooltip triggered by click" placement="left" trigger="click">
+      <nile-button>Click me</nile-button>
+    </nile-tooltip>
+  </div>
+  <!-- Tooltip that is open by default -->
+  <div class="demo">
+    <h2>Open by Default</h2>
+    <nile-tooltip content="Tooltip open by default of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)." open>
+      <button>Tooltip is open</button>
+    </nile-tooltip>
+  </div>
+  <!-- Disabled tooltip (should not show) -->
+  <div class="demo">
+    <h2>Disabled Tooltip</h2>
+    <nile-tooltip content="This tooltip should not appear " disabled>
+      <button>Hover over me (disabled)</button>
+    </nile-tooltip>
+  </div>
+  <!-- Hoisted tooltip inside an overflow container -->
+  <div class="demo">
+    <h2>Hoisted Tooltip (within overflow container)</h2>
+    <div class="overflow-container">
+      <nile-tooltip content="This tooltip is hoisted" placement="top" hoist>
+        <button>Hover over me</button>
+      </nile-tooltip>
     </div>
+  </div>
+  <div class="test-container">
+    <h2> Tooltip with Slot</h2>
+    <nile-tooltip content="Skidded tooltip" placement="bottom">
+      <div slot="content">
+        <h1> Hi</h1>
+      </div>
+      <button>Hover me</button>
+    </nile-tooltip>
+  </div>
 </body>
 </html>

package/demo/variables.css CHANGED Viewed

@@ -104,6 +104,9 @@
   --nile-stepper-color-bulletin-outer-default: #fff0;
   --nile-stepper-color-bulletin-inner-selected: #fff0;
   --nile-stepper-color-bulletin-inner-default: var(--nile-colors-neutral-500);
+  --nile-spacing-xxs: 2px; /* 0.5 (2px) */
+  --nile-spacing-xs: 4px; /* 1 (4px) */
+  --nile-spacing-xl: 16px; /* 4 (16px) */
   --nile-spacing-spacing-xxs: 2px; /* 0.5 (2px) */
   --nile-spacing-spacing-xs: 4px; /* 1 (4px) */
   --nile-spacing-spacing-xl: 16px; /* 4 (16px) */
@@ -121,12 +124,26 @@
   --nile-spacing-spacing-2xl: 20px; /* 5 (20px) */
   --nile-spacing-spacing-11xl: 160px; /* 40 (160px) */
   --nile-spacing-spacing-10xl: 128px; /* 32 (128px) */
+  --nile-spacing-sm: 6px; /* 1.5 (6px) */
   --nile-spacing-one-half-x: 3px; /* xxs */
+  --nile-spacing-none: 0px; /* none */
+  --nile-spacing-md: 8px; /* 2 (8px) */
+  --nile-spacing-lg: 12px; /* 3 (12px) */
   --nile-spacing-gutter: var(--nile-spacing-3-x); /* 48px */
+  --nile-spacing-9xl: 96px; /* 24 (96px) */
+  --nile-spacing-8xl: 80px; /* 20 (80px) */
+  --nile-spacing-7xl: 64px; /* 16 (64px) */
   --nile-spacing-7-x: 96px; /* xl */
+  --nile-spacing-6xl: 48px; /* 12 (48px) */
+  --nile-spacing-5xl: 40px; /* 10 (40px) */
   --nile-spacing-5-x: 48px; /* l */
+  --nile-spacing-4xl: 32px; /* 8 (32px) */
+  --nile-spacing-3xl: 24px; /* 6 (24px) */
   --nile-spacing-3-x: 24px; /* m */
+  --nile-spacing-2xl: 20px; /* 5 (20px) */
   --nile-spacing-2-x: 12px; /* s */
+  --nile-spacing-11xl: 160px; /* 40 (160px) */
+  --nile-spacing-10xl: 128px; /* 32 (128px) */
   --nile-spacing-1-x: 6px; /* xs */
   --nile-slide-toggle-color-indicator: var(--nile-colors-white-base);
   --nile-slide-toggle-color-background-inactive: var(--nile-colors-neutral-500);

package/demo/variables_v2.css CHANGED Viewed

@@ -104,6 +104,9 @@
   --nile-stepper-color-bulletin-outer-default: #fff0;
   --nile-stepper-color-bulletin-inner-selected: #fff0;
   --nile-stepper-color-bulletin-inner-default: #D0D5DD;
+  --nile-spacing-xxs: 2px; /* 0.5 (2px) */
+  --nile-spacing-xs: 4px; /* 1 (4px) */
+  --nile-spacing-xl: 16px; /* 4 (16px) */
   --nile-spacing-spacing-xxs: 2px; /* 0.5 (2px) */
   --nile-spacing-spacing-xs: 4px; /* 1 (4px) */
   --nile-spacing-spacing-xl: 16px; /* 4 (16px) */
@@ -121,12 +124,26 @@
   --nile-spacing-spacing-2xl: 20px; /* 5 (20px) */
   --nile-spacing-spacing-11xl: 160px; /* 40 (160px) */
   --nile-spacing-spacing-10xl: 128px; /* 32 (128px) */
+  --nile-spacing-sm: 6px; /* 1.5 (6px) */
   --nile-spacing-one-half-x: 3px; /* xxs */
+  --nile-spacing-none: 0px; /* none */
+  --nile-spacing-md: 8px; /* 2 (8px) */
+  --nile-spacing-lg: 12px; /* 3 (12px) */
   --nile-spacing-gutter: var(--nile-spacing-3-x); /* 48px */
+  --nile-spacing-9xl: 96px; /* 24 (96px) */
+  --nile-spacing-8xl: 80px; /* 20 (80px) */
+  --nile-spacing-7xl: 64px; /* 16 (64px) */
   --nile-spacing-7-x: 96px; /* xl */
+  --nile-spacing-6xl: 48px; /* 12 (48px) */
+  --nile-spacing-5xl: 40px; /* 10 (40px) */
   --nile-spacing-5-x: 48px; /* l */
+  --nile-spacing-4xl: 32px; /* 8 (32px) */
+  --nile-spacing-3xl: 24px; /* 6 (24px) */
   --nile-spacing-3-x: 24px; /* m */
+  --nile-spacing-2xl: 20px; /* 5 (20px) */
   --nile-spacing-2-x: 12px; /* s */
+  --nile-spacing-11xl: 160px; /* 40 (160px) */
+  --nile-spacing-10xl: 128px; /* 32 (128px) */
   --nile-spacing-1-x: 6px; /* xs */
   --nile-slide-toggle-color-indicator: #FFFFFF;
   --nile-slide-toggle-color-background-inactive: #F2F4F7;