Skip to content

Commit

Permalink
add a story for todo custom properties (#2412)
Browse files Browse the repository at this point in the history
Co-authored-by: Musale Martin <[email protected]>
  • Loading branch information
Mnickii and musale authored Jun 7, 2023
1 parent 08819b1 commit ff5ea0b
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 52 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);

input {
flex: 1 1 auto;
background-color: set-var(background-color-sub1, $theme-default, $common);
background-color: $task-background-color;
}
}

Expand Down Expand Up @@ -143,7 +143,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
margin: var(--task-margin, 0 0 0 0);
padding: var(--task-padding, 0 0 0 0);
background-color: $task-background-color;
border: set-var(border, $theme-default, $tasks);
border: $task-border;
border-radius: 8px;

.task-content {
Expand All @@ -155,7 +155,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
left: 0;
right: 0;
bottom: 0;
background-color: set-var(background-color-sub1, $theme-default, $common);
background-color: $task-background-color;
}

.task-details-container {
Expand All @@ -167,7 +167,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
-ms-grid-rows: auto auto auto auto;
justify-content: space-between;
align-items: flex-start;
color: $detail-color;
color: $task-detail-color;
font-size: 12px;
font-weight: 600;
white-space: normal;
Expand All @@ -183,7 +183,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
}

.task-title {
color: $title-color;
color: $task-color;
font-size: 14px;
font-weight: 600;
grid-row: 1;
Expand Down Expand Up @@ -310,14 +310,14 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
margin-right: 4px;

path {
fill: $detail-color;
fill: $task-detail-color;
}
}

span,
select {
vertical-align: middle;
color: set-var(color__sub2, $theme-default, $common);
color: $task-color;
}

.task-icon {
Expand All @@ -326,7 +326,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
}

.people {
color: $detail-color;
color: $task-detail-color;
font-size: 16px;
}

Expand All @@ -335,10 +335,10 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
}

.picker {
background-color: set-var(background-color-sub1, $theme-default, $common);
background-color: $task-background-color;
background-clip: padding-box;
width: var(--mgt-flyout-set-width, 350px);
color: $detail-color;
color: $task-detail-color;

.people-picker {
--separator-margin: 0px 10px 0px 10px;
Expand All @@ -347,9 +347,9 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);

input,
select {
color: $detail-color;
color: $task-detail-color;
font-size: 0.9em;
background-color: set-var(background-color-sub1, $theme-default, $common);
background-color: $task-background-color;
}
}
}
Expand All @@ -373,7 +373,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);

.task-content .task-details-container .task-title {
text-decoration: line-through;
color: set-var(color__sub3, $theme-default, $common);
color: $task-color;
}
}

Expand All @@ -384,7 +384,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
height: 18px;
border-radius: $task-icon-border-radius;
border: $task-icon-border;
color: set-var(icon__color, $theme-default, $tasks);
color: $task-color;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -410,12 +410,12 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
}

&.complete {
background: $task-background-color--completed;
border: set-var(border--completed, $theme-default, $tasks);
background: $task-background-color-completed;
border: $task-border-completed;

.task-content .task-details-container .task-title {
text-decoration: line-through;
color: set-var(color__sub3, $theme-default, $common);
color: $task-color;
}
}

Expand Down Expand Up @@ -478,7 +478,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
border-bottom: 1px solid $ms-color-gray40;
outline: none;
border-radius: 0;
background-color: set-var(background-color-sub1, $theme-default, $common);
background-color: $task-background-color;
}

input:hover {
Expand Down Expand Up @@ -574,11 +574,11 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
}

.task-cancel {
color: $button-color-cancel;
color: $task-button-color-cancel;
}

&.disabled .task-add {
color: $button-color-cancel;
color: $task-button-color-cancel;
background: var(--task-new-add-button-disabled-background, #fff);
cursor: default;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,40 +7,15 @@

@import '../../styles/shared-sass-variables';

$title-color: var(--task-title-color, set-var(title__color__subtitle, $theme-default, $common));
$button-color-cancel: var(--task-new-cancel-button-color, set-var(color__sub1, $theme-default, $common));
$detail-color: var(--task-detail-color, set-var(color__sub2, $theme-default, $common));
$task-button-color-cancel: #{var(--task-new-cancel-button-color, var(--neutral-foreground-rest))};
$task-detail-color: #{var(--task-detail-color, var(--neutral-foreground-hint))};
$task-color: #{var(--task-color, var(--neutral-foreground-rest))};
$task-background-color: #{var(--task-background-color, var(--neutral-layer-floating))};
$task-background-color--completed: #{var(--task-complete-background, var(--neutral-layer-1))};
$task-background-color-completed: #{var(--task-complete-background, var(--neutral-layer-1))};
$task-date-input-active-color: #{var(--task-date-input-active-color, var(--accent-fill-rest))};
$task-date-input-hover-color: #{var(--task-date-input-hover-color, var(--neutral-layer-1))};
$task-background-color-hover: #{var(--task-background-color-hover, var(--neutral-fill-hover))};
$task-box-shadow: #{var(--task-box-shadow, var(--elevation-shadow-card-active))};
$task-border: #{var(--task-border, var(--neutral-stroke-input-active))};
$task-border-completed: #{var(--task-border-completed, var(--neutral-stroke-input-active))};
$task-radio-background-color: #{var(--task-radio-background-color, var(--accent-fill-rest))};
$tasks: (
border: (
_var: --task-border,
light: 1px solid $background-color-sub3--light,
dark: 1px solid $background-color-sub3--dark
),
border--completed: (
_var: --task-complete-border,
light: 2px dotted $background-color-sub3--light,
dark: 2px dotted $background-color-sub3--dark
),
button__background-color--disabled: (
_var: --task-new-add-button-disabled-background,
light: $gray30,
dark: $gray140
),
icon__color: (
_var: --task-icon-color,
light: $text-color-main--light,
dark: $text-color-main--dark
)
);

@include create-themes($tasks);
$task-radio-background-color: #{var(--task-radio-background-color, var(--accent-fill-rest))};
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
&.complete {
text-decoration: line-through;
border: 1px solid $task-border-completed;
background: $task-background-color--completed;
background: $task-background-color-completed;
}

&:hover {
Expand Down
2 changes: 1 addition & 1 deletion stories/components/todo/todo.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default {
}
};

export const tasks = () => html`
export const todos = () => html`
<mgt-todo></mgt-todo>
`;

Expand Down
40 changes: 40 additions & 0 deletions stories/components/todo/todo.style.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/

import { html } from 'lit';
import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
import { defaultDocsPage } from '../../../.storybook/story-elements/defaultDocsPage';

export default {
title: 'Components / mgt-todo',
component: 'todo',
decorators: [withCodeEditor],
parameters: {
docs: {
page: defaultDocsPage,
source: { code: '<mgt-todo></mgt-todo>' }
}
}
};

export const customCSSProperties = () => html`
<style>
.todo {
--task-color: black;
--task-background-color: white;
--task-complete-background-color: grey;
--task-date-input-active-color: blue;
--task-date-input-hover-color: green;
--task-background-color-hover: grey;
--task-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
--task-border: 1px solid black;
--task-border-completed: 1px solid grey;
--task-radio-background-color: green;
}
</style>
<mgt-todo class="todo"></mgt-todo>
`;
2 changes: 1 addition & 1 deletion stories/overview.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ The components are also available as [React components](https://learn.microsoft.
| [Get](?path=/story/components-mgt-get--get-email) | Make a GET query to any Microsoft Graph API directly in your HTML. |
| [Teams Channel picker](?path=/story/components-mgt-teams-channel-picker--teams-channel-picker) | Provides the ability to search for Microsoft Teams channels to select a channel from a rendered list of results. |
| [Theme toggle](?path=/story/components-mgt-theme-toggle--user-preference-driven) | Provides the ability to toggle between light and dark themes. |
| [To Do](?path=/story/components-mgt-todo--tasks) | Displays and enables adding, removing, completing, or editing of tasks from Microsoft To Do. |
| [To Do](?path=/story/components-mgt-todo--todos) | Displays and enables adding, removing, completing, or editing of tasks from Microsoft To Do. |
| [Tasks](?path=/story/components-mgt-tasks--tasks) | Displays and enables adding, removing, completing, or editing of tasks from Microsoft Planner or Microsoft To Do. |

#### Providers
Expand Down

0 comments on commit ff5ea0b

Please sign in to comment.