Skip to content

Commit

Permalink
fix: add Line Tile type to Generic Tiles (#1059)
Browse files Browse the repository at this point in the history 
* fix: add Line Tile type to Genric Tiles

* add IE11 fixes

* Update tile.md

* rename tiles, add role button to tiles

Co-authored-by: Vanessa-Cusmich <54723167+Vanessa-Cusmich@users.noreply.github.com>
  • Loading branch information
@InnaAtanasova @Vanessa-Cusmich
InnaAtanasova and Vanessa-Cusmich committed May 29, 2020
1 parent f1c2274 commit c38c9de
Show file tree
Hide file tree
Showing 13 changed files with 1,636 additions and 67 deletions.
7 changes: 7 additions & 0 deletions .storybook/resources/theme-ugly.css
View file
Expand Up @@ -147,4 +147,11 @@
--sapInfobar_Hover_Background: brown;
--sapInfobar_Active_Background: red;
--sapGroup_TitleBorderColor: #945ef7;
--sapTile_Background: chocolate;
--sapTile_TextColor: green;
--sapButton_TextColor: #66ffff;
--sapHighlightColor: yellow;
--sapContent_ContrastTextColor: blue;
--sapButton_Background: powderblue;
--sapButton_IconColor: pink;
}
6 changes: 3 additions & 3 deletions docs/_data/components.yml
View file
Expand Up @@ -24,6 +24,9 @@ items:
- title: Forms
meta: form

- title: Generic Tile
meta: generic-tile

- title: Icon
meta: icon

Expand Down Expand Up @@ -96,9 +99,6 @@ items:
- title: Tabs
meta: tabs

- title: Tile
meta: tile

- title: Toolbar
meta: toolbar

Expand Down
8 changes: 4 additions & 4 deletions docs/_data/sidebars/left-navigation-sidebar.yml
View file
Expand Up @@ -124,6 +124,10 @@ entries:
url: /components/form.html
output: web

- title: Generic Tile
url: /components/generic-tile.html
output: web

- title: Icon
url: /components/icon.html
output: web
Expand Down Expand Up @@ -228,10 +232,6 @@ entries:
url: /components/tabs.html
output: web

- title: Tile
url: /components/tile.html
output: web

- title: Time
url: /components/time.html
output: web
Expand Down
0 docs/images/component-visual/tile.png → .../images/component-visual/generic-tile.png
View file
File renamed without changes
558 changes: 514 additions & 44 deletions docs/pages/components/tile.md → docs/pages/components/generic-tile.md
View file

Large diffs are not rendered by default.

Binary file modified ...image_snapshots__/storyshots-test-js-image-storyshots-tile-all-cases-1-snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/fundamental-styles.scss
View file
Expand Up @@ -47,7 +47,6 @@
@import "./panel";
@import "./popover";
@import "./product-switch";
@import "./product-tile";
@import "./radio";
@import "./section";
@import "./segmented-button.scss";
Expand Down
232 changes: 229 additions & 3 deletions src/tile.scss
View file
@@ -1,5 +1,6 @@
@import "./new-settings";
@import "./mixins";
@import "./mixins/button/button-helper";

$block: #{$fd-namespace}-tile;

Expand Down Expand Up @@ -35,11 +36,25 @@ $fd-tile-toggle-button-position: -0.0625rem !default;

// CLOSE BUTTON
$fd-tile-close-button-position: -0.375rem !default;
$fd-tile-close-button-offset: 0.625rem !default;
$fd-tile-close-button-offset: 0.5rem !default;

// ACTION INDICATOR
$fd-tile-action-indicator-offset: 0.25rem !default;

// LINE TILE
$fd-line-tile-height: 2.25rem !default;
$fd-line-tile-height-compact: 1.625rem !default;
$fd-line-tile-max-height: 3.25rem !default;
$fd-line-tile-max-height-compact: 2.875rem !default;
$fd-line-tile-min-width: 2rem !default;
$fd-line-tile-vertical-spacing: 0.125rem !default;
$fd-line-tile-horizontal-spacing: 1.25rem !default;
$fd-line-tile-title-horizontal-spacing: 0.625rem !default;
$fd-line-tile-title-horizontal-spacing-compact: 0.5rem !default;
$fd-line-tile-horizontal-padding: 0.5rem !default;
$fd-line-tile-action-container-horizontal-spacing: 0.25rem !default;
$fd-line-tile-badge-horizontal-spacing: 0.375rem !default;

// MIXINS
@mixin two-col-sections {
display: flex;
Expand Down Expand Up @@ -99,7 +114,7 @@ $fd-tile-action-indicator-offset: 0.25rem !default;
display: block;
border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
top: -0.0625rem;
left: 0.5625rem;
left: 0.4375rem;
right: 0;
bottom: 0;
z-index: 3;
Expand All @@ -108,12 +123,20 @@ $fd-tile-action-indicator-offset: 0.25rem !default;
@include fd-rtl() {
&::after {
left: 0;
right: 0.5625rem;
right: 0.4375rem;
}
}
}
}

@mixin reset-position-absolute {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.#{$block} {
@include fd-reset();
@include set-height($fd-tile-height);
Expand Down Expand Up @@ -690,4 +713,207 @@ $fd-tile-action-indicator-offset: 0.25rem !default;
}
}
}

// LINE TILES
&-container {
@include fd-reset();

display: flex;
flex-wrap: wrap;
width: 100%;
border-radius: $fd-tile-border-radius;
border: 0.0625rem solid var(--sapTile_BorderColor);
background-color: var(--sapTile_Background);
box-shadow: var(--sapContent_Shadow0);
padding: 0.5rem;

&--list {
flex-direction: column;
background-color: var(--sapGroup_ContentBackground);

.#{$block}--line {
flex-wrap: wrap;
margin-right: 0;
margin-left: 0;
max-height: $fd-line-tile-max-height;

&.#{$block}--compact {
max-height: $fd-line-tile-max-height-compact;
}
}

.#{$block}--action {
.#{$block}__header {
mask-image: linear-gradient(linear, right top, left top, from(transparent), color-stop(7%, #000000), to(#000000));
-webkit-mask-image: -webkit-gradient(linear, right top, left top, from(transparent), color-stop(7%, #000000), to(#000000));

@include fd-rtl() {
mask-image: linear-gradient(linear, left top, right top, from(transparent), color-stop(7%, #000000), to(#000000));
-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(7%, #000000), to(#000000));
}
}
}

.#{$block}__header {
flex-wrap: wrap;
flex: 1;
}
}
}

&--line {
@include fd-flex-vertical-center() {
justify-content: space-between;
}

min-height: $fd-line-tile-height;
max-height: $fd-line-tile-height;
height: 100%;
min-width: $fd-line-tile-min-width;
max-width: 100%;
width: auto;
padding: 0 $fd-line-tile-horizontal-padding;
margin-right: $fd-line-tile-horizontal-spacing;
margin-top: $fd-line-tile-vertical-spacing;
margin-bottom: $fd-line-tile-vertical-spacing;
box-shadow: none;
background: transparent;

@include fd-hover() {
box-shadow: none;
}

@include fd-active() {
box-shadow: none;
}

@include fd-disabled() {
opacity: 0.5;
background: transparent;
pointer-events: none;
}

@include fd-rtl() {
margin-right: 0;
margin-left: $fd-line-tile-horizontal-spacing;
}

&:last-child {
margin-right: 0;
}

.#{$block}__header {
@include set-height(100%);
@include fd-flex-vertical-center();

margin: 0;
}

.#{$block}__title-container {
@include fd-reset();
@include fd-flex-vertical-center();

max-width: 100%;
}

.#{$block}__title,
.#{$block}__subtitle {
font-size: var(--sapFontSize);
text-shadow: var(--sapContent_TextShadow);
color: var(--sapTile_TextColor);
line-height: 1.625rem;
min-width: $fd-line-tile-min-width;
}

.#{$block}__title {
@include fd-ellipsis();

margin-right: $fd-line-tile-title-horizontal-spacing;
color: var(--sapButton_TextColor);
display: inline;
-webkit-line-clamp: initial;

@include fd-rtl() {
margin-right: 0;
margin-left: $fd-line-tile-title-horizontal-spacing;
}
}

&.#{$block}--compact {
min-height: $fd-line-tile-height-compact;
max-height: $fd-line-tile-height-compact;

.#{$block}__title,
.#{$block}__subtitle {
line-height: 1.4375rem;
}

.#{$block}__title {
margin-right: $fd-line-tile-title-horizontal-spacing-compact;

@include fd-rtl() {
margin-right: 0;
margin-left: $fd-line-tile-title-horizontal-spacing-compact;
}
}
}

&.#{$block}--action {
padding-right: 0;

@include fd-rtl() {
padding-left: 0;
padding-right: $fd-line-tile-horizontal-padding;
}

.#{$block}__action-container {
@include fd-reset();
@include fd-flex-vertical-center();

margin-left: $fd-line-tile-action-container-horizontal-spacing;

@include fd-rtl() {
margin-left: 0;
margin-right: $fd-line-tile-action-container-horizontal-spacing;
}
}

.#{$block}__action-indicator {
@include reset-position-absolute();

margin: 0;
}

.#{$block}__action-close {
@include set-height(1.625rem);
@include reset-position-absolute();

padding: 0 0.25rem;

&::before {
margin: 0;
}

&::after {
content: none;
}

@include fd-focus() {
@include buttonFocus();
}
}
}

.#{$fd-namespace}-badge {
@include reset-position-absolute();

margin-right: $fd-line-tile-badge-horizontal-spacing;
flex-shrink: 0;

@include fd-rtl() {
margin-left: $fd-line-tile-badge-horizontal-spacing;
margin-right: 0;
}
}
}
}

0 comments on commit c38c9de

Please sign in to comment.