Skip to content

Commit

Permalink
feat(stack): use design tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
DRiFTy17 committed Feb 22, 2024
1 parent 287cffb commit dbd54bd
Show file tree
Hide file tree
Showing 14 changed files with 469 additions and 93 deletions.
180 changes: 151 additions & 29 deletions src/dev/pages/stack/stack.ejs
Original file line number Diff line number Diff line change
@@ -1,28 +1,122 @@
<p>Resize browser window to see wrapping (set inline and wrap to true)</p>
<div class="stack-container">
<forge-stack id="main-demo" gap="16px">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<forge-stack id="main-demo">
<div class="box small"></div>
<div class="box medium"></div>
<div class="box large"></div>
<div class="box xlarge"></div>
</forge-stack>
</div>

<div class="more-examples">
<p class="forge-typography--heading2">More examples</p>
<forge-stack gap="56">
<h3 class="forge-typography--heading2">More examples</h3>
<forge-stack gap="32">
<!-- Info icon next to a label -->
<div>
<forge-card style="--forge-card-padding: 0;">
<forge-toolbar>
<p slot="start">Info icon + label</p>
</forge-toolbar>
<div style="padding: 16px;">
<forge-stack inline alignment="center" gap="4">
<forge-label legend>Featured</forge-label>
<forge-icon-button dense>
<forge-icon name="help_outline" external></forge-icon>
</forge-icon-button>
<forge-tooltip>Show me some useful information here!</forge-tooltip>
</forge-stack>
</div>
</forge-card>
</div>

<!-- Breadcrumbs -->
<div>
<forge-card style="--forge-card-padding: 0;">
<forge-toolbar>
<p slot="start">Breadcrumbs</p>
</forge-toolbar>
<div style="padding: 16px;">
<forge-stack inline alignment="center" gap="4">
<a href="/" aria-label="Back to the homepage">Home</a>
<forge-icon name="chevron_right" external style="color: var(--forge-theme-text-medium)"></forge-icon>
<span>Components</span>
<forge-icon name="chevron_right" external style="color: var(--forge-theme-text-medium)"></forge-icon>
<forge-badge theme="info-secondary" style="--forge-badge-shape: 2px;">Stack component</forge-badge>
</forge-stack>
</div>
</forge-card>
</div>

<!-- Toolbar start slot -->
<div>
<forge-card style="--forge-card-padding: 0;">
<forge-toolbar>
<p slot="start">Back arrow and title text in a secondary toolbar (Heading has padding:0, margin:0)</p>
</forge-toolbar>
<forge-toolbar style="--forge-toolbar-padding: 0" inverted no-border>
<forge-stack slot="start" inline alignment="center" gap="0">
<forge-icon-button aria-label="Default icon button">
<forge-icon name="arrow_back" external></forge-icon>
</forge-icon-button>
<h2 class="forge-typography--heading3" style="margin:0; padding: 0;">Go back</h2>
</forge-stack>
</forge-toolbar>
</forge-card>
</div>

<!-- Toolbar start slot -->
<div>
<forge-card style="--forge-card-padding: 0;">
<forge-toolbar>
<p slot="start">Back arrow and title text in a secondary toolbar (heading has default margin/padding)</p>
</forge-toolbar>
<forge-toolbar style="--forge-toolbar-padding: 0" inverted no-border>
<forge-stack slot="start" inline alignment="center" gap="0">
<forge-icon-button aria-label="Default icon button">
<forge-icon name="arrow_back" external></forge-icon>
</forge-icon-button>
<h2 class="forge-typography--heading3">This has default header margin and padding</h2>
</forge-stack>
</forge-toolbar>
</forge-card>
</div>

<!-- Toolbar start slot -->
<div>
<forge-card style="--forge-card-padding: 0;">
<forge-toolbar>
<p slot="start">Icon buttons in a toolbar</p>
</forge-toolbar>
<forge-toolbar style="--forge-toolbar-padding: 0" inverted no-border>
<forge-stack slot="end" inline alignment="center" gap="0">
<forge-icon-button aria-label="Default icon button">
<forge-icon name="settings" external></forge-icon>
</forge-icon-button>
<forge-icon-button aria-label="Default icon button">
<forge-icon name="grid_on" external></forge-icon>
</forge-icon-button>
<forge-icon-button aria-label="Default icon button">
<forge-icon name="more_vert" external></forge-icon>
</forge-icon-button>
</forge-stack>
</forge-toolbar>
</forge-card>
</div>

<!-- Toolbar buttons -->
<forge-card>
<forge-toolbar style="--forge-toolbar-padding: 0" no-border>
<p>Forge toolbar with perfectly spaced end slot buttons</p>
</forge-toolbar>
<forge-toolbar>
<forge-stack inline slot="end">
<forge-button>Cancel</forge-button>
<forge-button variant="raised">Save</forge-button>
</forge-stack>
</forge-toolbar>
</forge-card>
<div>
<forge-card style="--forge-card-padding: 0;">
<forge-toolbar no-border>
<p slot="start">Forge toolbar with end slot buttons</p>
</forge-toolbar>
<forge-toolbar inverted>
<forge-stack inline alignment="center" slot="end">
<forge-button>Cancel</forge-button>
<forge-button variant="raised">Save</forge-button>
</forge-stack>
</forge-toolbar>
</forge-card>
</div>

<!-- Vertical form -->
<forge-card style="--forge-card-padding: 0;">
Expand All @@ -43,6 +137,14 @@
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
<forge-text-field>
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
<forge-text-field>
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
</forge-stack>
</form>
</forge-card>
Expand All @@ -53,20 +155,40 @@
<p slot="start">Complex form</p>
</forge-toolbar>
<form style="padding: 16px;">
<forge-stack gap="16" stretch>
<forge-stack inline wrap>
<forge-text-field style="--forge-stack-stretch: 2">
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
<forge-text-field style="--forge-stack-stretch: 4">
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
<forge-text-field style="--forge-stack-stretch: 6">
<forge-stack>
<forge-stack gap="16">
<forge-text-field>
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
<forge-stack inline stretch>
<forge-text-field>
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
<forge-text-field>
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
</forge-stack>
</forge-stack>
<forge-stack inline stretch>
<forge-stack inline stretch>
<forge-text-field>
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
<forge-text-field>
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
</forge-stack>
<forge-stack inline stretch>
<forge-text-field>
<input type="text" id="input-text-01" />
<label for="input-text-01" slot="label">Text field</label>
</forge-text-field>
</forge-stack>
</forge-stack>
</forge-stack>
</form>
Expand Down
11 changes: 11 additions & 0 deletions src/dev/pages/stack/stack.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,17 @@
{ label: 'Center', value: 'center' },
{ label: 'End', value: 'end' },
]
},
{
type: 'select',
label: 'Justify',
id: 'justify-select',
defaultValue: 'start',
options: [
{ label: 'Start', value: 'start' },
{ label: 'Center', value: 'center' },
{ label: 'End', value: 'end' },
]
}
]
}
Expand Down
26 changes: 25 additions & 1 deletion src/dev/pages/stack/stack.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,36 @@
}

.box {
padding: 36px;
border: 4px dashed var(--mdc-theme-text-secondary-on-background);
background-color: var(--mdc-theme-text-disabled-on-background);
border-radius: 8px;
}

.small {
height: 40px;
width: 40px;
}

.medium {
height: 80px;
width: 80px;
}

.large {
height: 120px;
width: 120px;
}

.xlarge {
height: 160px;
width: 160px;
}

.more-examples {
margin-block-start: 64px;
}

p {
margin: 0;
padding: 0;
}
5 changes: 5 additions & 0 deletions src/dev/pages/stack/stack.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@ alignSelect.addEventListener('change', () => {
stackContainer.alignment = alignSelect.value;
});

const justifySelect = document.getElementById('justify-select') as ISelectComponent;
justifySelect.addEventListener('change', () => {
stackContainer.justify = justifySelect.value;
});

gapInput.addEventListener('input', () => {
stackContainer.gap = gapInput.value;
});
15 changes: 15 additions & 0 deletions src/lib/core/styles/tokens/stack/_tokens.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@use 'sass:map';
@use '../../utils';

$tokens: (
gap: utils.module-val(stack, gap, 16px),
height: utils.module-val(stack, height, null),
stretch: utils.module-val(stack, stretch, initial),
alignment: utils.module-val(stack, alignment, normal),
justify: utils.module-val(stack, justify, normal),
wrap: utils.module-val(stack, wrap, wrap),
) !default;

@function get($key) {
@return map.get($tokens, $key);
}
24 changes: 24 additions & 0 deletions src/lib/stack/_core.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
@use './token-utils' as *;
@forward './token-utils';

@mixin base() {
display: flex;
flex-direction: column;
align-items: #{token(alignment)};
justify-content: #{token(justify)};
gap: #{token(gap)};
height: #{token(height)};
width: 100%;

::slotted(*) {
flex: #{token(stretch)};
}
}

@mixin inline() {
flex-direction: row;
}

@mixin wrap() {
flex-wrap: wrap;
}
44 changes: 0 additions & 44 deletions src/lib/stack/_mixins.scss

This file was deleted.

25 changes: 25 additions & 0 deletions src/lib/stack/_token-utils.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
@use '../core/styles/tokens/stack/tokens';
@use '../core/styles/tokens/token-utils';

$_module: stack;
$_tokens: tokens.$tokens;

@mixin provide-theme($theme) {
@include token-utils.provide-theme($_module, $_tokens, $theme);
}

@function token($name, $type: token) {
@return token-utils.token($_module, $_tokens, $name, $type);
}

@function declare($token) {
@return token-utils.declare($_module, $token);
}

@mixin override($token, $token-or-value, $type: token) {
@include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
}

@mixin tokens($includes: null, $excludes: null) {
@include token-utils.tokens($_module, $_tokens, $includes, $excludes);
}
1 change: 0 additions & 1 deletion src/lib/stack/_variables.scss

This file was deleted.

Loading

0 comments on commit dbd54bd

Please sign in to comment.