Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/develop' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlekseyManetov
AlekseyManetov committed Nov 21, 2023
2 parents 11b4117 + 768d506 commit 8c74c9e
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 61 deletions.
19 changes: 13 additions & 6 deletions app/src/docs/_examples/textArea/Basic.example.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
import React, { useState } from 'react';
import { FlexCell, TextArea } from '@epam/uui';
import { FlexCell, TextArea, LabeledInput } from '@epam/uui';
import css from './BasicExample.module.scss';

export default function BasicTextAreaExample() {
const [value, onValueChange] = useState(null);

return (
<FlexCell cx={ css.container } width={ 350 }>
<TextArea value={ value } onValueChange={ onValueChange } />
<TextArea value={ value } onValueChange={ onValueChange } placeholder="Placeholder" />
<TextArea isDisabled value={ value } onValueChange={ onValueChange } placeholder="Disabled" />
<TextArea isReadonly value={ value } onValueChange={ onValueChange } placeholder="Readonly" />
<TextArea isInvalid value={ value } onValueChange={ onValueChange } placeholder="Invalid" />
<LabeledInput label="Label">
<TextArea value={ value } onValueChange={ onValueChange } placeholder="Type text" />
</LabeledInput>
<LabeledInput label="Disabled">
<TextArea isDisabled value={ value } onValueChange={ onValueChange } placeholder="Type text" />
</LabeledInput>
<LabeledInput label="Readonly">
<TextArea isReadonly value={ value } onValueChange={ onValueChange } placeholder="Type text" />
</LabeledInput>
<LabeledInput label="Invalid">
<TextArea isInvalid value={ value } onValueChange={ onValueChange } placeholder="Type text" />
</LabeledInput>
</FlexCell>
);
}
28 changes: 19 additions & 9 deletions app/src/docs/_examples/textInput/Basic.example.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
import React, { useState } from 'react';
import { FlexCell, TextInput } from '@epam/uui';
import { FlexCell, LabeledInput, TextInput } from '@epam/uui';
import css from './BasicExample.module.scss';
import { ReactComponent as CustomIcon } from '@epam/assets/icons/common/social-network-yammer-18.svg';

export default function BasicTextInputExample() {
const [value, onValueChange] = useState(null);
const [valueOpen, onOpenChange] = useState(null);

return (
<FlexCell cx={ css.container } width="auto">
<TextInput value={ value } onValueChange={ onValueChange } placeholder="Please type text" />
<TextInput isDisabled value={ value } onValueChange={ onValueChange } placeholder="Disabled" />
<TextInput isReadonly value={ value } onValueChange={ onValueChange } placeholder="Readonly" />
<TextInput isInvalid value={ value } onValueChange={ onValueChange } placeholder="Invalid" />
<TextInput icon={ CustomIcon } value={ value } onValueChange={ onValueChange } placeholder="Custom Icon" />
<TextInput icon={ CustomIcon } iconPosition="right" value={ value } onValueChange={ onValueChange } placeholder="Custom Icon on the right" />
<TextInput isDropdown value={ value } onValueChange={ onValueChange } placeholder="Dropdown" isOpen={ valueOpen } onClick={ () => onOpenChange(!valueOpen) } />
<LabeledInput label="Label">
<TextInput value={ value } onValueChange={ onValueChange } placeholder="Please type text" />
</LabeledInput>
<LabeledInput label="Disabled">
<TextInput isDisabled value={ value } onValueChange={ onValueChange } placeholder="Disabled" />
</LabeledInput>
<LabeledInput label="Readonly">
<TextInput isReadonly value={ value } onValueChange={ onValueChange } placeholder="Readonly" />
</LabeledInput>
<LabeledInput label="Invalid">
<TextInput isInvalid value={ value } onValueChange={ onValueChange } placeholder="Invalid" />
</LabeledInput>
<LabeledInput label="With icon">
<TextInput icon={ CustomIcon } value={ value } onValueChange={ onValueChange } placeholder="Custom Icon" />
</LabeledInput>
<LabeledInput label="With right icon">
<TextInput icon={ CustomIcon } iconPosition="right" value={ value } onValueChange={ onValueChange } placeholder="Custom Icon on the right" />
</LabeledInput>
</FlexCell>
);
}
117 changes: 71 additions & 46 deletions public/docs/content/theming-intro.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"type": "paragraph",
"children": [
{
"text": "UUI Theming allows you to define a set of CSS variables to change the appearance of components to align them with your brand requirements. This set of CSS variables, defined according to a specific brand, is called a Theme. You can find an example of such a theme "
"text": "UUI Themes allows changing appearance of components to align them with your brand requirements. Theme is a set of Figma Tokens and CSS variables, which defines components colors, fonts, and other visuals. You can find an example of a theme "
},
{
"type": "link",
Expand All @@ -16,22 +16,30 @@
]
},
{
"text": "."
"text": ". "
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "In essence, the theming mechanism is built on top of the "
"text": "Components in the "
},
{
"text": "@epam/uui",
"uui-richTextEditor-code": true
},
{
"text": " package, which contains a range of theme-agnostic components that depend on theme variables for their styling. Each component possesses specific CSS variables that define its appearance, such as background, borders, text color, etc. These component-specific variables use theme variables as their default value, so it's not required to define them all, use them only for cases when you need to customize some specific component or his part."
"text": " package, and other UUI packages, use theme variables for their styling. "
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "Theme variables are also useful directly in App's code, to structure CSS, and allow switching Themes in Apps."
}
]
},
Expand All @@ -47,7 +55,7 @@
"type": "paragraph",
"children": [
{
"text": "UUI provides a set of ready-made themes: Electric, Loveship, Loveship Dark and Promo. \n"
"text": "UUI provides a set of built-in themes: Electric, Loveship, Loveship Dark and Promo. \n"
},
{
"text": "List of exists theme classes:",
Expand Down Expand Up @@ -120,7 +128,7 @@
"type": "paragraph",
"children": [
{
"text": "To add theme into you project you need:"
"text": "To add theme to your project:"
}
]
},
Expand Down Expand Up @@ -233,14 +241,17 @@
"type": "paragraph",
"children": [
{
"text": "Along with set of themes for the "
},
{
"text": "@epam/uui",
"uui-richTextEditor-code": true
},
"text": "Along with a set of themes, UUI has Skins - packages based on @epam/uui components, to provide additional Brand-specific features."
}
],
"data": {}
},
{
"type": "paragraph",
"data": {},
"children": [
{
"text": " package, UUI also offering Skin packages: "
"text": "Existing skins are "
},
{
"text": "@epam/electric",
Expand All @@ -263,8 +274,7 @@
{
"text": ". "
}
],
"data": {}
]
},
{
"data": {},
Expand All @@ -289,7 +299,7 @@
"type": "list-item-child",
"children": [
{
"text": "Skin can define its own set of colors. Instead of just pre-defined semantic colors, such as primary/secondary/success/critical and etc., we can use extended and brand-named set of colors and modifiers."
"text": "Skin can define its own set of colors. Instead, or in addition to pre-defined semantic colors, such as primary/secondary/success/critical, Skins can provide an extended and brand-named set of colors and modifiers."
}
]
}
Expand Down Expand Up @@ -324,14 +334,20 @@
"type": "list-item-child",
"children": [
{
"text": "You won't be able to to switch theme to the another one(except dark variation of the same Theme), because Skin brand-named set of colors and modifiers broke a semantic approach. Button with blue color can't became a purple with new theme. Instead of Button from "
},
{
"text": "@epam/uui",
"uui-richTextEditor-code": true
},
"text": "If you build UI on top of a particular Skin, it won't work with an arbitrary Theme. E.g. if you take components from @epam/loveship package, you can't apply electric Theme on top. This is expected, as you might use some Skin-specific colors, components, and modifiers, which are absent in another Theme. If you consider switching to another Theme later, you can simplify this, by preferring to use semantic colors and CSS variables, and use Skin-specific features only when needed."
}
]
}
]
},
{
"type": "list-item",
"children": [
{
"type": "list-item-child",
"children": [
{
"text": ", with semantic primary color, can be any color defined by theme."
"text": "Skins acts as backward-compatibility layer - we can keep supporting certain modifiers in colors in certain Skins, and independently change same APIs in other Skins."
}
]
}
Expand Down Expand Up @@ -362,7 +378,7 @@
"data": {},
"children": [
{
"text": "Theme variables not assumed as a internal API they can be used, not only to style UUI components, but also anywhere in your application. For example, it will be useful if you have a dark/light theme switcher or if you made a theme agnostic interface. "
"text": "Theme variables are not limited to style UUI components. You can use these variables in your application's components. This would allow your app to switch Themes as well, for example to build dark/light theme switcher, or change your app's theme between brands. "
}
]
},
Expand All @@ -380,7 +396,7 @@
"data": {},
"children": [
{
"text": "To make the variables easier to use, we have divided them into logical groups."
"text": "UUI CSS variables are split into groups:"
}
]
},
Expand All @@ -389,8 +405,8 @@
"data": {},
"children": [
{
"text": "Theme-specific variables",
"uui-richTextEditor-bold": true
"uui-richTextEditor-bold": true,
"text": "UUI semantic variables"
}
]
},
Expand All @@ -399,7 +415,7 @@
"data": {},
"children": [
{
"text": "Palette variables are primitive color values in our library. Palette defines colors, specific to particular theme. Color set and names can be different between Themes."
"text": "Semantic variables relate to a specific context or abstraction. Semantic variable helps communicate the intended purpose of a variable, and are effective when a value with a single intent will appear in multiple places. E.g. Defines semantic colors (like Primary and Neutral). Semantic colors have the same names across different Themes."
}
]
},
Expand All @@ -408,16 +424,18 @@
"data": {},
"children": [
{
"text": "--electric-50: #0A68F1;",
"text": "--uui-primary-50: var(--electric-50);",
"uui-richTextEditor-code": true
}
]
},
{
"type": "paragraph",
"data": {},
"children": [
{
"text": " Use this variables if you target only one Theme. Note that this would make your UI bound to particular Theme, and you it would complicate switching to another Theme later. Exception: light and dark versions of the same Theme, as they would usually has the same set and names for colors."
"uui-richTextEditor-code": true,
"text": "--uui-control-bg: var(--uui-neutral-0);"
}
]
},
Expand All @@ -426,17 +444,16 @@
"data": {},
"children": [
{
"uui-richTextEditor-bold": true,
"text": "UUI semantic variables"
"text": "It's safe to use semantic variables if you need to build Theme-agnostic UI, which can work in different Themes."
}
]
},
{
"type": "paragraph",
"type": "note-link",
"data": {},
"children": [
{
"text": "Semantic variables relate to a specific context or abstraction. Semantic variable helps communicate the intended purpose of a variable, and are effective when a value with a single intent will appear in multiple places. E.g. Defines semantic colors (like Primary and Neutral). Semantic colors has same names across different Themes."
"text": "Documentation for UUI Semantic Variables is planned. However, choosing CSS variables by hand is rarely needed, as they can be copied from Figma."
}
]
},
Expand All @@ -445,8 +462,8 @@
"data": {},
"children": [
{
"text": "--uui-primary-50: var(--electric-50);",
"uui-richTextEditor-code": true
"text": "Theme-specific variables",
"uui-richTextEditor-bold": true
}
]
},
Expand All @@ -455,8 +472,7 @@
"data": {},
"children": [
{
"uui-richTextEditor-code": true,
"text": "--uui-control-bg: var(--uui-neutral-0);"
"text": "Palette variables are primitive color values in our library. Palette defines colors, specific to a particular theme. Color set and names can be different between Themes."
}
]
},
Expand All @@ -465,7 +481,16 @@
"data": {},
"children": [
{
"text": "It's safe to use semantic variables if you need to build Theme-agnostic UI, which can work in different Themes."
"text": "--electric-50: #0A68F1;",
"uui-richTextEditor-code": true
}
]
},
{
"type": "paragraph",
"children": [
{
"text": " Use these variables if you target only one Theme. Note that this would make your UI bound to a particular Theme, and it would complicate switching to another Theme later. Exception: light and dark versions of the same Theme, as they would usually have the same set and names for colors."
}
]
},
Expand All @@ -480,11 +505,11 @@
]
},
{
"type": "note-error",
"type": "note-warning",
"data": {},
"children": [
{
"text": "This API isn't stable yet and can be changed. We strongly discourage using this in your projects until a stable version is released."
"text": "This API isn't stable yet and can be changed. We discourage using this in your projects until a stable version is released."
}
]
},
Expand Down Expand Up @@ -570,11 +595,11 @@
]
},
{
"type": "note-error",
"type": "note-warning",
"data": {},
"children": [
{
"text": "This API isn't stable yet and can be changed. We strongly discourage using this in your projects until a stable version is released."
"text": "This API isn't stable yet and can be changed. We discourage using this in your projects until a stable version is released."
}
]
},
Expand All @@ -583,7 +608,7 @@
"data": {},
"children": [
{
"text": "Component-specific variables are an exhaustive representation of every value associated with a component. In general they inherit from core variables, but are named in a way that allows engineering teams to be as specific as possible in applying variables in component development."
"text": "Component-specific variables are an exhaustive representation of every CSS value associated with a component. Components defaults their values defaults to core variables, so there's no need to explicitly define them. However, these variables can be overridden to tweak a particular component in Theme definition, or in-place."
}
]
},
Expand All @@ -592,7 +617,7 @@
"data": {},
"children": [
{
"text": "--uui-primary-50 => --uui-spinner",
"text": "--uui-spinner: var(--uui-primary-50)",
"uui-richTextEditor-code": true
}
]
Expand All @@ -605,7 +630,7 @@
"text": "Also if component has set of colors they can inherit values from color classes.\n"
},
{
"text": "--uui-color-50 => --uui-btn-bg",
"text": "--uui-btn-bg: var(--uui-color-50)",
"uui-richTextEditor-code": true
},
{
Expand Down

0 comments on commit 8c74c9e

Please sign in to comment.