Skip to content

Commit

Permalink
docs: fix texts in guides (#1606)
Browse files Browse the repository at this point in the history
  • Loading branch information
marcelovicentegc authored May 8, 2024
2 parents 0e39c7a + 75ec136 commit 22eea0f
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 15 deletions.
18 changes: 9 additions & 9 deletions packages/docs/pages/guides/design-contribution/component.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,23 @@ Understand how to create a Shoreline component, whether it is a new component, p

## Structure

### 1. Tokens usage
### Tokens usage

- Always use Shoreline [tokens](https://shoreline.vtex.com/foundations) for all spacing, color, typography, and shadow values when building a component.
- We do not recommend using custom values. Always thoroughly test the use of tokens before proposing anything customized.

### 2. Autolayout and constraints
### Autolayout and constraints

- Apply auto layout and constraints whenever possible, ensuring responsiveness, correct spacing, and scalability in the component's application.
- We do not recommend using Groups in components.

![Component tokens](/assets/component-tokens.png)

### 3. Height and width
### Height and width

Apply definitions of max/min-height or width whenever they exist. For example, form fields always use 320px, since the mobile width is 360px and has a 20px margin on each side.

### 4. Layers
### Layers

- Optimize the use of layers as much as possible.
- Look at other components with similar elements to better understand the names already used.
Expand All @@ -38,7 +38,7 @@ Apply definitions of max/min-height or width whenever they exist. For example, f

![Component layers example](/assets/component-layers-alert.png)

### 5. Variants and properties
### Variants and properties

#### Usage

Expand Down Expand Up @@ -66,13 +66,13 @@ Apply definitions of max/min-height or width whenever they exist. For example, f

## Library organization

### 1. Name and description
### Name and description

- Define the name according to how the component is best known in the market and use TitleCase, without spaces between words.
- Write the description using a maximum of two short sentences, including the component's function and, if necessary, any relevant behavior or property.
- Use [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/), [The Component Gallery](https://component.gallery/components/), [Material Design](https://m3.material.io/), and other well-established design systems as references.

### 2. Component
### Component

- The documentation of a component in the [library](https://www.figma.com/file/PWGSQ26U55u8E34JWn9ZYE/Shoreline-%E2%80%93-Components?type=design&t=TS78wGSzUvIRBRKY-6) should always follow the [component section template](https://www.figma.com/file/1rQH2tU85kYEYRHRoAP5gZ/InnerSource-%E2%80%93-Design-Templates?type=design&node-id=23-28325&mode=design&t=5JmOPDBymodF7bUk-4). Follow the instructions included in the template.
- Follow the alphabetical order to organize the sections of the components, including the order of the layers.
Expand All @@ -99,11 +99,11 @@ Apply definitions of max/min-height or width whenever they exist. For example, f

All components must have documentation on the [Shoreline website](https://shoreline.vtex.com/components).

### 1. Related components
### Related components

Define the related components that appear on the main page of a component by answering the question: *which other components have an application that may generate doubt regarding the new component?* For example, there may be confusion between the application of a Button and an IconButton, so the IconButton is included as a [related component](https://shoreline.vtex.com/components/button#related-components) of the Button.

### 2. Best practices
### Best practices

- Visual components should always have Best practices documentation.
- Look at other components to better understand the patterns.
Expand Down
8 changes: 4 additions & 4 deletions packages/docs/pages/guides/design-contribution/icon.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Understand the requirements for a Shoreline icon, whether to add a new icon or f

## Structure

### 1. Icon design
### Icon design

- Shoreline uses icons from the [Phosphor](https://phosphoricons.com/) library. Always prioritize using icons from there when proposing the addition of a new icon to the library.
- As stated in Shoreline's icon [best practices](https://shoreline.vtex.com/foundations/icons/best-practices), the use of custom icons is discouraged but still possible, depending on the scenario.
Expand All @@ -18,7 +18,7 @@ Understand the requirements for a Shoreline icon, whether to add a new icon or f
- A Normal icon has a size of 20px, and a Small icon has a size of 16px.
- If the icon needs to have more than one version, add all necessary versions.

### 2. Layers
### Layers

- Look at other icons to better understand the patterns.
- An icon should always contain two layers: *Shape* and *Line (original)*.
Expand All @@ -32,14 +32,14 @@ Understand the requirements for a Shoreline icon, whether to add a new icon or f

## Library organization

### 1. Name and description
### Name and description

- The name should always be `Icon[IconName][Modifier(optional)]`.
- The `IconName` will be the same name as the icon in the Phosphor library or, if it's a custom icon, it will be the literal name of the shape.
- The `Modifier` can be related to weight or size. When the icon has an Outline weight or a Normal size, it is not necessary to mention it in the name.
- For example, the icon IconTag is Normal and Outline, the icon IconBellFill is Normal and Fill, and the icon IconCheckSmall is Small and Outline.

### 2. Icon
### Icon

- New icons in the [library](https://www.figma.com/file/o3s49SJn2lIfmXBkHd9aXi/Shoreline-%E2%80%93-Icons?type=design&node-id=0%3A1&mode=design&t=YYWQqGKEw5bb2ayK-1) are always added at the end of the list of one of the existing 3 categories: Normal outline, Normal fill, or Small outline.
- The color of the shape and vector of the icon should be `$fg-base`.
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/pages/guides/design-migration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ The component exists with the same name.

### Text Input

The component exists with the same name.
The component is now called `Input`.

### Toast

Expand All @@ -161,4 +161,4 @@ Components that didn't exist in the Admin UI library and were added to Shoreline
- Empty State
- Icon Button

Understand their usage by reading their best practices documentation.
Understand their usage by reading their [best practices](https://shoreline.vtex.com/components) documentation.

0 comments on commit 22eea0f

Please sign in to comment.