Skip to content

Commit

Permalink
docs: cleanup docs about shorthands usage & limitations (#549)
Browse files Browse the repository at this point in the history 
* docs: cleanup docs about shorthands usage & limitations

* Change files
  • Loading branch information
@layershifter
layershifter authored May 2, 2024
1 parent 0f2eb5e commit e7e8d06
Show file tree
Hide file tree
Showing 33 changed files with 121 additions and 450 deletions.
12 changes: 3 additions & 9 deletions apps/website/docs/react/api/make-reset-styles.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,10 @@ const useClass = makeResetStyles({
}
```

:::note

By its nature `makeResetStyles` allows the use of [CSS shorthands](/react/guides/limitations#css-shorthands-are-not-supported) and does not have the same limitation as `makeStyles()`.

:::

## Usage with `makeStyles`

```jsx
import { makeStyles, makeResetStyles, shorthands } from '@griffel/react';
import { makeStyles, makeResetStyles } from '@griffel/react';
import { mergeClasses } from './mergeClasses';

const useBaseClass = makeResetStyles({
Expand All @@ -58,8 +52,8 @@ const useBaseClass = makeResetStyles({
const useClasses = makeStyles({
primary: { color: 'blue' },
circular: {
...shorthands.padding('5px'),
...shorthands.borderRadius('5px'),
padding: '5px',
borderRadius: '5px',
},
});

Expand Down
8 changes: 1 addition & 7 deletions apps/website/docs/react/api/make-static-styles.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,6 @@ function App() {
}
```

:::note

`makeStaticStyles` supports the use of [shorthands](/react/api/shorthands) and does not have the same limitation as `makeStyles()`.

:::

## Usage with `makeStyles`

```tsx
Expand All @@ -122,7 +116,7 @@ const useStaticStyles = makeStaticStyles({
const useClasses = makeStyles({
primaryText: {
color: 'blue',
...shorthands.padding('5px'),
padding: '10px',
},
});

Expand Down
174 changes: 10 additions & 164 deletions apps/website/docs/react/api/shorthands.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,17 @@ sidebar_position: 3

# shorthands

:::note

Check [limitations](/react/guides/limitations) to understand why these helpers are needed.

:::

`shorthands` provides a set of functions to mimic [CSS shorthands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) and improve developer experience as [CSS shorthands are not supported](/react/guides/limitations#css-shorthands-are-not-supported) by Griffel. For example:
`shorthands` provides a set of functions to mimic [CSS shorthands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) and improve developer experience as [_some_ of CSS shorthands are not supported](/react/guides/limitations#css-shorthands-are-not-supported) by Griffel. For example:

```tsx
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
// ❌ This is not supported, TypeScript compiler will throw, styles will not be inserted to DOM
padding: '2px 4px 8px 16px',
borderColor: 'red',
// ✅ Use shorthand functions to avoid writting CSS longhands
...shorthands.padding('2px', '4px', '8px', '16px'),
...shorthands.borderColor('red'),
},
});
```
Expand All @@ -31,55 +25,26 @@ The most of the functions follow syntax in matching CSS properties, but each val

```js
// ❌ Will produce wrong results
shorthands.padding('2px 4px');
shorthands.borderColor('red blue');
// ✅ Correct output
shorthands.padding('2px', '4px');
shorthands.borderColor('red', 'blue');
```

:::

Function in a `shorthand` set are pure, you can simply use `console.log` to better understand produced rules:

```js
console.log(padding('12px', '24px', '36px', '48px'));
console.log(borderColor('red'));
// ⬇️⬇️⬇️
// {
// paddingBottom: '36px',
// paddingLeft: '48px',
// paddingRight: '24px',
// paddingTop: '12px',
// borderBottomColor: 'red',
// borderLeftColor: 'red',
// borderRightColor: 'red',
// borderTopColor: 'red',
// }
```

### `shorthands.border`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
...shorthands.border('2px'),
...shorthands.border('2px', 'solid'),
...shorthands.border('2px', 'solid', 'red'),
},
});
```

### `shorthands.borderBottom`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
// The same is true for "borderTop", "borderLeft" & "borderRight"
...shorthands.borderBottom('2px'),
...shorthands.borderBottom('2px', 'solid'),
...shorthands.borderBottom('2px', 'solid', 'red'),
},
});
```

### `shorthands.borderColor`

```js
Expand Down Expand Up @@ -124,122 +89,3 @@ const useClasses = makeStyles({
},
});
```

### `shorthands.flex`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
...shorthands.flex('auto'),
...shorthands.flex(1, '2.5rem'),
...shorthands.flex(0, 0, 'auto'),
},
});
```

### `shorthands.gap`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
...shorthands.gap('12px'),
...shorthands.gap('12px', '24px'),
},
});
```

### `shorthands.gridArea`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
...shorthands.gridArea('auto'),
...shorthands.gridArea('first', 'second'),
...shorthands.gridArea(2, 4, 'span footer'),
...shorthands.gridArea(2, 4, 1, 3),
},
});
```

### `shorthands.inset`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
...shorthands.inset('10px'),
...shorthands.inset('10px', '5px'),
...shorthands.inset('2px', '4px', '8px'),
...shorthands.inset('1px', 0, '3px', '4px'),
},
});
```

### `shorthands.margin`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
...shorthands.margin('12px'),
...shorthands.margin('12px', '24px'),
...shorthands.margin('12px', '24px', '36px'),
...shorthands.margin('12px', '24px', '36px', '48px'),
},
});
```

### `shorthands.overflow`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
...shorthands.overflow('visible'),
...shorthands.overflow('visible', 'hidden'),
},
});
```

### `shorthands.padding`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
...shorthands.padding('12px'),
...shorthands.padding('12px', '24px'),
...shorthands.padding('12px', '24px', '36px'),
...shorthands.padding('12px', '24px', '36px', '48px'),
},
});
```

### `shorthands.transition`

```js
import { makeStyles, shorthands } from '@griffel/react';

const useClasses = makeStyles({
root: {
...shorthands.transition('inherit'),
...shorthands.transition('margin-right', '2s'),
...shorthands.transition('margin-right', '4s', '1s'),
...shorthands.transition('margin-right', '4s', '1s', 'ease-in'),
...shorthands.transition([
['margin-right', '4s', '1s', 'ease-in'],
['margin-left', '2s', '0s', 'ease-in-out'],
]),
},
});
```
Loading

0 comments on commit e7e8d06

Please sign in to comment.