Unverified Commit 42ca1f6f authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

enhancement: vf-stack spacing (#1698)

* enhancement: vf-stack spacing

This PR continues (and hopefully nearly completes) efforts to make the spacing between containers "just work".

It does so partly by removing the aggressive `!important` attributes from vf-stack now that it is more consistently implemented.  (This also more easily allows adhoc overrides where required.)

It also allows vf-stack to touch more components by using vf-stack in the `set-type` mixin.

Because of vf-stack's far-reaching `> *` this change touches many components.
parent 8559cd22
Pipeline #205394 failed with stages
in 2 minutes
### 2.2.0
* Drops custom margin-bottom, you should rely on vf-stack.
* https://github.com/visual-framework/vf-core/pull/1698
### 2.1.2
* Fixes CSS to match stylelint rules.
......
......@@ -11,8 +11,6 @@
.embl-grid {
margin-bottom: 48px;
& > :first-child {
grid-column: 1 / -1;
......@@ -39,11 +37,9 @@
gap: var(--page-grid-gap);
grid-template-columns: var(--vf-custom-grid-layout, var(--embl-grid));
}
}
.embl-grid--has-centered-content {
& > *:last-child {
grid-column-start: 2;
}
......
### 3.2.1
* Uses vf-stack for spacing to apply to elements immediately before or after vf-card-container.
* Removes spacing between fullbleed card containers and fullbleed items (footers, heroes)
* https://github.com/visual-framework/vf-core/pull/1698
### 3.2.0
* Fix README formatting.
......
......@@ -18,10 +18,21 @@
@import 'vf-card-container.variables.scss';
// An element immediately before or after vf-card-container should receive more spacing
.vf-stack .vf-card-container + *,
.vf-stack * + .vf-card-container {
--vf-stack-margin--custom: var(--page-grid-gap);
}
// no spacing between fullbleed card containers and fullbleed items
.vf-stack .vf-card-container.vf-u-fullbleed + .vf-u-fullbleed,
.vf-stack .vf-card-container.vf-u-fullbleed + .vf-hero,
.vf-stack .vf-card-container.vf-u-fullbleed + .vf-footer {
--vf-stack-margin--custom: 0;
}
.vf-card-container {
grid-column: 1 / -1;
margin: 0 0 2rem 0; // IE11 fallback
margin: 0 0 calc(var(--page-grid-gap)) 0;
padding: 2rem 0; // IE11 fallback
padding: var(--page-grid-gap) 0;
}
......
### 2.6.2
* Use vf-stack custom property for card text spacing.
### 2.6.1
* Resolves an accessibility issue with contrast for the striped card subheading variant.
......
......@@ -301,6 +301,10 @@
.vf-card__text {
margin-bottom: 0;
}
.vf-card__text {
margin-top: #{map-get($vf-spacing-map, vf-spacing--400)}; /* IE Fallback */
margin-top: var(--vf-stack-margin--custom, var(--vf-stack-margin, #{map-get($vf-spacing-map, vf-spacing--400)}));
}
}
// --------------------------------------------------------------------------------
......
### 3.0.0
* Allow margins to be handled by `set-type` mixin.
* https://github.com/visual-framework/vf-core/pull/1698
### 3.0.0-alpha.0
* reworks the inputs to make more use of nunjucks
......
title: Select
label: Select
status: beta
status: live
context:
component-type: form
......@@ -10,7 +10,7 @@
*/
.vf-form__select {
@include set-type(text-body--2);
@include set-type(text-body--2, $custom-margin-bottom: 0);
/* stylelint-disable */
--webkit-appearance: none;
......@@ -26,7 +26,6 @@
box-sizing: border-box;
color: color(grey--dark);
display: block;
margin: 0;
max-width: 100%;
padding: map-get($vf-spacing-map, vf-spacing--200);
width: 100%;
......@@ -39,15 +38,12 @@
color: set-ui-color(vf-ui-color--black);
outline: 0;
}
}
.vf-form__select::-ms-expand {
display: none;
}
.vf-form__select option {
font-weight: normal;
}
### 3.3.2
* Drop use of vf-stack-margin--custom.
* https://github.com/visual-framework/vf-core/pull/1698
### 3.3.1
* Reduces vf-hero bottom margin.
......
......@@ -23,7 +23,7 @@
// The hero bottom margin is created by pushing the next element "down"
& + :not(.vf-u-fullbleed):not(.vf-navigation) {
margin-top: map-get($vf-spacing-map, vf-spacing--800);
--vf-stack-margin--custom: #{map-get($vf-spacing-map, vf-spacing--800)};
--vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--800)};
}
}
......@@ -82,9 +82,7 @@
.vf-hero__subheading {
@include set-type(text-heading--4, $custom-margin-bottom: 0);
--vf-stack-margin--custom: 0;
--vf-stack-margin: 0;
max-width: 50ch;
}
......
### 2.7.0
* `@mixin set-type` margin-top now inherits any applicable vf-stack margin.
* https://github.com/visual-framework/vf-core/pull/1698
### 2.6.2
* Add map to `interactive-color` sass map
......
......@@ -75,19 +75,18 @@
// don't set any margin
}
@else if $custom-margin-bottom != 'auto' {
margin: 0 0 $custom-margin-bottom 0;
margin: var(--vf-stack-margin, 0) 0 $custom-margin-bottom 0;
// margin: 0 0 var(--vf-text-margin--bottom, 16px) 0;
}
@else {
@if (str-index($font-size, 'body--')) {
margin: 0 0 $vf-text-margin--bottom 0;
margin: 0 0 var(--vf-text-margin--bottom, 16px) 0;
margin: var(--vf-stack-margin, 0) 0 var(--vf-text-margin--bottom, 16px) 0;
}
@else if (str-index($font-size, 'heading--')) {
// Placeholder code for when we want a distinct $vf-heading-margin--bottom
margin: 0 0 $vf-text-margin--bottom 0;
margin: 0 0 var(--vf-text-margin--bottom, 16px) 0;
margin: var(--vf-stack-margin, 0) 0 var(--vf-text-margin--bottom, 16px) 0;
}
}
}
### 3.0.0
* With `vf-stack` more consistently adopted we remove `!important` and `vf-u-fullbleed` override. Some spacing regressions are possible.
* Sets a null vf-stack at the lowest CSS specificity.
* https://github.com/visual-framework/vf-core/pull/1698
### 2.1.2
* vf-stack no longer applies between a `vf-hero` and `vf-u-fullbleed`.
......
......@@ -4,19 +4,17 @@
## About
This can be used to set the flow of child components.
This sets the vertical spacing of child components.
## Usage
Some (and soon all) `vf-core` components will come without any margin spacing (this is to avoid adding margins where it is not needed).
Most `vf-core` components come without any margin spacing to avoid adding margins where not needed. Instead vertical spacing is controlled by `vf-stack`.
You can add the `vf-stack` class name to existing containers (like `vf-content`) or containers you create yourself in your codebase.
Note: `vf-grid` (1.0.0) and `embl-grid` (2.0.1) now automaticaly add gaps to their child elements as needed. So you should not use `vf-stack` alongside these.
Where vertical spacing is required withing a component, the `vf-stack` class name to existing containers (like `vf-hero`) or containers you create yourself in your codebase.
### Variants
We use CSS custom properties to control this vertical rhythm. For browsers that do not support CSS custom properties (IE 11) we provide a default value of `1rem` so that child components get some spacing. This value is overriden by browsers that understand CSS custom properties.
We use CSS custom properties to control this vertical rhythm. For browsers that do not support CSS custom properties (IE 11) we provide a default value of `1rem` so that child components get some spacing. This value is overridden by browsers that understand CSS custom properties.
| variant name | description |
| ------------ | -------------------------------------------------- |
......
......@@ -20,22 +20,21 @@
* 2. default for when browsers don't support CSS custom properties.
* 3. removes top margin for any child of the vf-stack component.
*
* notes:
* a: We are using `!important` here because some components have
* margin set that we need to override.
* b: We can probably remove the custom property when all components
* have been purged of margin-bottom too.
*
*/
[class^='vf-stack'] > * {
margin-bottom: 0 !important; /* [1] */
margin-top: 0 !important; /* [2] */
margin-bottom: 0; /* [1] */
margin-top: 0; /* [2] */
}
// Sets a null vf-stack at the lowest css specificity
.vf-stack > * + * > * {
--vf-stack-margin: 0;
}
.vf-stack > * + * {
margin-top: #{map-get($vf-spacing-map, vf-spacing--400)}; /* IE Fallback */
margin-top: var(--vf-stack-margin--custom, var(--vf-stack-margin, #{map-get($vf-spacing-map, vf-spacing--400)})) !important; /* [3] */
margin-top: var(--vf-stack-margin--custom, var(--vf-stack-margin, #{map-get($vf-spacing-map, vf-spacing--400)})); /* [3] */
}
.vf-stack--200 > * + * {
......@@ -66,12 +65,8 @@
--vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--1600)};
}
// vf-u-fullbleed should get more spacing after most items
.vf-stack > :not(.vf-hero) + .vf-u-fullbleed:not(.vf-hero):not(.ebi-header-footer) {
margin-top: #{map-get($vf-spacing-map, vf-spacing--1200)} !important;
}
// vf-stack should not apply between a hero and vf-u-fullbleed
.vf-stack > .vf-hero + .vf-u-fullbleed {
margin-top: unset !important;
}
### 2.0.3
* Use `set-type` mixin to set margins.
* https://github.com/visual-framework/vf-core/pull/1698
### 2.0.2
* Prevent hijacking of scroll when focusing tabs.
......
......@@ -10,6 +10,7 @@
*/
.vf-tabs__list {
@include set-type(text-body--2, $custom-margin-bottom: 0);
display: inline-flex;
flex-wrap: wrap;
padding: 0;
......@@ -29,7 +30,6 @@
.vf-tabs__item {
display: inline-block;
margin-top: .5rem;
position: relative;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment