diff --git a/CHANGELOG.md b/CHANGELOG.md index 291a294c1..e0f198555 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,23 @@ +## [1.33.2](https://github.com/mParticle/aquarium/compare/v1.33.1...v1.33.2) (2024-10-18) + +### Bug Fixes + +- Design tokens update + icons alignment fix ([#460](https://github.com/mParticle/aquarium/issues/460)) ([9c93165](https://github.com/mParticle/aquarium/commit/9c931656b7ef4133f3225bdf1924741d9058df93)) +- ensure PostCSS handles CSS unnesting in Vite config ([#457](https://github.com/mParticle/aquarium/issues/457)) ([1978e65](https://github.com/mParticle/aquarium/commit/1978e657bec3a360be45ea4f8a4a52653cd79640)) + +## [1.33.2-fix-design-tokens-fix.2](https://github.com/mParticle/aquarium/compare/v1.33.2-fix-design-tokens-fix.1...v1.33.2-fix-design-tokens-fix.2) (2024-10-17) + +### Bug Fixes + +- (styles) override lineheight on icons ([015268f](https://github.com/mParticle/aquarium/commit/015268ffb2d631825561ec7f31af5524a2db7a36)) + +## [1.33.2-fix-design-tokens-fix.1](https://github.com/mParticle/aquarium/compare/v1.33.1...v1.33.2-fix-design-tokens-fix.1) (2024-10-17) + +### Bug Fixes + +- (styles) remove shadow of the buttons and update suite selector hover color ([7502b54](https://github.com/mParticle/aquarium/commit/7502b54a03128be280cd5942cc54e6a795c88442)) +- ensure PostCSS handles CSS unnesting in Vite config ([#457](https://github.com/mParticle/aquarium/issues/457)) ([1978e65](https://github.com/mParticle/aquarium/commit/1978e657bec3a360be45ea4f8a4a52653cd79640)) + ## [1.33.2-fix-unnested-css.1](https://github.com/mParticle/aquarium/compare/v1.33.1...v1.33.2-fix-unnested-css.1) (2024-10-15) ### Bug Fixes diff --git a/design/LightTheme.ts b/design/LightTheme.ts index 8fbbe41f4..f4add5d55 100644 --- a/design/LightTheme.ts +++ b/design/LightTheme.ts @@ -108,9 +108,6 @@ export const LightTheme: IMpThemeConfig = { }, Button: { borderColorDisabled: '#dcdcd8', - primaryShadow: '0 2px 0 rgba(44, 0, 170, 0.4)', - defaultShadow: '0 2px 0 rgba(44, 0, 170, 0.2)', - dangerShadow: '0 2px 0 rgba(44, 0, 170, 0.3)', }, Input: { activeShadow: '0 0 0 2px rgba(54, 0, 209, 0.1)', diff --git a/design/MpThemeConfig.d.ts b/design/MpThemeConfig.d.ts index 5253634c9..e2ff07e03 100644 --- a/design/MpThemeConfig.d.ts +++ b/design/MpThemeConfig.d.ts @@ -70,9 +70,6 @@ export type IMpThemeConfig = ThemeConfig & { } Button: { borderColorDisabled: string - primaryShadow: string - defaultShadow: string - dangerShadow: string } Input: { activeShadow: string diff --git a/docs/Foundations/Errors.mdx b/docs/Design Templates/TBD/Errors.mdx similarity index 100% rename from docs/Foundations/Errors.mdx rename to docs/Design Templates/TBD/Errors.mdx diff --git a/docs/Foundations/Loading.mdx b/docs/Design Templates/TBD/Loading.mdx similarity index 100% rename from docs/Foundations/Loading.mdx rename to docs/Design Templates/TBD/Loading.mdx diff --git a/docs/Foundations/Icons.mdx b/docs/Foundations/Icons.mdx deleted file mode 100644 index fe4438d4f..000000000 --- a/docs/Foundations/Icons.mdx +++ /dev/null @@ -1,92 +0,0 @@ -## Icons -### Table of Contents -1. [Overview](#overview) -2. [Naming Principles](#naming-principles) -3. [Adding and Updating Icons](#adding-and-updating-icons) -4. [The `IconTable` Component](#the-icontable-component) -5. [Using the `SVGPrettifier` Tool](#using-the-svgprettifier-tool) -6. [Starting the Server](#starting-the-server) -7. [Related Links](#related-links) -8. [FAQ](#faq) - ---- - - -### Overview - -mParticle icon library is mP icons, a carefully curated collection based on [FontAwesome](https://fontawesome.com/search?o=r&s=light). Our design team has selected icons specifically for mParticle use cases, defined the semantic layer, and applied customizations as needed. - -### Naming Principles - -Names should be semantic, describing the pattern rather than the shape. For instance, "mp_act_lt_delete" describes an action icon in light style for deletion. Even though it may look like a "trash" icon, the name reflects the specific action (delete) rather than the object (trash). Multiple icons may have the same shape but different names based on semantic meaning. - -- Prefix: "mp" -- Category (abbreviated): - - act (UI Actions) - - info (Informational) - - pm (Product Model) - - [Other categories as needed] -- Style (abbreviated): - - lt (Light) - - dt (Duotone) - - Other styles as needed -- Semantic description - - -### Adding and Updating Icons - -The Design team provides SVG files with the final icon names. These SVG files must be minified and follow the project's styling guidelines. You can prettify them using the SVGPrettifier tool, which ensures the correct size and properties are applied to the SVG. - -### Steps to Add a New Icon: - -1. **Prettify the SVG**: - Use the SVGPrettifier Story to clean up the SVG file and ensure it meets the necessary formatting standards (size, properties, etc.). - -2. **Update the Icon Type**: - Add the new icon name to the TypeScript type definition in the [src/types/icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/types/icons.ts) file. - -3. **Update Icon Components**: - Add the icon components in the [src/components/icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/components/icons/index.ts) directory, where all icon components are stored. - -4. **Update the Icons Object**: - Ensure the new icons are included in the Icons object located in [src/constants/Icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/constants/Icons.ts). This object is used across the project to reference all available icons. - -### The IconTable Component - -The IconTable component is used to display a table of all available icons in the project. - -### Using the SVGPrettifier Tool - -The [SVGPrettifier](https://mparticle.github.io/aquarium/?path=/docs/components-other-svgprettifier--documentation) component is used to upload and prettify SVG files. Each SVG must follow the project's styling guidelines and have a unique name to avoid overwriting existing icons. - -### Starting the Server - -To process the uploaded SVGs with the SVGPrettifier, a server must be running locally. Follow these steps to start the server: - -1. Navigate to the root of the project directory. -2. Run the following command to start the server: - - -bash - npm run icons-prettifier - - -### Related Links - -| Type | Resource| -| -------- | ------- | -| Eames | [Figma Icon library](https://www.figma.com/design/3j5Nb0oOSkF3DW3URS8yex/mParticle-Icons-1.0.0?node-id=2055-9952&t=K7xlZo0hE2tn2y54-0) | -|Eames| [Icon Guidelines for designers](https://mparticle.atlassian.net/wiki/spaces/DMP/pages/3988914258/Icons) | -| Eames | [Fontawesome Library](https://fontawesome.com/search?o=r&s=ligh) | - - -### FAQ - -**Q:** What if an icon in Figma has a FontAwesome name or doesn't follow the standard naming format? Should I name it myself? -**A:** Please contact the design team. They'll provide the correct name and make sure the icon is properly reflected in the design library. - -**Q:** When do we use mParticle custom icons instead of default Ant Design (AntD) icons? -**A:** In our design system Eames, Ant Design (AntD) icons are the primary choice across components. However, custom mParticle icons are used in the following scenarios: -- When the design team explicitly requests a customized icon. -- When the AntD library does not offer a suitable icon for a specific use case. -- When an existing AntD icon does not align with mParticle’s design or functional requirements. diff --git a/docs/Foundations/Icons/How to use.mdx b/docs/Foundations/Icons/How to use.mdx new file mode 100644 index 000000000..c73187973 --- /dev/null +++ b/docs/Foundations/Icons/How to use.mdx @@ -0,0 +1,63 @@ +# How to use Icons + +
+ +## Adding and Updating Icons + +The Design team provides SVG files with the final icon names. These SVG files must be minified and follow the project's styling guidelines. You can prettify them using the SVGPrettifier tool, which ensures the correct size and properties are applied to the SVG. + + +### Steps to Add a New Icon: + +1. **Ensure name of icon follows the desired principles**: +
+ Here's the naming principles all icons should follow + + Names should be semantic, describing the pattern rather than the shape. For instance, "mp_act_lt_delete" describes an action icon in light style for deletion. Even though it may look like a "trash" icon, the name reflects the specific action (delete) rather than the object (trash). Multiple icons may have the same shape but different names based on semantic meaning. + + - Prefix: "mp" + - Category (abbreviated): + - act (UI Actions) + - info (Informational) + - pm (Product Model) + - [Other categories as needed] + - Style (abbreviated): + - lt (Light) + - dt (Duotone) + - Other styles as needed + - Semantic description +
+ +2. **Ensure the icon svg structure is correct by using the Prettify tool**: +Use the [SVGPrettifier Story](?path=/docs/components-other-svgprettifier--documentation) to clean up the SVG file and ensure it meets the necessary formatting standards (size, properties, etc). +The [SVGPrettifier](https://mparticle.github.io/aquarium/?path=/docs/components-other-svgprettifier--documentation) component is used to upload and prettify SVG files. Each SVG must follow the project's styling guidelines and have a unique name to avoid overwriting existing icons. + +3. **Update the Icon Type**: +Add the new icon name to the TypeScript type definition in the [src/types/icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/types/icons.ts) file. + +4. **Update Icon Components**: +Add the icon components in the [src/components/icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/components/icons/index.ts) directory, where all icon components are stored. + +5. **Update the Icons Object**: +Ensure the new icons are included in the Icons object located in [src/constants/Icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/constants/Icons.ts). This object is used across the project to reference all available icons. + + +### Related Links + +| Type | Resource| +| -------- | ------- | +| Eames | [Figma Icon library](https://www.figma.com/design/3j5Nb0oOSkF3DW3URS8yex/mParticle-Icons-1.0.0?node-id=2055-9952&t=K7xlZo0hE2tn2y54-0) | +|Eames| [Icon Guidelines for designers](https://mparticle.atlassian.net/wiki/spaces/DMP/pages/3988914258/Icons) | +| Eames | [Fontawesome Library](https://fontawesome.com/search?o=r&s=ligh) | + + +### FAQ + +**Q:** What if an icon in Figma has a FontAwesome name or doesn't follow the standard naming format? Should I name it myself? +**A:** Please contact the design team. They'll provide the correct name and make sure the icon is properly reflected in the design library. + +**Q:** When do we use mParticle custom icons instead of default Ant Design (AntD) icons? +**A:** In our design system Eames, Ant Design (AntD) icons are the primary choice across components. However, custom mParticle icons are used in the following scenarios: +- When the design team explicitly requests a customized icon. +- When the AntD library does not offer a suitable icon for a specific use case. +- When an existing AntD icon does not align with mParticle’s design or functional requirements. diff --git a/docs/Foundations/Icons/Icon Library.mdx b/docs/Foundations/Icons/Icon Library.mdx new file mode 100644 index 000000000..1b46bdb7d --- /dev/null +++ b/docs/Foundations/Icons/Icon Library.mdx @@ -0,0 +1,13 @@ +import { Story } from '@storybook/blocks'; + +import * as IconStories from '../../../src/components/general/Icon/Icon.stories'; + +# Icons + +### Overview + +mParticle icon library is mP icons, a carefully curated collection based on [FontAwesome](https://fontawesome.com/search?o=r&s=light). Our design team has selected icons specifically for mParticle use cases, defined the semantic layer, and applied customizations as needed. + +### Available Icons + + \ No newline at end of file diff --git a/docs/UX Patterns/Directory.mdx b/docs/UX Patterns/Directory.mdx new file mode 100644 index 000000000..db9c21e0f --- /dev/null +++ b/docs/UX Patterns/Directory.mdx @@ -0,0 +1,3 @@ +# Directory + +TBD \ No newline at end of file diff --git a/docs/UX Patterns/Table/Documentation.mdx b/docs/UX Patterns/Table/Documentation.mdx new file mode 100644 index 000000000..bf8c4ec9a --- /dev/null +++ b/docs/UX Patterns/Table/Documentation.mdx @@ -0,0 +1,53 @@ +import { Meta, Story } from '@storybook/blocks'; + +{/* // import * as TableStories from './Table.stories'; */} + +{/* */} + +{/* */} + +# Table + +#### Overview +Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. + +#### Basic Table + +##### Header +A typical table header contains column titles that describe the data in each column. It includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. + +##### Pagination +Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. + +##### Cell Types +Table cells support various formats and are designed to display data in clear, readable ways. +- Numbers (Coming Soon) +- Date / Time (Coming Soon) +- CTA Buttons (Coming Soon) +- Status Badges (Coming Soon) +- Links (Coming Soon) +- Tags (Coming Soon) +- More Actions (Coming Soon) + +[View Example](#link) + +#### Tables with Filters +Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including: + +- [Search](#link-to-search) +- [Date Range filters](#link-to-daterange) +- [Basic Filters](#link-to-basic-filters) +- [Filters with an Apply button](#link-to-apply-button-filters) + + + +#### Related Links +| Type | Resource | +| ------ | -------- | +| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) | + + + +#### Example basic table image (To be changed) + + diff --git a/package-lock.json b/package-lock.json index 2cc6d48f7..b0435b1e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@mparticle/aquarium", - "version": "1.33.2-fix-unnested-css.1", + "version": "1.33.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@mparticle/aquarium", - "version": "1.33.2-fix-unnested-css.1", + "version": "1.33.2", "license": "Apache-2.0", "dependencies": { "lodash.clonedeep": "4.5.0" @@ -10773,9 +10773,9 @@ } }, "node_modules/body-parser": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", - "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", + "version": "1.20.3", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", + "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", "dev": true, "dependencies": { "bytes": "3.1.2", @@ -10786,7 +10786,7 @@ "http-errors": "2.0.0", "iconv-lite": "0.4.24", "on-finished": "2.4.1", - "qs": "6.11.0", + "qs": "6.13.0", "raw-body": "2.5.2", "type-is": "~1.6.18", "unpipe": "1.0.0" @@ -10811,21 +10811,6 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, - "node_modules/body-parser/node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", - "dev": true, - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/bottleneck": { "version": "2.19.5", "resolved": "https://registry.npmjs.org/bottleneck/-/bottleneck-2.19.5.tgz", @@ -12199,9 +12184,9 @@ "dev": true }, "node_modules/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", + "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", "dev": true, "engines": { "node": ">= 0.6" @@ -13910,9 +13895,9 @@ "peer": true }, "node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", "dev": true, "engines": { "node": ">= 0.8" @@ -15321,37 +15306,37 @@ "dev": true }, "node_modules/express": { - "version": "4.19.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", - "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", + "version": "4.21.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", + "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", "dev": true, "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.2", + "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.6.0", + "cookie": "0.7.1", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.2.0", + "finalhandler": "1.3.1", "fresh": "0.5.2", "http-errors": "2.0.0", - "merge-descriptors": "1.0.1", + "merge-descriptors": "1.0.3", "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.7", + "path-to-regexp": "0.1.10", "proxy-addr": "~2.0.7", - "qs": "6.11.0", + "qs": "6.13.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "0.18.0", - "serve-static": "1.15.0", + "send": "0.19.0", + "serve-static": "1.16.2", "setprototypeof": "1.2.0", "statuses": "2.0.1", "type-is": "~1.6.18", @@ -15377,21 +15362,6 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, - "node_modules/express/node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", - "dev": true, - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", @@ -15662,13 +15632,13 @@ } }, "node_modules/finalhandler": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", - "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", + "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", "dev": true, "dependencies": { "debug": "2.6.9", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "on-finished": "2.4.1", "parseurl": "~1.3.3", @@ -24282,10 +24252,13 @@ "dev": true }, "node_modules/merge-descriptors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==", - "dev": true + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", + "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } }, "node_modules/merge-stream": { "version": "2.0.0", @@ -25930,12 +25903,12 @@ "optional": true }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { @@ -30233,9 +30206,9 @@ } }, "node_modules/path-to-regexp": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==", + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", + "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", "dev": true }, "node_modules/path-type": { @@ -30957,12 +30930,12 @@ ] }, "node_modules/qs": { - "version": "6.11.2", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz", - "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==", + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", "dev": true, "dependencies": { - "side-channel": "^1.0.4" + "side-channel": "^1.0.6" }, "engines": { "node": ">=0.6" @@ -33943,9 +33916,9 @@ } }, "node_modules/send": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", - "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", + "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", "dev": true, "dependencies": { "debug": "2.6.9", @@ -33981,16 +33954,25 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, + "node_modules/send/node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/serve-static": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", - "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", + "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", "dev": true, "dependencies": { - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "0.18.0" + "send": "0.19.0" }, "engines": { "node": ">= 0.8.0" @@ -34159,12 +34141,12 @@ } }, "node_modules/side-channel": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz", - "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz", + "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==", "dev": true, "dependencies": { - "call-bind": "^1.0.6", + "call-bind": "^1.0.7", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.4", "object-inspect": "^1.13.1" diff --git a/package.json b/package.json index 182466546..0335cddf0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mparticle/aquarium", - "version": "1.33.2-fix-unnested-css.1", + "version": "1.33.2", "description": "mParticle Component Library", "license": "Apache-2.0", "keywords": [ diff --git a/src/components/general/Button/Button.tsx b/src/components/general/Button/Button.tsx index 64040333f..12bd359da 100644 --- a/src/components/general/Button/Button.tsx +++ b/src/components/general/Button/Button.tsx @@ -5,6 +5,7 @@ import { Icon } from 'src/components' import type { IIconProps } from 'src/components' import { ConfigProvider } from 'src/components/other/ConfigProvider/ConfigProvider' import { type ReactNode } from 'react' +import './button.css' export interface IButtonProps extends Omit { /** diff --git a/src/components/general/Button/button.css b/src/components/general/Button/button.css new file mode 100644 index 000000000..cdfd1ecfb --- /dev/null +++ b/src/components/general/Button/button.css @@ -0,0 +1,3 @@ +.ant-btn .ant-btn-icon { + line-height: 0 !important; +} \ No newline at end of file diff --git a/src/components/general/Icon/icon.css b/src/components/general/Icon/icon.css index 8bf83b32e..e1af0ea82 100644 --- a/src/components/general/Icon/icon.css +++ b/src/components/general/Icon/icon.css @@ -1,3 +1,7 @@ +.anticon >* { + line-height: 0 !important; +} + .icon-size-xxxxl { width: var(--mp-icon-size-xxxxl); min-width: var(--mp-icon-size-xxxxl); diff --git a/src/components/navigation/GlobalNavigation/SuiteSelector/suite-selector.css b/src/components/navigation/GlobalNavigation/SuiteSelector/suite-selector.css index 8c4cb10e6..eb34a7659 100644 --- a/src/components/navigation/GlobalNavigation/SuiteSelector/suite-selector.css +++ b/src/components/navigation/GlobalNavigation/SuiteSelector/suite-selector.css @@ -18,7 +18,7 @@ } .suiteSelector__link:not(.suiteSelector__link--active, .suiteSelector__link--disabled):hover .suiteSelector__suiteLogo { - background-color: var(--control-item-bg-hover); + background-color: var(--color-white); } .suiteSelector__link.suiteSelector__link--active { diff --git a/src/components/navigation/GlobalNavigation/global-navigation.css b/src/components/navigation/GlobalNavigation/global-navigation.css index 82cb41228..d84de7dc4 100644 --- a/src/components/navigation/GlobalNavigation/global-navigation.css +++ b/src/components/navigation/GlobalNavigation/global-navigation.css @@ -360,4 +360,8 @@ .notificationCenter__header { padding: var(--padding-content-vertical-lg) var(--padding-content-horizontal-lg); border-bottom: 1px solid var(--color-border-secondary); +} + +.ant-menu .ant-menu-submenu-title .ant-menu-item-icon svg { + line-height: 0 !important; } \ No newline at end of file