fix(gv-modal): remove red color of close icon

BREAKING CHANGE: use naming convention for var css, read the component documentation for new names
gravitee-io · Mar 16, 2021 · ebde976 · ebde976
1 parent 909fa76
commit ebde976
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 39 deletions.
diff --git a/docs/components.md b/docs/components.md
@@ -0,0 +1,28 @@
+# Components
+
+Each components can use `var() - CSS` for customisation.
+
+## How to add an CSS variable ?
+
+1. Add a new line in component documentation (ex: `@cssprop {Length} [--gv-modal--w=280px] - model width`) to declare 
+the CSS variable. Be careful with the {Type} and use the naming convention. 
+2. Use the custom property in own css code.
+3. **ONLY** if you want that's the component to be customizable on the portal, you **MUST** add `@theme facet` in "details" section of component documentation.  
+4. Run `npm run generate:theme` to check the variable syntax and rebuild `definition.json` defining the default portal's theme.
+
+### Types 
+
+Here are the types available for CSS variables :
+
+- Length (size in px...)
+- Color
+- String
+
+### Naming convention
+
+A CSS variable should have this format `--{component-name}-{?optionnal-explicit-selector}--{css-property}` 
+and must only contain lowercase alpha and dash characters. 
+The `css-property` part should have the *EMMET CHEAT SHEAT CSS* syntax.
+
+
+
diff --git a/src/molecules/gv-modal.js b/src/molecules/gv-modal.js
@@ -22,24 +22,21 @@ import { dispatchCustomEvent } from '../lib/events';
  *
  * @fires gv-modal:closed - Event fired when modal is closed.
  *
- * @cssprop {Length} [--gv-modal-animation-duration=0.3s ] - Duration of the animation
- * @cssprop {Length} [--gv-modal-z-index=100 ] - z-index for modal
- * @cssprop {Color} [--gv-modal-bgc=rgba(30, 30, 30, 0.6) ] - Modal background color
- * @cssprop {Length} [--gv-modal-content-z-index=101 ] - z-index for modal content
- * @cssprop {Length} [--gv-modal-width=280px ] - model width
- * @cssprop {Length} [--gv-modal-min-width=250px ] - modal min-width
- * @cssprop {Length} [--gv-modal-max-width=100vw ] - modal max-width
- * @cssprop {Length} [--gv-modal-height=auto ] - modal height
- * @cssprop {Length} [--gv-modal-min-height=auto ] - modal min height
- * @cssprop {Length} [--gv-modal-max-height=100vh ] - modal max height
- * @cssprop {Color} [--gv-modal-content-bgc=var(--gv-theme-neutral-color-light, #efefef) ] - Modal content background color
- * @cssprop {Length} [--gv-modal-content-shadow-displacement=0px ] - Modal shadow displacement
- * @cssprop {Length} [--gv-modal-content-shadow-blur=16px ] - Modal shadow blur
- * @cssprop {Color} [--gv-modal-content-shadow-color=#383e3f ] - Modal shadow color
- * @cssprop {Length} [--gv-modal-border-radius=4px ] - Modal border radius
- * @cssprop {Length} [--gv-modal-content-padding=1em ] - Modal content padding
- * @cssprop {Length} [--gv-modal-close-icon-s=24px ] - Modal close icon size
- * @cssprop {Color} [--gv-modal-close-icon-c=red ] - Modal close icon size
+ * @cssprop {Length} [--gv-modal--anim-duration=0.3s] - Duration of the animation
+ * @cssprop {Length} [--gv-modal--z=100] - z-index for modal
+ * @cssprop {Color} [--gv-modal--bgc=rgba(30, 30, 30, 0.6)] - Modal background color
+ * @cssprop {Length} [--gv-modal-content--z=101] - z-index for modal content
+ * @cssprop {Length} [--gv-modal--w=280px] - model width
+ * @cssprop {Length} [--gv-modal--miw=250px] - modal min-width
+ * @cssprop {Length} [--gv-modal--maw=100vw] - modal max-width
+ * @cssprop {Length} [--gv-modal--h=auto] - modal height
+ * @cssprop {Length} [--gv-modal--mih=auto] - modal min height
+ * @cssprop {Length} [--gv-modal--mah=100vh] - modal max height
+ * @cssprop {Color} [--gv-modal-content--bgc=var(--gv-theme-neutral-color-light, #efefef)] - Modal content background color
+ * @cssprop {String} [--gv-modal--bxsh=0px 0px 16px #383e3f] - Modal box shadow
+ * @cssprop {Length} [--gv-modal--bdrs=4px] - Modal border radius
+ * @cssprop {Length} [--gv-modal--p=1em] - Modal content padding
+ * @cssprop {Length} [--gv-modal-close-icon--s=24px] - Modal close icon size
  */
 export class GvModal extends LitElement {
   static get properties() {
@@ -91,28 +88,27 @@ export class GvModal extends LitElement {
           height: 100vh;
           width: 100vw;
           display: none;
-          transition: opacity var(--gv-modal-animation-duration, 0.3s) ease-in;
-          -webkit-transition: opacity var(--gv-modal-animation-duration, 0.3s) ease-in;
+          transition: opacity var(--gv-modal--anim-duration, 0.3s) ease-in;
+          -webkit-transition: opacity var(--gv-modal--anim-duration, 0.3s) ease-in;
           align-items: center;
           justify-content: center;
-          z-index: var(--gv-modal-z-index, 100);
-          background-color: var(--gv-modal-bgc, rgba(30, 30, 30, 0.6));
+          z-index: var(--gv-modal--z, 100);
+          background-color: var(--gv-modal--bgc, rgba(30, 30, 30, 0.6));
         }
         .content {
           display: block;
           position: relative;
-          z-index: var(--gv-modal-content-z-index, 101);
-          width: var(--gv-modal-width, 280px);
-          min-width: var(--gv-modal-min-width, 250px);
-          max-width: var(--gv-modal-max-width, 100vw);
-          height: var(--gv-modal-height, auto);
-          min-height: var(--gv-modal-min-height, auto);
-          max-height: var(--gv-modal-max-height, 100vh);
-          background-color: var(--gv-modal-content-bgc, var(--gv-theme-neutral-color-light, #efefef));
-          box-shadow: var(--gv-modal-content-shadow-displacement, 0px) var(--gv-modal-content-shadow-displacement, 0px)
-            var(--gv-modal-content-shadow-blur, 16px) var(--gv-modal-content-shadow-color, #383e3f);
-          border-radius: var(--gv-modal-border-radius, 4px);
-          padding: var(--gv-modal-content-padding, 1em);
+          z-index: var(--gv-modal-content--z, 101);
+          width: var(--gv-modal--w, 280px);
+          min-width: var(--gv-modal--miw, 250px);
+          max-width: var(--gv-modal--maw, 100vw);
+          height: var(--gv-modal--h, auto);
+          min-height: var(--gv-modal--mih, auto);
+          max-height: var(--gv-modal--mah, 100vh);
+          background-color: var(--gv-modal-content--bgc, var(--gv-theme-neutral-color-light, #efefef));
+          box-shadow: var(--gv-modal--bxsh, 0px 0px 16px #383e3f);
+          border-radius: var(--gv-modal--bdrs, 4px);
+          padding: var(--gv-modal--p, 1em);
         }
         article {
           overflow: auto;
@@ -141,9 +137,7 @@ export class GvModal extends LitElement {
           font-size: large;
         }
         gv-icon {
-          --gv-icon--s: var(--gv-modal-close-icon-s, 24px);
-          --gv-icon--c: var(--gv-modal-close-icon-c, red);
-
+          --gv-icon--s: var(--gv-modal-close-icon--s, 24px);
           display: inline-block;
           z-index: 1002;
           cursor: pointer;

diff --git a/stories/molecules/gv-modal.stories.js b/stories/molecules/gv-modal.stories.js
@@ -44,7 +44,7 @@ const conf = {
     }
 
     gv-modal {
-      --gv-modal-width: 600px;
+      --gv-modal--w: 600px;
     }
   `,
 };

diff --git a/stories/welcome/documentation.stories.js b/stories/welcome/documentation.stories.js
@@ -18,6 +18,7 @@ import { setAsciiDoctorAsGlobal, toDom } from '../../src/lib/text-format';
 import Readme from '../../README.adoc';
 import Contributing from '../../CONTRIBUTING.adoc';
 import Icons from '../../docs/icons.md';
+import Components from '../../docs/components.md';
 import { Parser as HtmlToReactParser } from 'html-to-react';
 import asciidoctor from 'asciidoctor';
 import highlightJsExt from 'asciidoctor-highlight.js';
@@ -49,6 +50,7 @@ export function createDocsStories(kind, stories) {
 createDocsStories('Documentation', [
   { name: ' Welcome', text: Readme, type: 'adoc' },
   { name: 'Contributing', text: Contributing, type: 'adoc' },
-  { name: 'Theme/Icons', text: Icons },
+  { name: `How To's ?/Components`, text: Components },
+  { name: `How To's ?/Icons`, text: Icons },
   // { name: 'Theme/LearnMore', text: Theme },
 ]);
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,7 +44,7 @@ const conf = { @@
         }
         gv-modal {
-          --gv-modal-width: 600px;
+          --gv-modal--w: 600px;
         }
       `,
     };
@@ Expand Down @@