Skip to content

Commit

Permalink
fix: icon color in disabled button
Browse files Browse the repository at this point in the history 
Signed-off-by: stsogoo <stsogoo@vmware.com>
  • Loading branch information
@Shijir
Shijir committed Feb 22, 2022
1 parent d724a90 commit 2e68a8b
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 60 deletions.
2 changes: 1 addition & 1 deletion apps/shim-clr-ui/angular.json
View file
Expand Up @@ -37,7 +37,7 @@
"node_modules/@cds/city/css/bundles/default.min.css",
"node_modules/@clr/ui/clr-ui.min.css",

"node_modules/@cds/core/styles/module.tokens.min.css",
"node_modules/@cds/core/global.min.css",
"node_modules/@cds/core/styles/shim.clr-ui.min.css",
"node_modules/@cds/core/styles/theme.dark.min.css",
"src/styles.scss"
Expand Down
18 changes: 17 additions & 1 deletion apps/shim-clr-ui/src/app/app.module.ts
View file
Expand Up @@ -3,7 +3,18 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { angleIcon, cogIcon, ClarityIcons, sunIcon, worldIcon, atomIcon } from '@cds/core/icon';
import {
angleIcon,
cogIcon,
ClarityIcons,
sunIcon,
worldIcon,
atomIcon,
plusIcon,
pencilIcon,
downloadIcon,
timesIcon,
} from '@cds/core/icon';
import { CdsIconModule } from '@cds/angular/icon';
import { CdsAccordionModule } from '@cds/angular/accordion';
import { CdsAlertModule } from '@cds/angular/alert';
Expand Down Expand Up @@ -83,5 +94,10 @@ export class AppModule {
ClarityIcons.addIcons(sunIcon);
ClarityIcons.addIcons(atomIcon);
ClarityIcons.addIcons(worldIcon);

ClarityIcons.addIcons(plusIcon);
ClarityIcons.addIcons(pencilIcon);
ClarityIcons.addIcons(downloadIcon);
ClarityIcons.addIcons(timesIcon);
}
}
72 changes: 52 additions & 20 deletions apps/shim-clr-ui/src/app/overview/overview.component.html
View file
@@ -1,6 +1,6 @@
<h3 cds-layout="m-t:none m-b:lg">Alerts</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<div class="alert alert-danger">
<div class="alert-items">
<div class="alert-item static">
Expand Down Expand Up @@ -82,7 +82,7 @@ <h3 cds-layout="m-t:none m-b:lg">Alerts</h3>

<h3 cds-layout="m-t:lg">App level alerts</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<clr-alert clrAlertType="info" [clrAlertAppLevel]="true" cds-layout="m-b:md">
<clr-alert-item>
<span class="alert-text"> Lorem ipsum dolor sit amet </span>
Expand Down Expand Up @@ -149,7 +149,7 @@ <h3 cds-layout="m-t:lg">App level alerts</h3>

<h3 cds-layout="m-t:lg">Info, Success, Warning and Danger Outline Buttons</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<button class="btn btn-info-outline">Info</button>
<button class="btn btn-success-outline">Success</button>
<button class="btn btn-warning-outline">Warning</button>
Expand All @@ -158,7 +158,7 @@ <h3 cds-layout="m-t:lg">Info, Success, Warning and Danger Outline Buttons</h3>

<h3 cds-layout="m-t:lg">Info, Success, Warning and Danger Outline Disabled Buttons</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<button disabled class="btn btn-info-outline">Info</button>
<button disabled class="btn btn-success-outline">Success</button>
<button disabled class="btn btn-warning-outline">Warning</button>
Expand All @@ -167,7 +167,7 @@ <h3 cds-layout="m-t:lg">Info, Success, Warning and Danger Outline Disabled Butto

<h3 cds-layout="m-t:lg">Primary, Success, Warning and Danger Buttons</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
Expand All @@ -176,23 +176,55 @@ <h3 cds-layout="m-t:lg">Primary, Success, Warning and Danger Buttons</h3>

<h3 cds-layout="m-t:lg">Primary, Success, Warning and Danger Disabled Buttons</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<button disabled class="btn btn-primary">Disabled Info</button>
<button disabled class="btn btn-success">Disabled Success</button>
<button disabled class="btn btn-warning">Disabled Warning</button>
<button disabled class="btn btn-danger">Disabled Danger</button>
</div>

<h3 cds-layout="m-t:lg">Button Group</h3>

<div cds-layout="m-t:md" class="btn-group btn-sm">
<button class="btn btn-primary"><cds-icon shape="plus"></cds-icon> Add</button>
<button class="btn btn-primary"><cds-icon shape="pencil"></cds-icon> Edit</button>
<button class="btn btn-primary"><cds-icon shape="download"></cds-icon> Download</button>
<button class="btn btn-primary"><cds-icon shape="times"></cds-icon> Delete</button>
</div>

<div cds-layout="m-t:md" class="btn-group btn-sm">
<button class="btn btn-primary"><cds-icon shape="plus"></cds-icon> Add</button>
<button class="btn btn-primary" disabled><cds-icon shape="pencil"></cds-icon> Edit</button>
<button class="btn btn-primary"><cds-icon shape="download"></cds-icon> Download</button>
<button class="btn btn-primary" disabled><cds-icon shape="times"></cds-icon> Delete</button>
</div>

<h3 cds-layout="m-t:lg">Outline Button Group</h3>

<div cds-layout="m-t:md" class="btn-group btn-outline-primary btn-sm">
<button class="btn"><cds-icon shape="plus"></cds-icon> Add</button>
<button class="btn"><cds-icon shape="pencil"></cds-icon> Edit</button>
<button class="btn"><cds-icon shape="download"></cds-icon> Download</button>
<button class="btn"><cds-icon shape="times"></cds-icon> Delete</button>
</div>

<div cds-layout="m-t:md" class="btn-group btn-outline-primary btn-sm">
<button class="btn"><cds-icon shape="plus"></cds-icon> Add</button>
<button class="btn" disabled><cds-icon shape="pencil"></cds-icon> Edit</button>
<button class="btn"><cds-icon shape="download"></cds-icon> Download</button>
<button class="btn" disabled><cds-icon shape="times"></cds-icon> Delete</button>
</div>

<h3 cds-layout="m-t:lg">Label colors</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<span class="label">Seattle</span>
<span class="label label-purple">Austin</span>
<span class="label label-blue">New York</span>
<span class="label label-orange">Palo Alto</span>
<span class="label label-light-blue">San Francisco</span>
</div>
<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<span class="label label-1">Seattle</span>
<span class="label label-2">Austin</span>
<span class="label label-3">New York</span>
Expand All @@ -202,7 +234,7 @@ <h3 cds-layout="m-t:lg">Label colors</h3>

<h3 cds-layout="m-t:lg">Labels statuses</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<span class="label label-info">Info</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
Expand All @@ -211,7 +243,7 @@ <h3 cds-layout="m-t:lg">Labels statuses</h3>

<h3 cds-layout="m-t:lg">Labels with badges</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<a href="javascript://" class="label label-purple clickable"
>Austin
<span class="badge">1</span>
Expand Down Expand Up @@ -256,15 +288,15 @@ <h3 cds-layout="m-t:lg">Labels with badges</h3>

<h3 cds-layout="m-t:lg">Spinner</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<span class="spinner spinner-sm"> Loading... </span>
<span class="spinner spinner-md"> Loading... </span>
<span class="spinner spinner-lg"> Loading... </span>
</div>

<h3 cds-layout="m-t:lg">Card</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<a href="#" class="card clickable">
<div class="card-block">
<h3 class="card-title">Title</h3>
Expand All @@ -281,7 +313,7 @@ <h3 class="card-title">Title</h3>

<h3 cds-layout="m-t:lg">Progress bar</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<h6>Labeled, Static Progress Bar</h6>
<div class="progress-static labeled">
<div class="progress-meter" data-value="55" data-displayval="Loaded 55%"></div>
Expand All @@ -301,7 +333,7 @@ <h6>Green Static Progress Bar</h6>

<h3 cds-layout="m-t:lg">Dropdown</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<clr-dropdown>
<button class="btn btn-outline-primary" clrDropdownTrigger>
Dropdown
Expand Down Expand Up @@ -331,7 +363,7 @@ <h3 cds-layout="m-t:lg">Dropdown</h3>

<h3 cds-layout="m-t:lg">Timeline</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<clr-timeline>
<clr-timeline-step [clrState]="timelineState.NOT_STARTED">
<clr-timeline-step-header>11:59 am</clr-timeline-step-header>
Expand Down Expand Up @@ -372,7 +404,7 @@ <h3 cds-layout="m-t:lg">Timeline</h3>

<h3 cds-layout="m-t:lg">Tabs</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<clr-tabs>
<clr-tab>
<button clrTabLink id="link1">Right Toggle Switches</button>
Expand Down Expand Up @@ -423,7 +455,7 @@ <h3 cds-layout="m-t:lg">Tabs</h3>
</clr-tabs>
</div>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<clr-tabs clrLayout="vertical">
<clr-tab>
<button clrTabLink id="link1">Header typography</button>
Expand Down Expand Up @@ -455,7 +487,7 @@ <h6 cds-layout="m:none">The quick brown fox jumps over the lazy dog</h6>

<h3 cds-layout="m-t:lg">Stack View</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<clr-stack-view>
<clr-stack-block>
<clr-stack-label>Label 1</clr-stack-label>
Expand Down Expand Up @@ -496,7 +528,7 @@ <h3 cds-layout="m-t:lg">Stack View</h3>

<h3 cds-layout="m-t:lg">Table</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -537,7 +569,7 @@ <h3 cds-layout="m-t:lg">Table</h3>

<h3 cds-layout="m-t:lg">Forms</h3>

<div cds-layout="m-y:md">
<div cds-layout="m-t:md">
<ng-template #fields>
<form clrForm [formGroup]="model" #inputSuccessVertical>
<clr-input-container>
Expand Down
68 changes: 31 additions & 37 deletions apps/shim-clr-ui/yarn.lock
View file
Expand Up @@ -1444,7 +1444,7 @@
to-fast-properties "^2.0.0"

"@cds/angular@../../dist/angular":
version "6.0.0-next.3"
version "6.0.0-next.4"
dependencies:
jsdom "^16.5.3"
tslib "^2.0.0"
Expand All @@ -1455,14 +1455,13 @@
integrity sha512-S9K+Q39BGOghyLHmR0Wdcmu1i1noSUk8HcvMj+3IaohZw02WFd99aPTQDHJeseXrXZP3CNovaSlePI0R11NcFg==

"@cds/core@../../dist/core":
version "6.0.0-next.3"
version "6.0.0-next.4"
dependencies:
lit "2.0.0-rc.2"
ramda "^0.27.1"
tslib "^2.2.0"
lit "^2.1.3"
ramda "^0.28.0"
tslib "^2.3.1"
optionalDependencies:
"@cds/city" "^1.1.0"
"@types/resize-observer-browser" "^0.1.5"
modern-normalize "1.1.0"

"@clr/angular@^13.0.0":
Expand Down Expand Up @@ -1513,10 +1512,10 @@
resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz#3fdf5798f0b49e90155896f6291df186eac06c83"
integrity sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==

"@lit/reactive-element@^1.0.0", "@lit/reactive-element@^1.0.0-rc.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.0.2.tgz#daa7a7c7a6c63d735f0c9634de6b7dbd70a702ab"
integrity sha512-oz3d3MKjQ2tXynQgyaQaMpGTDNyNDeBdo6dXf1AbjTwhA1IRINHmA7kSaVYv9ttKweNkEoNqp9DqteDdgWzPEg==
"@lit/reactive-element@^1.3.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.3.0.tgz#c85c5a5fea41d7230e52fb9017307f473ab947ea"
integrity sha512-0TKSIuJHXNLM0k98fi0AdMIdUoHIYlDHTP+0Vruc2SOs4T6vU1FinXgSvYd8mSrkt+8R+qdRAXvjpqrMXMyBgw==

"@ngtools/webpack@13.0.4":
version "13.0.4"
Expand Down Expand Up @@ -1686,11 +1685,6 @@
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==

"@types/resize-observer-browser@^0.1.5":
version "0.1.6"
resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz#d8e6c2f830e2650dc06fe74464472ff64b54a302"
integrity sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==

"@types/retry@^0.12.0":
version "0.12.1"
resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.1.tgz#d8f1c0d0dc23afad6dc16a9e993a0865774b4065"
Expand Down Expand Up @@ -4445,29 +4439,29 @@ lines-and-columns@^1.1.6:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==

lit-element@^3.0.0-rc.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.0.2.tgz#6422b68ba166a32695f524d6f3eb41712610bf50"
integrity sha512-9vTJ47D2DSE4Jwhle7aMzEwO2ZcOPRikqfT3CVG7Qol2c9/I4KZwinZNW5Xv8hNm+G/enSSfIwqQhIXi6ioAUg==
lit-element@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.0.tgz#9c981c55dfd9a8f124dc863edb62cc529d434db7"
integrity sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==
dependencies:
"@lit/reactive-element" "^1.0.0"
lit-html "^2.0.0"
"@lit/reactive-element" "^1.3.0"
lit-html "^2.2.0"

lit-html@^2.0.0, lit-html@^2.0.0-rc.3:
version "2.0.2"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.0.2.tgz#6a17caac4135757710c5fb3e4becc622c476e431"
integrity sha512-dON7Zg8btb14/fWohQLQBdSgkoiQA4mIUy87evmyJHtxRq7zS6LlC32bT5EPWiof5PUQaDpF45v2OlrxHA5Clg==
lit-html@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.0.tgz#99345d944611e34543cd9f153d8cc3163b8bbab8"
integrity sha512-dJnevgV8VkCuOXLWrjQopDE8nSy8CzipZ/ATfYQv7z7Dct4abblcKecf50gkIScuwCTzKvRLgvTgV0zzagW4gA==
dependencies:
"@types/trusted-types" "^2.0.2"

lit@2.0.0-rc.2:
version "2.0.0-rc.2"
resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.0-rc.2.tgz#724a2d621aa098001d73bf7106f3a72b7b5948ef"
integrity sha512-BOCuoJR04WaTV8UqTKk09cNcQA10Aq2LCcBOiHuF7TzWH5RNDsbCBP5QM9sLBSotGTXbDug/gFO08jq6TbyEtw==
lit@^2.1.3:
version "2.2.0"
resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.0.tgz#1b83a2c1e4c5ecf3be785292b1a13e193597f610"
integrity sha512-FDyxUuczo6cJJY/2Bkgfh1872U4ikUvmK1Cb6+lYC1CW+QOo8CaWXCpvPKFzYsz0ojUxoruBLVrECc7VI2f1dQ==
dependencies:
"@lit/reactive-element" "^1.0.0-rc.2"
lit-element "^3.0.0-rc.2"
lit-html "^2.0.0-rc.3"
"@lit/reactive-element" "^1.3.0"
lit-element "^3.2.0"
lit-html "^2.2.0"

loader-runner@^4.2.0:
version "4.2.0"
Expand Down Expand Up @@ -5753,10 +5747,10 @@ queue-microtask@^1.2.2:
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==

ramda@^0.27.1:
version "0.27.1"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
ramda@^0.28.0:
version "0.28.0"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.28.0.tgz#acd785690100337e8b063cab3470019be427cc97"
integrity sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA==

randombytes@^2.1.0:
version "2.1.0"
Expand Down Expand Up @@ -6579,7 +6573,7 @@ tree-kill@1.2.2:
resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==

tslib@2.3.1, tslib@^2.0.0, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1:
tslib@2.3.1, tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
Expand Down
8 changes: 7 additions & 1 deletion packages/core/src/styles/shim.clr-ui.scss
View file
Expand Up @@ -257,7 +257,7 @@

// For theme-able icon button color
--clr-btn-icon-disabled-color: var(
--cds-global-typography-color-100
--cds-alias-status-disabled-tint
); // var(--clr-btn-default-disabled-color, #{$clr-btn-default-disabled-color});

// Button groups
Expand Down Expand Up @@ -884,4 +884,10 @@
.btn:disabled {
opacity: 1;
}
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger {
--clr-btn-icon-disabled-color: var(--cds-global-typography-color-100);
}
}

0 comments on commit 2e68a8b

Please sign in to comment.