Skip to content

Commit

Permalink
Remove bookends from initial spec
Browse files Browse the repository at this point in the history
  • Loading branch information
@ecraig12345
ecraig12345 committed Oct 28, 2021
1 parent d5d840e commit 0f0e40c
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 118 deletions.
106 changes: 59 additions & 47 deletions packages/react-input/Spec-styling.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,45 +11,39 @@ General abbreviations used:
## Sizes

- padding and gap values are from (theoretical) `spacing.horizontal` unless otherwise specified
- bookend-related sizes are from separate bookends page (everything except L/R padding and spacing within inherits from default)
- interpretation:
- "spacing between icon before and content"/"spacing between content and icon after 1" => "spacing start/end to content"
- "spacing between icon after 1 and icon after 2" => "spacing within insideEnd" because we're not going to have two icon slots
- bookend "spacing between content and icon" => "spacing within bookend"
- "spacing between icon after 1 and icon after 2" => "spacing within contentBefore/After" because we're not going to have two icon slots
- omitted "focus indicator" b/c that's handled elsewhere

| Style | All |
| ------------- | ------------------- |
| v-align | vertically centered |
| border radius | medium |

| Style | medium | small | large |
| ----------------------------- | ---------------- | ------------------- | --------- |
| height | 32px | 24px | 40px |
| left/right padding | mNudge | sNudge | m |
| left/right padding in content | xxs | " | sNudge |
| bookends left/right padding | s | sNudge | m |
| content size | body1 (base.300) | caption1 (base.200) | base.400 |
| "icon" size | 20Regular | 16Regular | 24Regular |
| spacing start/end to content | xxs | " | sNudge |
| spacing within insideEnd | xs | " | " |
| spacing within bookend | xs | " | " |
| Style | medium | small | large |
| ---------------------------------- | ---------------- | ------------------- | --------- |
| height | 32px | 24px | 40px |
| left/right padding | mNudge | sNudge | m |
| left/right padding in content | xxs | " | sNudge |
| content size | body1 (base.300) | caption1 (base.200) | base.400 |
| "icon" size | 20Regular | 16Regular | 24Regular |
| spacing start/end to content | xxs | " | sNudge |
| spacing within contentBefore/After | xs | " | " |

### Sizes application

| Style | Slot | Notes |
| ----------------------------- | ---------------------------- | ---------------------------------------------------------------- |
| v-align | root, inputWrapper | ??? |
| height | root | ? as minHeight or height ? |
| border radius | bookends, inputWrapper, root | set where borders or shadow are defined; don't use if underlined |
| left/right padding | inputWrapper | padding |
| left/right padding in content | input | padding |
| bookends left/right padding | bookends | padding |
| content size | root, input | fontSize; doesn't inherit to input |
| "icon" size | n/a | no icons built in |
| spacing start/end to content | inputWrapper | display: flex (also to grow input), flex gap |
| spacing within insideEnd | insideEnd | display: flex, flex gap |
| spacing within bookends | bookends | display: flex, flex gap |
| Style | Slot | Notes |
| ---------------------------------- | ------------------- | ---------------------------------------------------------------- |
| v-align | root | ??? |
| height | root | ? as minHeight or height ? |
| border radius | root | set where borders or shadow are defined; don't use if underlined |
| left/right padding | root | padding |
| left/right padding in content | input | padding |
| content size | root, input | fontSize; doesn't inherit to input |
| "icon" size | n/a | no icons built in |
| spacing start/end to content | root | display: flex (also to grow input), flex gap |
| spacing within contentBefore/After | contentBefore/After | display: flex, flex gap |

## Appearance colors and strokes

Expand Down Expand Up @@ -86,26 +80,39 @@ General abbreviations used:

### Appearance application

| Style | Slot | Notes |
| -------------------------- | ------------------- | -------------------------------------------------------- |
| content color | input | other things have their own colors |
| placeholder color | input | `::placeholder` |
| "icon" color | insideStart/End | |
| shadow | root | encompasses bookends; requires rounding root corners |
| background | inputWrapper, input | bookends have separate background; input doesn't inherit |
| border | inputWrapper | |
| border hover | TODO inputWrapper | `:hover` |
| border pressed | TODO | |
| border focused | TODO inputWrapper | `:focus-within` |
| borderBottom | inputWrapper | |
| borderBottom hover | TODO inputWrapper | `:hover` |
| borderBottom pressed | TODO | |
| borderBottom focused | n/a | handled by focus indicator |
| in focus indicator | TODO | |
| in focus indicator pressed | TODO | |
| cursor | root, input | |

## Bookend appearance (TODO)
| Style | Slot | Notes |
| -------------------------- | ------------------- | ---------------------------------- |
| content color | input | other things have their own colors |
| placeholder color | input | `::placeholder` |
| "icon" color | contentBefore/After | |
| shadow | root | |
| background | root, input | |
| border | root | |
| border hover | TODO root | `:hover` |
| border pressed | TODO | |
| border focused | TODO root | `:focus-within` |
| borderBottom | root | |
| borderBottom hover | TODO root | `:hover` |
| borderBottom pressed | TODO | |
| borderBottom focused | n/a | handled by focus indicator |
| in focus indicator | TODO | |
| in focus indicator pressed | TODO | |
| cursor | root, input | |

## Bookends (deferred)

Bookend implementation has been deferred and will likely be handled in a separate component, but leaving these for reference.

### Sizes

| Style | medium | small | large |
| ------------------ | ------------------- | ------ | ----- |
| v-align | vertically centered | " | " |
| border radius | medium | " | " |
| left/right padding | s | sNudge | m |
| spacing within | xs | " | " |

### Appearance

| Style | filled | brand | transparent |
| --------------- | ------------------ | ------------------------ | --------------------- |
Expand All @@ -117,3 +124,8 @@ General abbreviations used:
- Inner border ("border right") color is applied separately to before/after bookends.
- Others are applied in obvious way to both bookends.
- All borders are thin (1px).

### Changes to default input appearance

- Remove rounded corners from input
- For filled inputs with shadow, change the shadow to also encompass the bookends
14 changes: 14 additions & 0 deletions packages/react-input/Spec-variants.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,20 @@

Input has many variants and additional features. We don't plan to implement any of these immediately, but adding notes here for future reference.

## Bookends

"Bookends" (the naming comes from the design spec) are bits of text on the left or right outside of the field, surrounded by a border or background color.

Initially, bookends were planned to be included in the main component (as `bookendBefore`/`bookendAfter` slots) but we decided they're not essential and should be split out to simplify the DOM structure and defer some of the related open questions until later.

If/when a partner needs this feature, it will likely go in some kind of wrapper component.

Visual variants for the bookends are as follows (note that specific colors are just examples based on the default theme):

- `filled` (default): bookends have a gray background, black text, and no border
- `brand`: bookends have a brand color (such as blue or purple) background, white text, and no border
- `transparent`: bookends have a transparent background, black text, and only a thin inside border to distinguish them from the field

## Multi-line (`textarea`)

This will tentatively be a separate component, likely sharing some internals with the basic `Input` using hooks (scheduling TBD).
Expand Down
Loading

0 comments on commit 0f0e40c

Please sign in to comment.