= ({ name, values, status }) => {
return (
- {labelText}
+ {labelText.toUpperCase()}
);
}, [isEmpty, labelText]);
diff --git a/devtool/src/devtool/pages/Home/style.module.css b/devtool/src/devtool/pages/Home/style.module.css
index acaceb7f..30e7f365 100644
--- a/devtool/src/devtool/pages/Home/style.module.css
+++ b/devtool/src/devtool/pages/Home/style.module.css
@@ -56,15 +56,17 @@
position: absolute;
margin-left: var(--spacings-xxs);
margin-right: var(--spacings-xxs);
- transition: var(--transitions-medium);
+ transition: var(--transitions-none);
}
.valuesContainer:hover, .valuesContainer.comingSoon {
width: fit-content;
+ transition: var(--transitions-medium);
}
.sliceContainer:hover .valueLabel, .valuesContainer.comingSoon .valueLabel {
max-width: 10rem;
opacity: 1;
position: relative;
+ transition: var(--transitions-medium);
}
\ No newline at end of file
diff --git a/docs/docs/Features/web-extension.mdx b/docs/docs/Features/web-extension.mdx
index 74256297..bae0d935 100644
--- a/docs/docs/Features/web-extension.mdx
+++ b/docs/docs/Features/web-extension.mdx
@@ -54,6 +54,54 @@ enableMorfeoDevTool();
morfeo.setTheme('light', myTheme);
```
+## Components customization
+
+:::caution Use it with caution!
+This feature is very helpful to present your components in a nice way but it will change the real component style.
+So, use it consciously.
+:::
+
+Sometimes the style of a component couldn't be enough consistent to present it in a nice way inside the web extension.
+
+```typescript
+const Flex = {
+ tag: 'div',
+ style: {
+ display: 'flex'
+ }
+}
+```
+
+In this case it could be needed to add an additional style, in order to present the component in a better way. You can use the `devtoolConfig` property inside `meta` to define these additional behaviors.
+
+```typescript
+const Flex = {
+ tag: 'div',
+ style: {
+ display: 'flex'
+ },
+ meta: {
+ devtoolConfig: {
+ label: 'Flex Div',
+ style: {
+ size: '100px',
+ bg: 'gray.light'
+ },
+ background: 'white',
+ }
+ }
+}
+```
+
+### devtoolConfig Props
+
+| prop | description | type |
+|-------|-------------|--------|
+| label | the text used as component children in the web extension | `string` |
+| style | the default style of the component in the web extension | `Style` |
+| background | the default background for the card that contains the component | `Color` `Record` (where the string is the theme name) |
+
+
## Contribute
We want to improve the web extension as much as possible and add functionalities, If you want to help us, check our [GitHub](https://github.com/VLK-STUDIO/morfeo)!
diff --git a/docs/src/styles/components/box.ts b/docs/src/styles/components/box.ts
new file mode 100644
index 00000000..b70f9bec
--- /dev/null
+++ b/docs/src/styles/components/box.ts
@@ -0,0 +1,35 @@
+import { ComponentConfig } from '@morfeo/react';
+
+export const Box: ComponentConfig = {
+ tag: 'div',
+ style: {
+ fontFamily: 'regular'
+ },
+ variants: {
+ flexRow: {
+ style: {
+ display: 'flex',
+ flexDirection: 'row'
+ }
+ },
+ flexColumn: {
+ style: {
+ flexDirection: 'column'
+ }
+ }
+ },
+ meta: {
+ description: 'a simple div',
+ devtoolConfig: {
+ background: 'background',
+ style: {
+ width: '80px',
+ height: '80px',
+ backgroundColor: 'gray.lighter',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }
+ }
+ }
+} as ComponentConfig;
diff --git a/docs/src/styles/components/button.ts b/docs/src/styles/components/button.ts
index ceb96298..837daf0a 100644
--- a/docs/src/styles/components/button.ts
+++ b/docs/src/styles/components/button.ts
@@ -19,18 +19,35 @@ export const Button: ComponentConfig = {
},
},
variants: {
- round: {
+ inverted: {
style: {
- corner: 'round',
- px: 'none',
- py: 'none',
- size: 'xxl',
+ bg: 'transparent',
+ border: 'primary',
+ borderColor: 'primary',
+ color: 'textColor',
+ },
+ },
+ disabled: {
+ style: {
+ bg: 'grey.light',
+ color: 'light',
+ pointerEvent: 'none',
+ cursor: 'default',
+ '&:hover': {
+ opacity: 1
+ }
},
},
error: {
style: {
- bg: 'gray.lightest',
- color: 'error',
+ bg: 'error',
+ color: 'white',
+ },
+ },
+ warning: {
+ style: {
+ bg: 'warning',
+ color: 'white',
},
},
success: {
@@ -38,9 +55,42 @@ export const Button: ComponentConfig = {
bg: 'success',
},
},
+ round: {
+ style: {
+ corner: 'round',
+ px: 'none',
+ py: 'none',
+ size: 'xxl',
+ },
+ meta: {
+ devtoolConfig: {
+ label: 'B',
+ },
+ },
+ },
+ 'round.inverted': {
+ style: {
+ bg: 'transparent',
+ border: 'primary',
+ borderColor: 'primary',
+ color: 'textColor',
+ corner: 'round',
+ px: 'none',
+ py: 'none',
+ size: 'xxl',
+ },
+ meta: {
+ devtoolConfig: {
+ label: 'B',
+ },
+ },
+ },
},
meta: {
tags: ['ui', 'form'],
description: 'Button component',
+ devtoolConfig: {
+ background: 'background',
+ },
},
} as ComponentConfig;
diff --git a/docs/src/styles/components/card.ts b/docs/src/styles/components/card.ts
index 09a34303..3da33811 100644
--- a/docs/src/styles/components/card.ts
+++ b/docs/src/styles/components/card.ts
@@ -9,6 +9,9 @@ export const Card: ComponentConfig = {
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
+ fontFamily: 'regular',
+ bg: 'background',
+ shadow: 'light',
},
variants: {
primary: {
@@ -30,5 +33,15 @@ export const Card: ComponentConfig = {
meta: {
tags: ['container', 'ui'],
description: 'Card component',
+ devtoolConfig: {
+ background: 'background',
+ style: {
+ width: '80px',
+ height: '80px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }
+ }
},
} as ComponentConfig;
diff --git a/docs/src/styles/components/index.ts b/docs/src/styles/components/index.ts
index 46a9a41e..83a5f1f4 100644
--- a/docs/src/styles/components/index.ts
+++ b/docs/src/styles/components/index.ts
@@ -1,9 +1,10 @@
import { Button } from './button';
import { Typography } from './typography';
import { Card } from './card';
+import { Box } from './box';
export const components = {
- Box: { style: {}, variants: {} },
+ Box,
Card,
Button,
Typography,
diff --git a/docs/src/styles/components/typography.ts b/docs/src/styles/components/typography.ts
index e15995b1..21e846a0 100644
--- a/docs/src/styles/components/typography.ts
+++ b/docs/src/styles/components/typography.ts
@@ -100,5 +100,8 @@ export const Typography: ComponentConfig = {
meta: {
description: 'Typography component used to render text',
tags: ['typography', 'fonts'],
+ devtoolConfig: {
+ background: 'background'
+ }
},
} as ComponentConfig;
diff --git a/packages/spec/src/types/components.ts b/packages/spec/src/types/components.ts
index 3e9248f8..6e070310 100644
--- a/packages/spec/src/types/components.ts
+++ b/packages/spec/src/types/components.ts
@@ -1,8 +1,15 @@
import { Style } from './style';
+import { Color } from './colors';
export interface ComponentMeta {
description?: string;
tags?: string[];
+ devtoolConfig?: {
+ style?: Style;
+ background?: Color | Record;
+ label?: string;
+ hide?: boolean;
+ }
}
type ComponentStyle = {