Skip to content

Commit

Permalink
feat(fab): adds condensed size (VIV-1964) (#1886)
Browse files Browse the repository at this point in the history
* feat: adds condensed size to fab

* chore: updates stylelint errors

* Delete libs/components/vite.config.ts.timestamp-1724405956675-945aa1543e03b.mjs

* chore: update formatting

* chore: replace pixel values with variables

* chore: formatting

* chore: updates snapshots

---------

Co-authored-by: James Taylor <jstaylor@vonht2fg32k90.home>
  • Loading branch information
TaylorJ76 and James Taylor authored Aug 28, 2024
1 parent b1b78a9 commit 5df80a0
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 3 deletions.
3 changes: 2 additions & 1 deletion libs/components/src/lib/fab/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,11 @@ It accepts a subset of predefined values.

Use the `size` attribute to set the FAB's to one of the predefined block size extent.

- Type: `'normal'` | `'expanded'`
- Type: `'condensed'` | `'normal'` | `'expanded'`
- Default: `'normal'`

```html preview
<vwc-fab icon="thumbs-up-line" label="condensed" size="condensed"></vwc-fab>
<vwc-fab icon="thumbs-up-line" label="normal" size="normal"></vwc-fab>
<vwc-fab icon="thumbs-up-line" label="expanded" size="expanded"></vwc-fab>
```
Expand Down
17 changes: 16 additions & 1 deletion libs/components/src/lib/fab/fab.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,26 @@
#{variables.$inline-padding}: 20px;
}

&:not(.size-expanded) {
&.size-condensed {
#{variables.$border-radius}: #{border-radius-variables.$border-radius-expanded};
#{variables.$block-size}: #{size.$vvd-size-condensed};

font: var(#{constants.$vvd-typography-base-condensed-bold});

vwc-icon {
font-size: calc(#{size.$vvd-size-condensed} / 2);
}
}

&:not(.size-expanded, .size-condensed) {
#{variables.$border-radius}: #{border-radius-variables.$border-radius-extra-expanded};
#{variables.$block-size}: #{size.$vvd-size-normal};
}

&:not(.size-condensed) {
font: var(#{constants.$vvd-typography-base-bold});
}

&.icon-only {
#{variables.$inline-padding}: 0;

Expand Down
5 changes: 4 additions & 1 deletion libs/components/src/lib/fab/fab.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ export type FabConnotation = Extract<
*
* @public
*/
export type FABSize = Extract<Size, Size.Normal | Size.Expanded>;
export type FABSize = Extract<
Size,
Size.Condensed | Size.Normal | Size.Expanded
>;

/**
* @public
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5df80a0

Please sign in to comment.