tide-design-system 2.2.5 → 2.2.7

package/src/assets/css/utilities.css

@@ -40,6 +40,7 @@
 .tide-axis1-between {justify-content: space-between;}
 .tide-axis1-center  {justify-content: center;}
 .tide-axis1-end     {justify-content: end;}
+.tide-axis1-start   {justify-content: start;}
 
 .tide-axis2-around  {align-items: space-around;}
 .tide-axis2-center  {align-items: center;}
@@ -68,6 +69,7 @@
 .tide-margin-1    {margin: var(--tide-spacing-1);}
 .tide-margin-2    {margin: var(--tide-spacing-2);}
 .tide-margin-4    {margin: var(--tide-spacing-4);}
+.tide-margin-auto {margin: auto;}
 
 .tide-margin-x-0    {margin-left: 0;                        margin-right: 0;}
 .tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
@@ -83,7 +85,7 @@
 .tide-margin-y-1    {margin-top: var(--tide-spacing-1);    margin-bottom: var(--tide-spacing-1);}
 .tide-margin-y-2    {margin-top: var(--tide-spacing-2);    margin-bottom: var(--tide-spacing-2);}
 .tide-margin-y-4    {margin-top: var(--tide-spacing-4);    margin-bottom: var(--tide-spacing-4);}
-.tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
+.tide-margin-y-auto {margin-top: auto;                     margin-bottom: auto;}
 
 .tide-margin-top-0    {margin-top: 0;}
 .tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -91,7 +93,7 @@
 .tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
 .tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
 .tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
-.tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
+.tide-margin-top-auto {margin-top: auto;}
 
 .tide-margin-right-0    {margin-right: 0;}
 .tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -107,7 +109,7 @@
 .tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
 .tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
 .tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
-.tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
+.tide-margin-bottom-auto {margin-bottom: auto;}
 
 .tide-margin-left-0    {margin-left: 0;}
 .tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
@@ -221,8 +223,6 @@
 .tide-max-height-full {max-height: 100%;}
 .tide-min-height-0    {min-height: 0;}
 
-.tide-width-container {max-width: 1168px;}
-
 .tide-width-auto {width: auto;}
 .tide-width-0    {width: 0;}
 .tide-width-full {width: 100%;}
@@ -231,6 +231,9 @@
 .tide-height-0    {height: 0;}
 .tide-height-full {height: 100%;}
 
+/* Deprecated */
+.tide-width-container {max-width: 1168px;}
+
 /* Background */
 .tide-bg-initial {background-color: initial;}
 
@@ -319,6 +322,7 @@
 
 .tide-isolate {isolation: isolate;}
 
+/* Deprecated */
 .tide-leading-default {line-height: 1.4;}
 .tide-leading-normal  {line-height: normal;}
 

package/src/docs/development.md

@@ -60,13 +60,18 @@
       4. Serve the Sandbox App locally:
 
             `npm run dev`
+
    3. Via NPM Link
+
+        Note: If using Windows Subsystem for Linux (WSL), both the TIDE repository and the consumer repository need to be pulled down into the Linux environment.
+
       1. From the local instance of TIDE repository, create local package alias:
 
             `npm link`
       2. From the local instance of the consumer repository, leverage local package alias:
 
-        `npm link tide-design-system`
+            `npm link tide-design-system`
+
       3. Run the local instance of `tide-design-system`.
       4. Run the local instance of the consumer repository.
       5. Visit the local instance of the consumer repository in the browser as normal. All structures imported from the `tide-design-system` dependency will now reflect the local instance.

package/src/docs/integration-full.md

@@ -1,7 +1,9 @@
 # TIDE Full Integration
 1. Install dependency from NPM registry:
 
-   `npm install tide-design-system`
+   `npm install tide-design-system --save-exact`
+
+   Note: This will install TIDE **without a caret range**, which requires that the dependency be **upgraded manually**, as our [custom semantic versioning](./development.md#publication-tide-tech-lead-only) rules and distribution of QA resources dictate that consumer repositories must thoroughly test for breaking changes during the upgrade process.
 
 2. Use CSS utilities:
    1. Import global utilities:
@@ -22,6 +24,8 @@
 
       `import { CSS } from 'tide-design-system';`
 
+      Note: See the [TypeScript CSS constant](../types/Styles.ts) for full details.
+
    4. Leverage CSS utilities via TypeScript CSS constant:
 
       `<div :class="[CSS.POSITION.ABSOLUTE]" />`

package/src/docs/integration-partial.md

@@ -1,7 +1,9 @@
 # TIDE Partial Integration
 1. Install dependency from NPM registry:
 
-   `npm install tide-design-system`
+   `npm install tide-design-system --save-exact`
+
+   Note: This will install TIDE **without a caret range**, which requires that the dependency be **upgraded manually**, as our [custom semantic versioning](./development.md#publication-tide-tech-lead-only) rules and distribution of QA resources dictate that consumer repositories must thoroughly test for breaking changes during the upgrade process.
 
 2. Use CSS utilities:
    1. Import global utilities one of two ways:
@@ -36,6 +38,8 @@
 
          `<div class="tide-position-absolute" />`
 
+      Note: See the [CSS utilities](../assets/css/utilities.ts) for full details.
+
    4. Leverage responsive CSS utilities:
 
          `<div class="tide-position-relative md-tide-position-absolute" />`

package/src/docs/migration.md

@@ -10,6 +10,14 @@ The first implementation of the TIDE Design System was developed directly within
    4. CSS utilities
    5. Unit tests
 
+## Status
+1. The [legacy code](https://github.com/traderinteractive/marketplace) at the top level of the `marketplace` repository uses a [partial integration](./integration-partial.md) of TIDE, making the CSS utilities available globally.
+   1. Dependency controlled by the top level config: [package.json](https://github.com/traderinteractive/marketplace/blob/qa/package.json). **Version must be upgraded manually.**
+   2. Integration controlled by the [Gulp build](https://github.com/search?q=repo%3Atraderinteractive%2Fmarketplace%20tide%20path%3Agulpfile.js&type=code).
+2. The [redesign code](https://github.com/traderinteractive/marketplace/tree/qa/frontend) within the `/frontend` subdirectory of the `marketplace` repository uses a [full integration](./integration-full.md) of TIDE, making both the CSS utilities and Vue 3 components available for import from any Vue 3 file.
+   1. Dependency controlled by the nested config: [/frontend/package.json](https://github.com/traderinteractive/marketplace/blob/qa/frontend/package.json). **Version must be upgraded manually.**
+   2. Integration controlled by the [Vite build](https://github.com/search?q=repo%3Atraderinteractive%2Fmarketplace%20tide%20path%3Afrontend%2Fvite.config.ts&type=code).
+
 ## Workflow
 As TIDE structures become available in the TIDE repository, the TIDE team will work to identify redundant structures within the `marketplace` repository, create tickets detailing the work to reimplement these structures, and work with the relevant product teams to determine priority and ownership of these tasks.
 
@@ -63,3 +71,4 @@ As TIDE structures become available in the TIDE repository, the TIDE team will w
 
 7.  Delete unused [JS constants](https://github.com/traderinteractive/marketplace/blob/qa/frontend/src/types/Styles.ts) (CSS_OLD)
 8.  Delete unused [CSS utilities](https://github.com/traderinteractive/marketplace/blob/qa/frontend/src/assets/css/utilities.css)
+9.  Run `npm run precommit` from the `/frontend` directory to identify (and potentially autofix) any ESLint, TypeScript, and/or Vitest issues, as the build server will reject any source branch that contains syntax violations or failing unit tests.

package/src/stories/DemoCssUtilities.stories.ts

@@ -1,7 +1,7 @@
 /* eslint vue/sort-keys: 0 */
 
 import Border from '@/stories/FoundationsBorder.stories';
-import Gap from '@/stories/FoundationsGap.stories';
+import Flexbox from '@/stories/FoundationsFlexbox.stories';
 import Margin from '@/stories/FoundationsMargin.stories';
 import Padding from '@/stories/FoundationsPadding.stories';
 import Shadow from '@/stories/FoundationsShadow.stories';
@@ -93,7 +93,7 @@ export default {
   argTypes: {
     ...Border.argTypes,
     ...Shadow.argTypes,
-    ...Gap.argTypes,
+    ...Flexbox.argTypes,
     ...Padding.argTypes,
     children: {
       control: 'text',

package/src/stories/{FoundationsGap.stories.ts → FoundationsFlexbox.stories.ts}

@@ -69,13 +69,13 @@ export default {
   argTypes: {
     flexAxis1: {
       ...formatArgType({ FLEX_AXIS1 }),
-      description: 'Dictates alignment of children along primary axis',
-      name: 'Flex Axis Primary',
+      description: 'Dictates alignment of children along main axis',
+      name: 'Main Axis',
     },
     flexAxis2: {
       ...formatArgType({ FLEX_AXIS2 }),
-      description: 'Dictates alignment of children along secondary axis',
-      name: 'Flex Axis Secondary',
+      description: 'Dictates alignment of children along cross axis',
+      name: 'Cross Axis',
     },
     flexDirection: {
       ...formatArgType({ FLEX_DIRECTION }),
@@ -84,7 +84,7 @@ export default {
     },
     flexGap: {
       ...formatArgType({ GAP }),
-      description: 'Dictates vertical and/or horizontal spacing between elements within a flexbox container',
+      description: 'Dictates spacing between elements along the main axis',
       name: 'Flex Gap',
     },
     flexWrap: {
@@ -103,7 +103,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Utilities/Gap',
+  title: 'Utilities/Flexbox',
 };
 
 export const Default = {};

package/src/types/Styles.ts

@@ -29,6 +29,7 @@ export const CSS = {
     CENTER: 'tide-axis2-center',
     END: 'tide-axis2-end',
     START: 'tide-axis2-start',
+    STRETCH: 'tide-axis2-stretch',
   },
   BG: {
     GLOBAL: {
@@ -240,6 +241,7 @@ export const CSS = {
     ZERO: 'tide-height-0',
     FULL: 'tide-height-full',
     MAX_FULL: 'tide-max-height-full',
+    MIN_ZERO: 'tide-min-height-0',
   },
   ISOLATION: {
     ISOLATE: 'tide-isolate',
@@ -457,6 +459,7 @@ export const CSS = {
     ZERO: 'tide-width-0',
     FULL: 'tide-width-full',
     MAX_FULL: 'tide-max-width-full',
+    MIN_ZERO: 'tide-min-width-0',
   },
   Z_INDEX: {
     INITIAL: 'tide-z-index-initial',

package/src/utilities/viewport.ts

@@ -49,13 +49,14 @@ export const setScrollLock = async (isLocked: boolean) => {
   }
 };
 
-export const TOP_LAYER_ID = 'tideTopLayer';
+export const TOP_LAYER_ID = 'tide-top-layer';
 
 export const initFauxTopLayer = () => {
   let topLayer = document.getElementById(TOP_LAYER_ID);
   if (!topLayer) {
     topLayer = document.createElement('div');
     topLayer.id = TOP_LAYER_ID;
+    topLayer.setAttribute('data-css-scope', '');
     document.body.appendChild(topLayer);
   }
   topLayer.style.isolation = 'isolate';