message:
return in initialization
return in initialization

diff:
-// Copyright 2020 Google Inc.
+// Copyright 2020 Google LLC.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
NSLog(@"Requesting Unity rewarded ad with placement: %@", _placementID);
if (!_gameID || !_placementID) {
if (_adLoadCompletionHandler) {
- NSError *error = GADMAdapterUnityErrorWithCodeAndDescription(GADMAdapterUnityErrorInvalidServerParameters, kMISSING_ID_ERROR);
- _adLoadCompletionHandler(nil, error);
- _adLoadCompletionHandler = nil;
- }
- return;
- }
-
- if (![UnityAds isSupported]) {
- NSString *description =
- [[NSString alloc] initWithFormat:@"%@ is not supported for this device.",
- NSStringFromClass([UnityAds class])];
- if (_adLoadCompletionHandler) {
- NSError *error = GADMAdapterUnityErrorWithCodeAndDescription(GADMAdapterUnityErrorDeviceNotSupported, description);
+ NSError *error = GADMAdapterUnityErrorWithCodeAndDescription(GADMAdapterUnityErrorInvalidServerParameters, @"Game ID and Placement ID cannot be nil.");
_adLoadCompletionHandler(nil, error);
_adLoadCompletionHandler = nil;
}

diff:
-// Copyright 2020 Google Inc.
+// Copyright 2020 Google LLC.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
- (void)initializeWithGameID:(NSString *)gameID withInitDelegate:(id)initDelegate{
if (![UnityAds isSupported]) {
- NSLog(@"Unity Ads cannot be initialized: this device is not supported.");
+ NSString *message =
+ [[NSString alloc] initWithFormat:@"%@ is not supported for this device.",
+ NSStringFromClass([UnityAds class])];
+ [initDelegate initializationFailed:(kUnityInitializationErrorInternalError) withMessage:message];
+ return;
}
if ([UnityAds isInitialized]) {
NSLog(@"Unity Ads has already been initialized.");
+ [initDelegate initializationComplete];
+ return;
}
// Metadata needed by Unity Ads SDK before initialization.

diff:
-// Copyright 2020 Google Inc.
+// Copyright 2020 Google LLC.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
- (void)unityAdsDidStart:(nonnull NSString *)placementId {
// nothing to do
+ //todo: double check if impression need this
}
- (void)unityAdsReady:(nonnull NSString *)placementId {


message:
remove redundent callbacks to networkConnector
remove redundent callbacks to networkConnector

change_type: MODIFY

diff:
}
- (void)presentInterstitialFromRootViewController:(UIViewController *)rootViewController {
- id<GADMAdNetworkConnector> strongConnector = _networkConnector;
- if (strongConnector) {
- [strongConnector adapterWillPresentInterstitial:self];
- }
[_interstitialAd presentInterstitialFromRootViewController:rootViewController];
}

license: Apache License 2.0


message: Updated with FAN 6.3.1

diff:
## Facebook iOS Mediation Adapter Changelog
+#### Version 6.3.1.0
+- Verified compatibility with FAN SDK 6.3.1.
+
+Built and tested with
+- Google Mobile Ads SDK version 8.1.0.
+- FAN SDK version 6.3.1.
+
#### Version 6.3.0.0
- Verified compatibility with FAN SDK 6.3.0.
- Now requires Google Mobile Ads SDK version 8.1.0 or higher.

diff:
// limitations under the License.
/// Facebook mediation network adapter version.
-static NSString *const kGADMAdapterFacebookVersion = @"6.3.0.0";
+static NSString *const kGADMAdapterFacebookVersion = @"6.3.1.0";
static NSString *const kGADMAdapterFacebookOpenBiddingPubID = @"placement_id";

original_message: Updated with FAN 6.3.1


message: fix(tables): capitalize magic keys

diff:
@@ -150,8 +150,8 @@ class ResponsiveTable extends mixin(createComponent, initComponent, eventedState
*/
placeOverflow = (evt) => {
const MAGIC = {
- top: 5,
- right: 38,
+ TOP: 5,
+ RIGHT: 38,
};
const { element, optionMenu } = evt.detail;

repo: carbon-design-system/carbon

original_message: fix(tables): capitalize magic keys (#2218)


message: docs(gettingstarted): remove old link on releases

diff:
@@ -88,13 +88,7 @@ $ bower install bluemix-components --save
## Download
-Download the latest version of Bluemix Components (`6.7.0`).
-
-* [Download .zip](https://github.ibm.com/Bluemix/bluemix-components/archive/6.7.0.zip)
-* [Download tar.gz](https://github.ibm.com/Bluemix/bluemix-components/archive/6.7.0.tar.gz)
-
-See [tags](https://github.ibm.com/Bluemix/bluemix-components/tags) on GitHub Enterprise for older versions.
-See [releases](https://github.ibm.com/Bluemix/bluemix-components/releases) for release notes and changelogs.
+Download the latest version of Bluemix Components from the [releases](https://github.ibm.com/Bluemix/bluemix-components/releases) page.
## Bluemix Boilerplate


diff:
@@ -39,7 +39,7 @@ const cloptions = require('minimist')(process.argv.slice(2), {
* BrowserSync
*/
-gulp.task('browser-sync', () => {
+gulp.task('browser-sync', ['build:dev'], () => {
browserSync.init({
logPrefix: 'Carbon Components',
open: false,
@@ -59,6 +59,7 @@ gulp.task('clean', () => del([
'es',
'umd',
'scripts',
+ 'html',
'dist',
'demo/**/*.{js,map}',
'!demo/js/demo-switcher.js',
@@ -186,6 +187,13 @@ gulp.task('sass:source', () => {
.pipe(gulp.dest('sass'));
});
+gulp.task('html:source', () => {
+ const srcFiles = './src/components/**/*.html';
+
+ return gulp.src(srcFiles)
+ .pipe(gulp.dest('html'));
+});
+
/**
* Lint
*/
@@ -245,7 +253,7 @@ gulp.task('build:scripts', ['scripts:umd', 'scripts:es', 'scripts:compiled']);
gulp.task('build:styles', ['sass:compiled', 'sass:source']);
// Mapped to npm run build
-gulp.task('build', ['build:scripts', 'build:styles']);
+gulp.task('build', ['build:scripts', 'build:styles', 'html:source']);
// For demo environment
gulp.task('build:dev', ['sass:dev', 'scripts:dev']);

diff:
-import debounce from 'lodash-es/debounce';
+import debounce from 'lodash.debounce';
import mixin from '../../globals/js/misc/mixin';
import createComponent from '../../globals/js/mixins/create-component';
import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';

diff:
+const commonjs = require('rollup-plugin-commonjs');
const resolve = require('rollup-plugin-node-resolve');
const babel = require('rollup-plugin-babel');
@@ -7,8 +8,16 @@ module.exports = {
moduleName: 'CarbonComponents',
plugins: [
resolve(),
+ commonjs({
+ include: 'node_modules/**',
+ sourceMap: false,
+ }),
babel({
- exclude: 'node_modules/**', // only transpile our source code
+ exclude:
+ [
+ 'node_modules/**',
+ ], // only transpile our source code
+
}),
],
dest: 'scripts/carbon-components.js',

original_message: fix(build): commonjs fix, put html files into the distribution (#2452)


message: chore(build): rc3 bump

diff:
{
"name": "carbon-components",
- "version": "7.0.0-rc.2",
- "description": "Bluemix Components is a component library for Bluemix",
+ "version": "7.0.0-rc.3",
+ "description": "Carbon Components is a component library for Carbon",
"main": "umd/index.js",
"module": "es/index.js",
"maintainers": [
"src/**/*"
],
"keywords": [
- "bluemix",
+ "carbon",
"component",
"components",
"css",

original_message: chore(build): rc3 bump (#2453)


diff:
@@ -158,7 +158,7 @@ gulp.task('sass:compiled', () => {
filePath.extname = `.min${filePath.extname}`;
}
}))
- .pipe(sourcemaps.write())
+ .pipe(sourcemaps.write('./'))
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
}

original_message: fix(build): write sourcemaps to an external file (#2459)


message: chore(build): update to 7.1.0

diff:
"name": "carbon-components",
"description": "Carbon Components is a component library for IBM Cloud",
"homepage": "http://carbondesignsystem.com/",
- "version": "7.0.0",
+ "version": "7.1.0",
"module": "es/index.js",
"main": "umd/index.js",
"repository": {

original_message: chore(build): update to 7.1.0


message: chore(build): add semantic release

diff:
"name": "carbon-components",
"description": "Carbon Components is a component library for IBM Cloud",
"homepage": "http://carbondesignsystem.com/",
- "version": "7.1.0",
+ "version": "0.0.0-development",
"module": "es/index.js",
"main": "umd/index.js",
"repository": {
"svgxuse": "1.1.22",
"validate-commit-msg": "^2.8.2",
"vinyl-named": "^1.1.0",
- "webpack": "^2.0.0"
+ "webpack": "^2.0.0",
+ "semantic-release": "^6.3.2"
},
"files": [
"css/**/*",
"start": "node server.js",
"test": "gulp test",
"test:a11y": "gulp test:a11y",
- "test:unit": "gulp test:unit"
+ "test:unit": "gulp test:unit",
+ "semantic-release": "semantic-release pre && npm publish && semantic-release post"
},
"license": "Apache-2",
"config": {

original_message: chore(build): add semantic release


message: chore(build): semantic-release configuration

diff:
language: node_js
+
cache:
directories:
- node_modules
+
node_js:
- "6"
+
dist: trusty
addons:
@@ -11,6 +14,7 @@ addons:
packages:
- google-chrome-stable
firefox: "latest-esr"
+
before_install:
- if [[ -n "${AAT_TOKEN}" ]]; then sed -e "s|\${AAT_TOKEN}|$AAT_TOKEN|g" < .aat.yml.src > .aat.yml; fi
- tar -xjf /tmp/firefox-latest-esr.tar.bz2 --directory /tmp
@@ -18,6 +22,7 @@ before_install:
- export CHROME_BIN=google-chrome
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
+
install:
- npm prune
- npm install || (cat npm-debug.log; false)
@@ -29,3 +34,10 @@ script:
- find tests/spec -name "*.js" ! -name left-nav_spec.js -print0 | xargs -0 -n 1 -P 1 npm run test:unit -- -d -f
- if [[ -n "${AAT_TOKEN}" ]]; then (npm run test:a11y || true); fi
- npm run lint
+
+after_success:
+ - npm run semantic-release
+
+branches:
+ except:
+ - /^v\d+\.\d+\.\d+$/
\ No newline at end of file

diff:
"module": "es/index.js",
"main": "umd/index.js",
"repository": {
- "type": "git"
+ "type": "git",
+ "url": "https://github.com/carbon-design-system/carbon-components.git"
},
"bugs": {
"url": "https://github.com/carbon-design-system/carbon-components/issues"
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-uglify": "^1.0.1",
"scss-to-json": "1.1.0",
+ "semantic-release": "^6.3.2",
"sinon": "1.17.3",
"sinon-chai": "2.8.0",
"svgxuse": "1.1.22",
"validate-commit-msg": "^2.8.2",
"vinyl-named": "^1.1.0",
- "webpack": "^2.0.0",
- "semantic-release": "^6.3.2"
+ "webpack": "^2.0.0"
},
"files": [
"css/**/*",


message: chore(version): bump to 7.2, prepare for semantic-release to replace

diff:
"name": "carbon-components",
"description": "Carbon Components is a component library for IBM Cloud",
"homepage": "http://carbondesignsystem.com/",
- "version": "0.0.0-development",
+ "version": "7.2.0",
"module": "es/index.js",
"main": "umd/index.js",
"repository": {


diff:
@import '../../globals/scss/import-once';
@include exports('overflow-menu') {
-
.bx--overflow-menu {
@include reset;
position: relative;
- padding: .5rem;
+ width: rem(20px);
+ height: rem(38px);
cursor: pointer;
&:focus {
}
.bx--overflow-menu__icon {
- width: rem(4px);
- height: rem(20px);
+ width: 100%;
+ height: 100%;
+ padding: 0.5rem;
fill: $ui-05;
&:hover,

original_message: fix(overflowmenu): increase icon hit range for react (#209)


message: fix(grid): update grid

diff:
}
[class*="bx--col"] {
- padding: 1rem;
background-color: $color__gray-1;
- border: 10px solid $ui-02;
+
+ p {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+}
+
+.col-example {
+ background-color: rgba(blue, 0.2);
+ height: 100%;
+}
+
+.red {
+ background-color: rgba(red, 0.2);
+}
+
+.green {
+ background-color: rgba(green, 0.2);
+}
+
+.indigo {
+ background-color: rgba(indigo, 0.2);
}

diff:
@@ -24,62 +24,100 @@ app.use(express.static('scripts'));
app.use('/docs/js', express.static('docs/js'));
const getContent = glob =>
- globby(glob)
- .then((filePaths) => {
+ globby(glob).then(filePaths => {
if (filePaths.length === 0) {
return undefined;
}
- return Promise.all(filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' })))
- .then(contents => contents.reduce((a, b) => a.concat(b)));
+ return Promise.all(
+ filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' }))
+ ).then(contents => contents.reduce((a, b) => a.concat(b)));
});
const getEachContent = glob =>
- globby(glob)
- .then((filePaths) => { // eslint-disable-line arrow-body-style
- return Promise.all(filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' })))
- .then(contents => contents.map((content, i) => ({ name: path.basename(filePaths[i], '.html'), content })));
+ globby(glob).then(filePaths => {
+ // eslint-disable-line arrow-body-style
+ return Promise.all(
+ filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' }))
+ ).then(contents =>
+ contents.map((content, i) => ({
+ name: path.basename(filePaths[i], '.html'),
+ content,
+ }))
+ );
});
-const componentDirs = readdir('src/components')
- .then((items) => { // eslint-disable-line arrow-body-style
- return Promise.all(items.map(item => stat(path.resolve('src/components', item))))
- .then(stats => items.filter((item, i) => stats[i].isDirectory()));
+const componentDirs = readdir('src/components').then(items => {
+ // eslint-disable-line arrow-body-style
+ return Promise.all(
+ items.map(item => stat(path.resolve('src/components', item)))
+ ).then(stats => items.filter((item, i) => stats[i].isDirectory()));
});
const topRouteHandler = (req, res) => {
const name = req.params.component;
- if (name && path.relative('src/components', `src/components/${name}`).substr(0, 2) === '..') {
+ if (
+ name &&
+ path.relative('src/components', `src/components/${name}`).substr(0, 2) ===
+ '..'
+ ) {
res.status(404).end();
} else {
componentDirs
- .then((dirs) => { // eslint-disable-line arrow-body-style
- return Promise.all(dirs.map(dir => getEachContent(path.resolve('src/components', dir, '**/*.html'))))
- .then(subItemsList => subItemsList.map((subItems, i) => { // eslint-disable-line arrow-body-style
- return subItems.length > 0 && Object.assign({
+ .then(dirs => {
+ // eslint-disable-line arrow-body-style
+ return Promise.all(
+ dirs.map(dir =>
+ getEachContent(path.resolve('src/components', dir, '**/*.html'))
+ )
+ )
+ .then(subItemsList =>
+ subItemsList.map((subItems, i) => {
+ // eslint-disable-line arrow-body-style
+ return (
+ subItems.length > 0 &&
+ Object.assign(
+ {
name: dirs[i],
- selected: name === dirs[i] || subItems.find(subItem => name === subItem.name),
- }, subItems.length <= 1 ? {
+ selected:
+ name === dirs[i] ||
+ subItems.find(subItem => name === subItem.name),
+ },
+ subItems.length <= 1
+ ? {
content: subItems[0].content,
- } : {}, subItems.length <= 1 ? {} : {
- items: subItems.map(subItem => Object.assign(subItem, { selected: name === subItem.name })),
- });
- }))
+ }
+ : {},
+ subItems.length <= 1
+ ? {}
+ : {
+ items: subItems.map(subItem =>
+ Object.assign(subItem, {
+ selected: name === subItem.name,
+ })
+ ),
+ }
+ )
+ );
+ })
+ )
.then(links => links.filter(Boolean))
- .then((links) => {
+ .then(links => {
if (!name) {
const firstLink = links[0];
- (firstLink.items ? firstLink.items[0] : firstLink).selected = true;
+ (firstLink.items
+ ? firstLink.items[0]
+ : firstLink).selected = true;
}
return links;
});
})
- .then((links) => {
+ .then(links => {
res.render('demo-all', {
links,
});
})
- .catch((error) => {
+ .catch(error => {
console.error(error.stack); // eslint-disable-line no-console
res.status(500).end();
});
@@ -96,7 +134,7 @@ app.get('/components/:component', (req, res) => {
res.status(404).end();
} else {
getContent(glob)
- .then((html) => {
+ .then(html => {
if (typeof html === 'undefined') {
res.status(404).end();
} else {
@@ -105,7 +143,7 @@ app.get('/components/:component', (req, res) => {
});
}
})
- .catch((error) => {
+ .catch(error => {
console.error(error.stack); // eslint-disable-line no-console
res.status(500).end();
});
@@ -118,7 +156,7 @@ app.get('/grid', (req, res) => {
if (path.relative('src/globals', glob).substr(0, 2) === '..') {
res.status(404).end();
} else {
- Promise.all([getContent(glob), allLinks])
+ Promise.all([getContent(glob)])
.then(results => {
if (typeof results[0] === 'undefined') {
res.status(404).end();

diff:
-$gutter-size: 10px;
-$i: 0;
+// map functions
+@function breakpoint($breakpoint) {
+ @if map-has-key($grid-breakpoints, $breakpoint) {
+ @return map-get($grid-breakpoints, $breakpoint);
+ } @else {
+ @warn 'breakpoint: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
+ }
+}
-@mixin column-size($col-num) {
- flex-basis: (100% * $col-num / 12);
- max-width: (100% * $col-num / 12);
+@function gutter($breakpoint) {
+ @if map-has-key($gutter-breakpoints, $breakpoint) {
+ @return map-get($gutter-breakpoints, $breakpoint);
+ } @else {
+ @warn 'gutter: could not find #{$breakpoint} in $gutter-breakpoints map. Please make sure it is defined';
+ }
}
+@function grid-gutter($breakpoint) {
+ @if map-has-key($grid-gutter-breakpoints, $breakpoint) {
+ @return map-get($grid-gutter-breakpoints, $breakpoint);
+ } @else {
+ @warn 'grid-gutter: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
+ }
+}
+
+$max-width: 1600px;
+$columns: 12;
+
+$grid-breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1600px);
+$gutter-breakpoints: (xs: 5px, sm: 10px);
+$grid-gutter-breakpoints: (xs: 3%, sm: 5%);
+
.bx--grid {
- margin: 0 3%;
+ margin-left: grid-gutter('xs');
+ margin-right: grid-gutter('xs');
+ padding-left: gutter('xs');
+ padding-right: gutter('xs');
- @include breakpoint('bp--xs--major') {
- margin: 0 5%;
+ @media (min-width: breakpoint('sm')) {
+ margin-left: grid-gutter('sm');
+ margin-right: grid-gutter('sm');
+ padding-left: gutter('sm');
+ padding-right: gutter('sm');
+ }
+
+ &.max {
+ max-width: $max-width;
}
}
.bx--row {
display: flex;
flex-wrap: wrap;
- margin: 0 $gutter-size * -1;
+ margin: 0 gutter('xs') * -1;
+
+ @media (min-width: breakpoint('sm')) {
+ margin: 0 gutter('sm') * -1;
+ }
}
[class*="bx--col"] {
position: relative;
width: 100%;
min-height: 1px;
- padding: 0 $gutter-size;
-}
+ padding: 0 gutter('xs');
-.bx--col-xs,
-.bx--col-sm,
-.bx--col-md,
-.bx--col-lg {
- flex-basis: 0;
- flex: 1;
- flex-grow: 1;
- max-width: 100%;
+ @media (min-width: breakpoint('sm')) {
+ padding: 0 gutter('sm');
+ }
}
-@while $i <= 12 {
-
+@for $i from 1 through $columns {
.bx--col-xs-#{$i} {
- @include column-size($i);
+ flex-basis: (100% * $i / $columns);
}
-
- @media (min-width: 720px) {
- .bx--col-sm-#{$i} {
- @include column-size($i);
}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @media (min-width: breakpoint($breakpoint)) {
+ .bx--col-#{$breakpoint}-auto {
+ flex: 0 0 auto;
+ width: auto;
}
- @media (min-width: 970px) {
- .bx--col-md-#{$i} {
- @include column-size($i);
+ @for $i from 1 through $columns {
+ .bx--col-#{$breakpoint}-#{$i} {
+ flex-basis: (100% * $i / $columns);
}
}
-
- @media (min-width: 1170px) {
- .bx--col-lg-#{$i} {
- @include column-size($i);
}
}
- $i: $i + 1;
+// deprecated
+$gutter-size: 10px;
+
+@mixin column-size($col-num) {
+ flex-basis: (100% * $col-num / $columns);
+ max-width: (100% * $col-num / $columns);
}
+.bx--col-xs,
+.bx--col-sm,
+.bx--col-md,
+.bx--col-lg {
+ flex-basis: 0;
+ flex: 1;
+ flex-grow: 1;
+ max-width: 100%;
+}

diff:
-
.bx--col-md-8

-
.bx--col-md-4

-

+

-
.bx--col-md-4

-
.bx--col-md-4

-
.bx--col-md-4

+

+

+
Content space for bx--col-xs-12 bx--col-sm-6

-

-
.bx--col-md-3

-
.bx--col-md-6

-
.bx--col-md-3

-

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

-
.bx--col-xs-1

+

+
Full space for bx--col-xs-12 bx--col-sm-6 (columns naturally have padding on them, adding a background color to
+ the column directly will effect the entire column, as opposed to using a child element in the example to the
+ left).

+

+

+
+
Columns also expand to match the vertical size of the rest of the row (see red column)

+

+

+
Background color over entire column, not just content space

+
+

\ No newline at end of file

original_message: fix(grid): update grid (#229)


diff:
@@ -13,7 +13,6 @@ $css--helpers: true;
@import '../search/search';
@include exports('toolbar') {
-
.bx--toolbar {
@include helvetica;
display: flex;
@@ -100,7 +99,8 @@ $css--helpers: true;
}
.bx--toolbar-filter-icon {
- width: 1.2rem;
+ padding-left: 0;
+ padding-right: 0;
}
.bx--toolbar-menu__title {

original_message: fix(toolbar): resolve toolbar icon size issue (#240)


message: chore(readme): update the list

old_path: .all-contributorsrc

new_path: .all-contributorsrc

diff:
"avatar_url": "https://avatars3.githubusercontent.com/u/11670886?v=4",
"profile": "https://github.com/aagonzales",
"contributions": [
- "design"
+ "design",
+ "doc"
]
},
{
"avatar_url": "https://avatars0.githubusercontent.com/u/29312997?v=4",
"profile": "https://github.com/tay-aitken",
"contributions": [
- "design"
+ "design",
+ "doc"
]
},
{
"profile": "http://www.bethanysonefeld.com",
"contributions": [
"design",
- "blog"
+ "blog",
+ "doc"
+ ]
+ },
+ {
+ "login": "tsaitsaitsai",
+ "name": "tsaitsaitsai",
+ "avatar_url": "https://avatars2.githubusercontent.com/u/25189046?v=4",
+ "profile": "https://github.com/tsaitsaitsai",
+ "contributions": [
+ "design",
+ "doc"
+ ]
+ },
+ {
+ "login": "asudoh",
+ "name": "Akira Sudoh",
+ "avatar_url": "https://avatars1.githubusercontent.com/u/1259051?v=4",
+ "profile": "http://streetphoto.jp/",
+ "contributions": [
+ "code",
+ "review",
+ "tool"
]
},
{
"code"
]
},
- {
- "login": "asudoh",
- "name": "Akira Sudoh",
- "avatar_url": "https://avatars1.githubusercontent.com/u/1259051?v=4",
- "profile": "http://streetphoto.jp/",
- "contributions": [
- "code",
- "review",
- "tool"
- ]
- },
{
"login": "leereamsnyder",
"name": "Lee Reamsnyder",

original_message: chore(readme): update the list (#254)


diff:
-

+

Breadcrumb 1

Breadcrumb 4

-

-
+

original_message: fix(a11y): minor markup fix to improve breadcrumb semantics (#263)


change_type: ADD

diff:
+
+

+

+
+ Example Item 1
+
+

+

+
+ Example Item 2
+
+

+

+
+ Example Item 3
+

+ <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+ <path d="M10 0L5 5 0 0z"></path>
+ </svg>
+

+
+

+

+ Example Item 1A
+

+

+ Example Item 1B
+

+

+ Example Item 1C
+

+

+ Example Item 1D
+

+

+

+

+
+ Example Item 4
+

+ <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+ <path d="M10 0L5 5 0 0z"></path>
+ </svg>
+

+
+

+

+ Example Item 2A
+

+

+ Example Item 2B
+

+

+ Example Item 2C
+

+

+ Example Item 2D
+

+

+

+

+
+

+
+ <svg class="bx--interior-left-nav-collapse__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+ <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+ </svg>
+
+

+

diff:
import mixin from '../../globals/js/misc/mixin';
import createComponent from '../../globals/js/mixins/create-component';
-import initComponentBySearch
- from '../../globals/js/mixins/init-component-by-search';
+import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
import eventMatches from '../../globals/js/misc/event-matches';
import toggleClass from '../../globals/js/misc/svg-toggle-class';
@@ -16,31 +15,37 @@ class InteriorLeftNav extends mixin(createComponent, initComponentBySearch) {
constructor(element, options) {
super(element, options);
this.constructor.components.set(this.element, this);
+
+ this.keepOpen =
+ this.element.dataset.keepOpen === undefined
+ ? this.options.keepOpen
+ : Boolean(this.element.dataset.keepOpen);
+
this.hookListItemsEvents();
}
hookListItemsEvents = () => {
- this.element.addEventListener('click', (evt) => {
+ this.element.addEventListener('click', evt => {
const leftNavItem = eventMatches(
evt,
- this.options.selectorLeftNavListItem,
+ this.options.selectorLeftNavListItem
);
const collapseEl = eventMatches(
evt,
- this.options.selectorLeftNavCollapse,
+ this.options.selectorLeftNavCollapse
);
const collapsedBar = eventMatches(
evt,
- `.${this.options.classLeftNavCollapsed}`,
+ `.${this.options.classLeftNavCollapsed}`
);
if (leftNavItem) {
const childItem = eventMatches(
evt,
- this.options.selectorLeftNavNestedListItem,
+ this.options.selectorLeftNavNestedListItem
);
const hasChildren = leftNavItem.classList.contains(
- 'left-nav-list__item--has-children',
+ 'left-nav-list__item--has-children'
);
if (childItem) {
this.addActiveListItem(childItem);
@@ -57,14 +62,14 @@ class InteriorLeftNav extends mixin(createComponent, initComponentBySearch) {
}
});
- this.element.addEventListener('keydown', (evt) => {
+ this.element.addEventListener('keydown', evt => {
const leftNavItemWithChildren = eventMatches(
evt,
- this.options.selectorLeftNavListItemHasChildren,
+ this.options.selectorLeftNavListItemHasChildren
);
const leftNavItem = eventMatches(
evt,
- this.options.selectorLeftNavListItem,
+ this.options.selectorLeftNavListItem
);
if (leftNavItemWithChildren && evt.which === 13) {
@@ -78,16 +83,16 @@ class InteriorLeftNav extends mixin(createComponent, initComponentBySearch) {
addActiveListItem(item) {
[
...this.element.querySelectorAll(this.options.selectorLeftNavListItem),
- ].forEach((currentItem) => {
+ ].forEach(currentItem => {
if (!(item === currentItem)) {
currentItem.classList.remove(this.options.classActiveLeftNavListItem);
}
});
[
...this.element.querySelectorAll(
- this.options.selectorLeftNavNestedListItem,
+ this.options.selectorLeftNavNestedListItem
),
- ].forEach((currentItem) => {
+ ].forEach(currentItem => {
if (!(item === currentItem)) {
currentItem.classList.remove(this.options.classActiveLeftNavListItem);
}
@@ -103,39 +108,45 @@ class InteriorLeftNav extends mixin(createComponent, initComponentBySearch) {
*/
handleNestedListClick(listItem, evt) {
const allNestedItems = [
- ...document.querySelectorAll(
- this.options.selectorLeftNavListItemHasChildren,
+ ...this.element.querySelectorAll(
+ this.options.selectorLeftNavListItemHasChildren
),
];
const isOpen = listItem.classList.contains(
- this.options.classExpandedLeftNavListItem,
+ this.options.classExpandedLeftNavListItem
);
- allNestedItems.forEach((currentItem) => {
+ const list = listItem.querySelector(this.options.selectorLeftNavNestedList);
+ const listItems = [
+ ...list.querySelectorAll(this.options.selectorLeftNavNestedListItem),
+ ];
+
+ if (!this.keepOpen) {
+ allNestedItems.forEach(currentItem => {
if (currentItem !== listItem) {
toggleClass(
currentItem,
this.options.classExpandedLeftNavListItem,
- false,
+ false
);
}
});
+ }
+
if (!('InteriorLeftNavItemLink' in evt.target.dataset)) {
toggleClass(listItem, this.options.classExpandedLeftNavListItem, !isOpen);
}
- const list = listItem.querySelector(this.options.selectorLeftNavNestedList);
- const listItems = [
- ...list.querySelectorAll(this.options.selectorLeftNavNestedListItem),
- ];
- listItems.forEach((item) => {
+
+ // a11y
+ listItems.forEach(item => {
if (isOpen) {
// eslint-disable-next-line no-param-reassign
item.querySelector(
- this.options.selectorLeftNavListItemLink,
+ this.options.selectorLeftNavListItemLink
).tabIndex = -1;
} else {
// eslint-disable-next-line no-param-reassign
item.querySelector(
- this.options.selectorLeftNavListItemLink,
+ this.options.selectorLeftNavListItemLink
).tabIndex = 0;
}
});
@@ -154,8 +165,7 @@ class InteriorLeftNav extends mixin(createComponent, initComponentBySearch) {
this.element.dataset.collapsed = true;
this.element.classList.add(this.options.classLeftNavCollapsing);
- window.setTimeout(
- () => {
+ window.setTimeout(() => {
this.element.classList.remove(this.options.classLeftNavCollapsing);
this.element.classList.add(this.options.classLeftNavCollapsed);
this.element.dispatchEvent(
@@ -163,29 +173,24 @@ class InteriorLeftNav extends mixin(createComponent, initComponentBySearch) {
bubbles: true,
cancelable: true,
detail: { collapsed: true },
- }),
- );
- },
- 250,
+ })
);
+ }, 250);
} else {
this.element.dataset.collapsed = false;
this.element.classList.remove(this.options.classLeftNavCollapsed);
this.element.classList.add(this.options.classLeftNavExpanding);
- window.setTimeout(
- () => {
+ window.setTimeout(() => {
this.element.classList.remove(this.options.classLeftNavExpanding);
this.element.dispatchEvent(
new CustomEvent(this.options.eventAfterLeftNavToggled, {
bubbles: true,
cancelable: true,
detail: { collapsed: false },
- }),
- );
- },
- 250,
+ })
);
+ }, 250);
}
}
};
@@ -214,7 +219,8 @@ class InteriorLeftNav extends mixin(createComponent, initComponentBySearch) {
selectorLeftNavListItem: '[data-interior-left-nav-item]',
selectorLeftNavListItemLink: '[data-interior-left-nav-item-link]',
selectorLeftNavNestedListItem: '[data-interior-left-nav-nested-item]',
- selectorLeftNavListItemHasChildren: '[data-interior-left-nav-with-children]',
+ selectorLeftNavListItemHasChildren:
+ '[data-interior-left-nav-with-children]',
selectorLeftNavCollapse: '[data-interior-left-nav-collapse]',
// CSS Class Selectors
classActiveLeftNavListItem: 'left-nav-list__item--active',
@@ -225,6 +231,8 @@ class InteriorLeftNav extends mixin(createComponent, initComponentBySearch) {
// Event
eventBeforeLeftNavToggled: 'left-nav-beingtoggled',
eventAfterLeftNavToggled: 'left-nav-toggled',
+ // Option
+ keepOpen: false,
};
}

diff:
@@ -3,6 +3,7 @@ import InteriorLeftNav
from '../../src/components/interior-left-nav/interior-left-nav';
import InteriorLeftNavHtml
from '../../src/components/interior-left-nav/interior-left-nav.html';
+import KeepOpen from '../../src/components/interior-left-nav/interior-left-nav-keep-open.html';
describe('Test interior left nav', function () {
describe('Constructor', function () {
@@ -45,6 +46,67 @@ describe('Test interior left nav', function () {
});
});
+ describe('keepOpen', function () {
+ let container;
+ let element;
+ let instance1;
+ let instance2;
+ let instance3;
+
+ beforeEach(function () {
+ container = document.createElement('div');
+ container.innerHTML = InteriorLeftNavHtml;
+ document.body.appendChild(container);
+ element = document.querySelector('[data-interior-left-nav]');
+ });
+
+ it('Should have a default setting of false', function () {
+ instance1 = new InteriorLeftNav(element);
+ expect(instance1.options.keepOpen).to.be.false;
+ document.body.removeChild(container);
+ instance1.release();
+ });
+
+ it('Should accept an option in the constructor to override', function () {
+ instance2 = new InteriorLeftNav(element, {
+ keepOpen: true,
+ });
+ expect(instance2.options.keepOpen).to.be.true;
+ document.body.removeChild(container);
+ instance2.release();
+ });
+
+ it('Should read data-keep-open attribute in the markup to override', function () {
+ document.body.removeChild(container);
+ const container2 = document.createElement('div');
+ container2.innerHTML = KeepOpen;
+ document.body.appendChild(container2);
+ element = document.querySelector('[data-interior-left-nav]');
+ instance3 = new InteriorLeftNav(element);
+ expect(instance3.keepOpen).to.be.true;
+ document.body.removeChild(container2);
+ instance3.release();
+ });
+
+ it('If true, should not remove expanded class from other elements on second open', function () {
+ document.body.removeChild(container);
+ const container2 = document.createElement('div');
+ container2.innerHTML = KeepOpen;
+ document.body.appendChild(container2);
+ element = document.querySelector('[data-interior-left-nav]');
+ instance3 = new InteriorLeftNav(element);
+
+ const nested = document.querySelectorAll('.left-nav-list__item--has-children');
+
+ for (let i = 0; i < nested.length; i += 1) {
+ nested[i].dispatchEvent(new CustomEvent('click', { bubbles: true }));
+ }
+
+ const expanded = document.querySelectorAll('.left-nav-list__item--expanded');
+ expect(expanded.length).to.equal(nested.length);
+ });
+ });
+
describe('addActiveListItem', function () {
let container;
let element;

original_message: feat(ILN): add in keepOpen configuration and tests (#301)


diff:
"karma-mocha-reporter": "~1.1.5",
"karma-rollup-preprocessor": "^5.0.0",
"karma-safari-launcher": "^1.0.0",
- "karma-sauce-launcher": "^1.1.0",
"karma-sinon-chai": "^1.1.0",
"karma-sourcemap-loader": "~0.3.7",
"lolex": "1.4.0",
"validate-commit-msg": "^2.8.2",
"vinyl-named": "^1.1.0"
},
- "files": [
- "css/**/*",
- "es/**/*",
- "html/**/*",
- "scripts/**/*",
- "scss/**/*",
- "src/**/*",
- "umd/**/*"
- ],
+ "files": ["css/**/*", "es/**/*", "html/**/*", "scripts/**/*", "scss/**/*", "src/**/*", "umd/**/*"],
"scripts": {
"build": "gulp build",
"build-dev": "gulp build:dev",
"maxSubjectLength": 100,
"subjectPattern": ".+",
"subjectPatternErrorMsg": "Subject does not match subject pattern!",
- "types": [
- "chore",
- "docs",
- "feat",
- "fix",
- "perf",
- "refactor",
- "revert",
- "style",
- "test"
- ],
+ "types": ["chore", "docs", "feat", "fix", "perf", "refactor", "revert", "style", "test"],
"warnOnFail": false
}
},

diff:
@@ -28,81 +28,12 @@ const cloptions = require('minimist')(process.argv.slice(2), {
b: 'browsers',
f: 'files',
d: 'debug',
- s: 'sauce',
v: 'verbose',
},
boolean: ['debug', 'verbose'],
});
const customLaunchers = {
- sl_chrome_sierra: {
- base: 'SauceLabs',
- platform: 'OS X 10.12',
- browserName: 'chrome',
- },
- sl_chrome_linux: {
- base: 'SauceLabs',
- platform: 'Linux',
- browserName: 'chrome',
- },
- sl_chrome_win7: {
- base: 'SauceLabs',
- platform: 'Windows 7',
- browserName: 'chrome',
- },
- sl_chrome_android: {
- base: 'SauceLabs',
- platform: 'Android',
- browserName: 'chrome',
- },
- sl_firefox_sierra: {
- base: 'SauceLabs',
- platform: 'OS X 10.12',
- browserName: 'firefox',
- version: '45',
- },
- sl_firefox_linux: {
- base: 'SauceLabs',
- platform: 'Linux',
- browserName: 'firefox',
- version: '45',
- },
- sl_firefox_win7: {
- base: 'SauceLabs',
- platform: 'Windows 7',
- browserName: 'firefox',
- version: '45',
- },
- sl_safari_sierra: {
- base: 'SauceLabs',
- platform: 'OS X 10.12',
- browserName: 'safari',
- version: '10',
- },
- sl_safari_elcapitan: {
- base: 'SauceLabs',
- platform: 'OS X 10.11',
- browserName: 'safari',
- version: '10',
- },
- sl_microsoftedge_win10: {
- base: 'SauceLabs',
- version: 14,
- platform: 'Windows 10',
- browserName: 'microsoftedge',
- },
- sl_ie_win10: {
- base: 'SauceLabs',
- version: 11,
- platform: 'Windows 10',
- browserName: 'internet explorer',
- },
- sl_ie_win7: {
- base: 'SauceLabs',
- version: 11,
- platform: 'Windows 7',
- browserName: 'internet explorer',
- },
Chrome_Travis: {
base: 'Chrome',
flags: ['--no-sandbox'],
@@ -113,14 +44,6 @@ const customLaunchers = {
},
};
-const sauceLaunchers = {
- chrome: ['sl_chrome_sierra', 'sl_chrome_linux', 'sl_chrome_win7', 'sl_chrome_android'],
- firefox: ['sl_firefox_sierra', 'sl_firefox_linux', 'sl_firefox_win7'],
- safari: ['sl_safari_sierra', 'sl_safari_elcapitan'],
- microsoftedge: ['sl_microsoftedge_win10'],
- ie: ['sl_ie_win10', 'sl_ie_win7'],
-};
-
const travisLaunchers = {
chrome: 'Chrome_Travis',
};
@@ -128,20 +51,6 @@ const travisLaunchers = {
module.exports = function(config) {
const objectToStringPolyfillPath = require.resolve('core-js/library/modules/es6.object.to-string.js');
- if (cloptions.sauce) {
- if (!process.env.TRAVIS) {
- throw new Error(
- [
- 'You need extra caution when you run Sauce testing locally.',
- 'You can comment out lines here if you know what you are doing.',
- ].join(' ')
- );
- }
- if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) {
- throw new Error('Missing SAUCE_USERNAME or SAUCE_ACCESS_KEY environment variables.');
- }
- }
-
config.set({
basePath: '..',
@@ -236,14 +145,6 @@ module.exports = function(config) {
},
customLaunchers,
-
- sauceLabs: {
- testName: `carbon-components #${process.env.TRAVIS_BUILD_NUMBER} (${process.env.TRAVIS_BUILD_ID})`,
- buildLabel: `TRAVIS #${process.env.TRAVIS_BUILD_NUMBER} (${process.env.TRAVIS_BUILD_ID})`,
- recordScreenshots: true,
- tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
- },
-
plugins: [
require('karma-mocha'),
require('karma-sinon-chai'),
@@ -255,7 +156,7 @@ module.exports = function(config) {
require('karma-firefox-launcher'),
require('karma-safari-launcher'),
require('karma-ie-launcher'),
- ].concat(cloptions.sauce ? [require('karma-sauce-launcher')] : []),
+ ],
reporters: (() => {
const reporters = ['mocha'];
@@ -314,9 +215,7 @@ module.exports = function(config) {
browsers: flatten(
ensureArray(cloptions.browsers || 'ChromeHeadless').map(browser => {
const browserLower = browser.toLowerCase();
- return (
- (cloptions.sauce && sauceLaunchers[browserLower]) || (process.env.TRAVIS && travisLaunchers[browserLower]) || browser
- );
+ return (process.env.TRAVIS && travisLaunchers[browserLower]) || browser;
})
),

original_message: chore(build): remove old sauce lab integration (#375)


diff:
margin-right: 0;
}
+ .bx--table-overflow {
+ &:hover {
.bx--overflow-menu {
+ opacity: 1;
+ }
+ }
+ }
+
+ .bx--overflow-menu {
+ opacity: 0;
+
&:focus {
outline: 0;
+ opacity: 1;
.bx--overflow-menu__icon {
box-shadow: inset 0px 0px 0px 1px $brand-01;

change_type: RENAME

diff:
- <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
+ <input data-event="select-all" id="bx--checkbox-30" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">

- <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
+ <input data-event="select" id="bx--checkbox-33" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">

- <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
+ <input data-event="select" id="bx--checkbox-34" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">

- <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
+ <input data-event="select" id="bx--checkbox-35" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">

- <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
+ <input data-event="select" id="bx--checkbox-41" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">

- <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
+ <input data-event="select" id="bx--checkbox-52" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">

original_message: fix(table): fix overflow menu hover style, remove hi, update checkbox id (#377)


diff:
- <input data-event="select-all" id="bx--checkbox-30" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
-
+ <input data-event="select-all" id="bx--checkbox-90" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
+

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>

- <input data-event="select" id="bx--checkbox-33" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
-
+ <input data-event="select" id="bx--checkbox-91" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
+

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>

- <input data-event="select" id="bx--checkbox-34" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
-
+ <input data-event="select" id="bx--checkbox-92" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
+

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>

- <input data-event="select" id="bx--checkbox-35" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
-
+ <input data-event="select" id="bx--checkbox-93" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
+

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>

- <input data-event="select" id="bx--checkbox-41" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
-
+ <input data-event="select" id="bx--checkbox-94" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
+

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>

- <input data-event="select" id="bx--checkbox-52" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
-
+ <input data-event="select" id="bx--checkbox-95" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
+

<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>

original_message: fix(table): fix ids for copy/paste usage (#378)


diff:
@@ -12,7 +12,7 @@ import * as g100 from './g100';
import * as white from './white';
import * as g90 from './g90';
-export { g10, g100, white };
+export { g10, g90, g100, white };
export const themes = {
white,
g10,

original_message: fix(themes): add g90 to un-nested named exports (#252)


message: chore(examples): fix type preview

original_message: chore(examples): fix type preview (#308)


message:
fix: update data table header to fit contents
Closes
#### Changelog
**Changed**
padding
**Removed**
hard height

diff:
//----------------------------------------------------------------------------
.#{$prefix}--data-table-header {
background: $ui-01;
- height: rem(88px);
- padding: rem(22px) 0 0 $spacing-05;
+ padding: $spacing-05 0 $spacing-06 $spacing-05;
}
.#{$prefix}--data-table-header__title {
.#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:hover .#{$prefix}--overflow-menu__icon,
.#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:focus .#{$prefix}--overflow-menu__icon,
- .#{$prefix}--data-table
- tr:hover
- td.#{$prefix}--table-column-menu
- .#{$prefix}--overflow-menu
- .#{$prefix}--overflow-menu__icon {
+ .#{$prefix}--data-table tr:hover td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
opacity: 1;
}

original_message:
fix: update data table header to fit contents (#2245)

Closes #2244

#### Changelog

**Changed**

- padding

**Removed**

- hard height


diff:
// LICENSE file in the root directory of this source tree.
//
+@import 'settings';
+
@mixin carbon--font-face-mono {
// .woff support for IE11
@font-face {
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoW.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1Xdm.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoW.woff)
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFhA.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q0Q.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFhA.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jcoQPttoz6Pz.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1hMoQPttoz6Pz.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1j8oQPttoz6Pz.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jsoQPttoz6Pz.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoQPttozw.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2HdgregdFOFh.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa0XdgregdFOFh.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2ndgregdFOFh.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa23dgregdFOFh.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1XdgregdFA.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jcoQPttoz6Pz.woff2)
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1hMoQPttoz6Pz.woff2)
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2)
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jsoQPttoz6Pz.woff2)
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoQPttozw.woff2)
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl1FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl5FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFgsAXHNk.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2)
format('woff2');

diff:
// LICENSE file in the root directory of this source tree.
//
+@import 'settings';
+
@mixin carbon--font-face-sans {
// .woff support for IE11
@font-face {
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfo.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZP.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfo.woff)
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFscg.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRce_fuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRccvfuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdffuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRceffuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcePfuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfuJGl18Q.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGqZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuFKZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGaZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZJW9XjDg.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJce_fuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJccvfuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdffuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcePfuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfuJGl18Q.woff2)
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIxsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIJsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI9sdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFsdP3pBms.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdLeFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIJsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2)
format('woff2');

diff:
// LICENSE file in the root directory of this source tree.
//
+@import 'settings';
+
@mixin carbon--font-face-serif {
// .woff support for IE11
@font-face {
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff)
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2)
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2)
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2)
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2)
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2)
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2)
format('woff2');

diff:
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Defines how font files are loaded and displayed by the browser.
+// https://css-tricks.com/almanac/properties/f/font-display/
+$carbon--font-display: auto !default;

original_message: feat(type): add font-display setting to enhance font loading experience (#477)


diff:
@@ -7050,7 +7050,7 @@ icons:
sizes:
- 32
- name: 3D-Cursor
- friendly_name: 3 d cursor
+ friendly_name: 3D cursor
usage: This is a description for usage
categories:
- name: Enterprise
@@ -7060,7 +7060,7 @@ icons:
sizes:
- 32
- name: 3D-MPR-Toggle
- friendly_name: 3 d mpr toggle
+ friendly_name: 3D mpr toggle
usage: This is a description for usage
categories:
- name: Enterprise
@@ -7070,7 +7070,7 @@ icons:
sizes:
- 32
- name: 3D-curve
- friendly_name: 3 d curve
+ friendly_name: 3D curve
usage: This is a description for usage
categories: []
aliases:
@@ -7079,22 +7079,22 @@ icons:
- spline
variants:
- name: 3D-curve--auto-colon
- friendly_name: 3 d curve auto colon
+ friendly_name: 3D curve auto colon
usage: This is a description for usage
sizes:
- 32
- name: 3D-curve--auto-vessels
- friendly_name: 3 d curve auto vessels
+ friendly_name: 3D curve auto vessels
usage: This is a description for usage
sizes:
- 32
- name: 3D-curve--manual
- friendly_name: 3 d curve manual
+ friendly_name: 3D curve manual
usage: This is a description for usage
sizes:
- 32
- name: 3D-software
- friendly_name: 3 d software
+ friendly_name: 3D software
usage: This is a description for usage
categories:
- name: Enterprise
@@ -7274,7 +7274,7 @@ icons:
sizes:
- 32
- name: iCA-3D
- friendly_name: I ca 3 d
+ friendly_name: I ca 3D
usage: This is a description for usage
categories:
- name: Enterprise

original_message: fix(icons): friendly name for 3D components (#3691)


message: fix: pictogram rendering bugs

diff:
@@ -44,7 +44,7 @@ const plugins = [
}
}
- const sizes = ['16', '20', '24', '32'];
+ const sizes = ['16', '20', '24', '32', '48'];
for (const size of sizes) {
if (
@@ -171,9 +171,6 @@ const plugins = [
{
cleanupNumericValues: true,
},
- {
- moveElemsAttrsToGroup: true,
- },
{
moveGroupAttrsToElems: true,
},

original_message: fix: pictogram rendering bugs (#4081)


message: fix: update pictograms dep

diff:
},
"devDependencies": {
"@carbon/icon-build-helpers": "0.2.0",
- "@carbon/pictograms": "10.2.0"
+ "@carbon/pictograms": "10.6.0-alpha.0"
},
"sideEffects": false
}

original_message: fix: update pictograms dep (#4105)


message:
feat(tile): add light prop
Add light prop to `<Tile>` component for use on `$ui-01` container.
This change also does the following:
* Remove unnecessary light prop from props.groupProps in tile-story
* Add note to light prop comment to warn for correct usage

diff:
}
}
+ .#{$prefix}--tile--light {
+ background-color: $ui-02;
+ }
+
.#{$prefix}--tile--clickable,
.#{$prefix}--tile--selectable,
.#{$prefix}--tile--expandable {

diff:
@@ -61,12 +61,18 @@ export default class RadioTile extends React.Component {
* Specify the tab index of the wrapper element
*/
tabIndex: PropTypes.number,
+
+ /**
+ * `true` to use the light version.
+ */
+ light: PropTypes.bool,
};
static defaultProps = {
iconDescription: 'Tile checkmark',
onChange: () => {},
tabIndex: 0,
+ light: false,
};
uid = this.props.id || uid();
@@ -83,13 +89,20 @@ export default class RadioTile extends React.Component {
};
render() {
- const { children, className, iconDescription, ...other } = this.props;
+ const {
+ children,
+ className,
+ iconDescription,
+ light,
+ ...other
+ } = this.props;
const classes = classNames(
className,
`${prefix}--tile`,
`${prefix}--tile--selectable`,
{
[`${prefix}--tile--is-selected`]: this.props.checked,
+ [`${prefix}--tile--light`]: light,
}
);

diff:
@@ -35,10 +35,18 @@ const radioValues = {
};
const props = {
+ regular: () => ({
+ light: boolean('Light variant (light)', false),
+ }),
+ clickable: () => ({
+ href: text('Href for clickable UI (href)', 'javascript:void(0)'),
+ light: boolean('Light variant (light)', false),
+ }),
selectable: () => ({
selected: boolean('Selected (selected)', false),
handleClick: action('handleClick'),
handleKeyDown: action('handleKeyDown'),
+ light: boolean('Light variant (light)', false),
}),
group: () => ({
name: text('Form item (name in <TileGroup>)', 'tile-group'),
@@ -52,6 +60,7 @@ const props = {
radio: () => ({
name: text('Form item name (name in <RadioTile>)', 'tiles'),
onChange: action('onChange'),
+ light: boolean('Light variant (light)', false),
}),
expandable: () => ({
tabIndex: number('Tab index (tabIndex)', 0),
@@ -66,26 +75,32 @@ const props = {
'Interact to Collapse tile'
),
handleClick: action('handleClick'),
+ light: boolean('Light variant (light)', false),
}),
};
storiesOf('Tile', module)
.addDecorator(withKnobs)
- .add('Default', () => <Tile>Default tile</Tile>, {
+ .add(
+ 'Default',
+ () => {
+ const regularProps = props.regular();
+ return <Tile {...regularProps}>Default tile</Tile>;
+ },
+ {
info: {
text: `
Default tile without any interactions
`,
},
- })
+ }
+ )
.add(
'Clickable',
- () => (
- <ClickableTile
- href={text('Href for clickable UI (href)', 'javascript:void(0)')}>
- Clickable Tile
- </ClickableTile>
- ),
+ () => {
+ const clickableProps = props.clickable();
+ return <ClickableTile {...clickableProps}>Clickable Tile</ClickableTile>;
+ },
{
info: {
text: `

diff:
@@ -38,6 +38,19 @@ describe('Tile', () => {
it('renders extra classes passed in via className', () => {
expect(wrapper.hasClass('extra-class')).toEqual(true);
});
+
+ it('supports light version', () => {
+ const wrapper = mount(<Tile>Test</Tile>);
+ expect(wrapper.props().light).toEqual(false);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ false
+ );
+ wrapper.setProps({ light: true });
+ expect(wrapper.props().light).toEqual(true);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ true
+ );
+ });
});
describe('Renders clickable tile as expected', () => {
@@ -100,6 +113,19 @@ describe('Tile', () => {
wrapper.setProps({ clicked: true });
expect(wrapper.state().clicked).toEqual(false);
});
+
+ it('supports light version', () => {
+ const wrapper = mount(<ClickableTile>Test</ClickableTile>);
+ expect(wrapper.props().light).toEqual(false);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ false
+ );
+ wrapper.setProps({ light: true });
+ expect(wrapper.props().light).toEqual(true);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ true
+ );
+ });
});
describe('Renders selectable tile as expected', () => {
@@ -165,6 +191,15 @@ describe('Tile', () => {
wrapper.setProps({ selected: true });
expect(wrapper.state().selected).toEqual(false);
});
+
+ it('supports light version', () => {
+ const wrapper = mount(<SelectableTile>Test</SelectableTile>);
+ expect(wrapper.props().light).toEqual(false);
+ expect(wrapper.childAt(1).hasClass('bx--tile--light')).toEqual(false);
+ wrapper.setProps({ light: true });
+ expect(wrapper.props().light).toEqual(true);
+ expect(wrapper.childAt(1).hasClass('bx--tile--light')).toEqual(true);
+ });
});
describe('Renders expandable tile as expected', () => {
@@ -327,5 +362,18 @@ describe('Tile', () => {
wrapper.setProps({ tilePadding: 2 });
expect(wrapper.state().tilePadding).toEqual(1);
});
+
+ it('supports light version', () => {
+ const wrapper = mount(<ExpandableTile>Test</ExpandableTile>);
+ expect(wrapper.props().light).toEqual(false);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ false
+ );
+ wrapper.setProps({ light: true });
+ expect(wrapper.props().light).toEqual(true);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ true
+ );
+ });
});
});

diff:
@@ -28,11 +28,27 @@ export class Tile extends Component {
* The CSS class names.
*/
className: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: PropTypes.bool,
+ };
+
+ static defaultProps = {
+ light: false,
};
render() {
- const { children, className, ...other } = this.props;
- const tileClasses = classNames(`${prefix}--tile`, className);
+ const { children, className, light, ...other } = this.props;
+ const tileClasses = classNames(
+ `${prefix}--tile`,
+ {
+ [`${prefix}--tile--light`]: light,
+ },
+ className
+ );
return (
<div className={tileClasses} {...other}>
{children}
@@ -64,12 +80,19 @@ export class ClickableTile extends Component {
* The rel property for the link.
*/
rel: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: PropTypes.bool,
};
static defaultProps = {
clicked: false,
handleClick: () => {},
handleKeyDown: () => {},
+ light: false,
};
handleClick = evt => {
@@ -118,6 +141,7 @@ export class ClickableTile extends Component {
handleClick, // eslint-disable-line
handleKeyDown, // eslint-disable-line
clicked, // eslint-disable-line
+ light,
...other
} = this.props;
@@ -127,6 +151,7 @@ export class ClickableTile extends Component {
`${prefix}--tile--clickable`,
{
[`${prefix}--tile--is-clicked`]: this.state.clicked,
+ [`${prefix}--tile--light`]: light,
},
className
);
@@ -199,6 +224,12 @@ export class SelectableTile extends Component {
* Specify the tab index of the wrapper element
*/
tabIndex: PropTypes.number,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: PropTypes.bool,
};
static defaultProps = {
@@ -210,6 +241,7 @@ export class SelectableTile extends Component {
handleKeyDown: () => {},
onChange: () => {},
tabIndex: 0,
+ light: false,
};
handleClick = evt => {
@@ -270,6 +302,7 @@ export class SelectableTile extends Component {
handleClick, // eslint-disable-line
handleKeyDown, // eslint-disable-line
onChange,
+ light,
...other
} = this.props;
@@ -278,6 +311,7 @@ export class SelectableTile extends Component {
`${prefix}--tile--selectable`,
{
[`${prefix}--tile--is-selected`]: this.state.selected,
+ [`${prefix}--tile--light`]: light,
},
className
);
@@ -360,6 +394,12 @@ export class ExpandableTile extends Component {
* An ID that can be provided to aria-labelledby
*/
id: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: PropTypes.bool,
};
static defaultProps = {
@@ -370,6 +410,7 @@ export class ExpandableTile extends Component {
handleClick: () => {},
tileCollapsedIconText: 'Interact to expand Tile',
tileExpandedIconText: 'Interact to collapse Tile',
+ light: false,
};
static getDerivedStateFromProps(
@@ -467,6 +508,7 @@ export class ExpandableTile extends Component {
handleClick, // eslint-disable-line
tileCollapsedIconText, // eslint-disable-line
tileExpandedIconText, // eslint-disable-line
+ light,
...other
} = this.props;
@@ -477,6 +519,7 @@ export class ExpandableTile extends Component {
`${prefix}--tile--expandable`,
{
[`${prefix}--tile--is-expanded`]: expanded,
+ [`${prefix}--tile--light`]: light,
},
className
);

original_message:
feat(tile): add light prop (#4335)

Add light prop to `<Tile>` component for use on `$ui-01` container.

This change also does the following:

* Remove unnecessary light prop from props.groupProps in tile-story
* Add note to light prop comment to warn for correct usage


diff:
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import { settings } from 'carbon-components';
-import { ButtonTypes } from '../../prop-types/types';
+import { ButtonKinds } from '../../prop-types/types';
import deprecate from '../../prop-types/deprecate';
const { prefix } = settings;
@@ -142,7 +142,7 @@ Button.propTypes = {
/**
* Specify the kind of Button you want to create
*/
- kind: ButtonTypes.buttonKind.isRequired,
+ kind: PropTypes.oneOf(ButtonKinds).isRequired,
/**
* Optionally specify an href for your Button to become an <a> element

diff:
@@ -17,7 +17,7 @@ import {
} from '@carbon/icons-react';
import Loading from '../Loading';
import uid from '../../tools/uniqueId';
-import { ButtonTypes } from '../../prop-types/types';
+import { ButtonKinds } from '../../prop-types/types';
const { prefix } = settings;
@@ -88,7 +88,7 @@ export class FileUploaderButton extends Component {
/**
* Specify the type of underlying button
*/
- buttonKind: ButtonTypes.buttonKind,
+ buttonKind: PropTypes.oneOf(ButtonKinds),
/**
* Specify the types of files that this input should be able to receive
@@ -269,7 +269,7 @@ export default class FileUploader extends Component {
/**
* Specify the type of the <FileUploaderButton>
*/
- buttonKind: ButtonTypes.buttonKind,
+ buttonKind: PropTypes.oneOf(ButtonKinds),
/**
* Specify the status of the File Upload

diff:
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import Modal from '../Modal';
import Button from '../Button';
-import { ButtonTypes } from '../../prop-types/types';
+import { ButtonKinds } from '../../prop-types/types';
export default class ModalWrapper extends React.Component {
static propTypes = {
@@ -34,7 +34,7 @@ export default class ModalWrapper extends React.Component {
PropTypes.object,
]),
triggerButtonIconDescription: PropTypes.string,
- triggerButtonKind: ButtonTypes.buttonKind,
+ triggerButtonKind: PropTypes.oneOf(ButtonKinds),
shouldCloseAfterSubmit: PropTypes.bool,
};

diff:
* LICENSE file in the root directory of this source tree.
*/
-import { oneOf } from 'prop-types';
-
-export const ButtonTypes = {
- buttonKind: oneOf([
+export const ButtonKinds = [
'primary',
'secondary',
'danger',
'ghost',
'danger--primary',
'tertiary',
- ]),
-};
+];

original_message: fix(Button): unwind button proptype abstraction (#4581)


message: fix(Modal): remove z-index transition

diff:
right: 0;
bottom: 0;
left: 0;
- z-index: z('hidden');
+ z-index: z('modal');
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
transition: background-color $duration--slow-02 motion(exit, expressive),
opacity $duration--moderate-02 motion(exit, expressive),
- z-index $duration--slow-02 motion(exit, expressive),
- visibility $duration--moderate-02 motion(exit, expressive);
+ visibility 0ms linear $duration--moderate-02;
&.is-visible {
- z-index: z('modal');
visibility: visible;
opacity: 1;
background-color: $overlay-01;
transition: background-color $duration--slow-02
motion(entrance, expressive),
opacity $duration--moderate-02 motion(entrance, expressive),
- z-index $duration--slow-02 motion(entrance, expressive),
- visibility $duration--moderate-02 motion(entrance, expressive);
+ visibility 0ms linear;
}
.#{$prefix}--text-input,

original_message: fix(Modal): remove z-index transition (#4777)


diff:
@@ -46,7 +46,7 @@ categories:
- beijing--municipal
- beijing--tower
- berlin--brandenburg--gate
- - berlin--brandenburg #DEPRECATED: use berlin--brandenberg--gate instead
+ - berlin--brandenburg #DEPRECATED: use berlin--brandenburg--gate instead
- berlin--cathedral
- berlin--tower
- copenhagen--planetarium

diff:
@@ -269,12 +269,12 @@ icons:
- berlin
variants:
- name: berlin--brandenburg--gate
- friendly_name: Berlin brandenberg gate
+ friendly_name: Berlin brandenburg gate
usage: This is a description for usage
categories:
- name: Cities
- - name: berlin--brandenburg # DEPRECATED: use berlin--brandenberg--gate instead
- friendly_name: Berlin brandenberg
+ - name: berlin--brandenburg # DEPRECATED: use berlin--brandenburg--gate instead
+ friendly_name: Berlin brandenburg
usage: This is a description for usage
categories:
- name: Cities

diff:
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<g id="berlin_brandenberg">
+<g id="berlin_brandenburg">
<rect style="fill:#FFFFFF;" width="48" height="48"/>
- <g id="berlin_brandenberg_1_">
+ <g id="berlin_brandenburg_1_">
<line style="fill:none;stroke:#000000;stroke-width:0.72;stroke-linejoin:round;stroke-miterlimit:10;" x1="9" y1="36" x2="39" y2="36"/>
<line style="fill:none;stroke:#000000;stroke-width:0.72;stroke-linejoin:round;stroke-miterlimit:10;" x1="9" y1="18" x2="39" y2="18"/>
<line style="fill:none;stroke:#000000;stroke-width:0.72;stroke-linejoin:round;stroke-miterlimit:10;" x1="20" y1="16" x2="28" y2="16"/>

original_message: chore(pictograms): correct berlin brandenburg name typo (#4778)


message: feat(icons): add statistics icons

diff:
@@ -594,12 +594,15 @@ categories:
- flow--stream
- hybrid-networking
- improve-relevance
+ - interactions
- increase-level
- managed-solutions
- network--1
- network--2
- network--3
- network--4
+ - nominal
+ - ordinal
- parent-child
- phrase-sentiment
- presentation-file

diff:
@@ -910,6 +910,16 @@ icons:
categories:
- name: Organization
subcategory: Status
+ - name: interactions
+ friendly_name: Interactions
+ usage: This is a description for usage
+ categories:
+ - name: Organization
+ subcategory: Data
+ aliases:
+ - statistics interaction
+ sizes:
+ - 16
- name: launch
friendly_name: Launch
usage: This is a description for usage
@@ -6754,6 +6764,26 @@ icons:
categories:
- name: Organization
subcategory: Data
+ - name: nominal
+ friendly_name: Nominal
+ usage: This is a description for usage
+ categories:
+ - name: Organization
+ subcategory: Data
+ aliases:
+ - nominal data
+ sizes:
+ - 16
+ - name: ordinal
+ friendly_name: Ordinal
+ usage: This is a description for usage
+ categories:
+ - name: Organization
+ subcategory: Data
+ aliases:
+ - ordinal data
+ sizes:
+ - 16
- name: no-image
friendly_name: No image
usage: This is a description for usage

diff:
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
+ <title>Ordinal 16</title>
+ <desc>Created with Sketch.</desc>
+ <g id="Ordinal-16" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <path d="M1,13 L1,12 L3,12 L3,9 L5.999,9 L6,6 L9,6 L9,3 L13,3 L13,12 L15,12 L15,13 L1,13 Z M5.999,10 L4,10 L4,12 L5.999,12 L5.999,10 Z M8.999,7 L6.999,7 L6.999,9 L7,9 L7,12 L8.999,12 L8.999,7 Z M12,4 L10,4 L10,12 L12,12 L12,4 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+ </g>
+</svg>
\ No newline at end of file

original_message: feat(icons): add statistics icons (#4824)


diff:
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
-import { CheckmarkFilled16, Error20 } from '@carbon/icons-react';
+import { CheckmarkFilled16, ErrorFilled16 } from '@carbon/icons-react';
import { settings } from 'carbon-components';
import deprecate from '../../prop-types/deprecate';
import Loading from '../Loading';
@@ -28,7 +28,7 @@ export default function InlineLoading({
const loadingClasses = classNames(`${prefix}--inline-loading`, className);
const getLoading = () => {
if (status === 'error') {
- return <Error20 className={`${prefix}--inline-loading--error`} />;
+ return <ErrorFilled16 className={`${prefix}--inline-loading--error`} />;
}
if (status === 'finished') {
setTimeout(() => {

original_message:
fix(InlineLoading): change error icon to filled (#5018)

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: emyarod <emyarod@users.noreply.github.com>


diff:
@include tooltip--placement('icon', 'bottom', 'center');
}
- .#{$prefix}--btn--icon-only,
- .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only,
- .#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
+ .#{$prefix}--btn--icon-only {
+ padding-left: rem(13px);
padding-right: rem(13px);
+ &.#{$prefix}--btn--tertiary {
+ padding-left: rem(15px);
+ padding-right: rem(15px);
+ }
+
.#{$prefix}--btn__icon {
position: static;
}
}
}
+ .#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
+ padding-left: rem(9px);
+ padding-right: rem(9px);
+
+ &.#{$prefix}--btn--tertiary {
+ padding-left: rem(11px);
+ padding-right: rem(11px);
+ }
+ }
+
+ .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only {
+ padding-left: rem(5px);
+ padding-right: rem(5px);
+
+ &.#{$prefix}--btn--tertiary {
+ padding-left: rem(7px);
+ padding-right: rem(7px);
+ }
+ }
+
.#{$prefix}--btn--danger {
@include button-theme(
$danger,

original_message: fix(button): correct sizes for icon-only buttons (#5195)


diff:
.#{$prefix}--btn {
@include button-base;
-
- &.#{$prefix}--btn--disabled > svg.#{$prefix}--btn__icon,
- &:disabled > svg.#{$prefix}--btn__icon {
- fill: $disabled-03;
- }
}
// Reset intrisic padding in Firefox (see #731)
background: transparent;
color: $disabled;
outline: none;
-
- > .#{$prefix}--btn__icon path {
- fill: $disabled;
- }
- }
-
- &:hover > .#{$prefix}--btn__icon path {
- fill: $inverse-01;
}
}
&:hover,
&:active {
color: $hover-primary-text;
-
- .#{$prefix}--btn__icon path {
- fill: $hover-primary-text;
- }
}
&:active {
background: transparent;
border-color: transparent;
outline: none;
-
- .#{$prefix}--btn__icon path {
- fill: $disabled;
- }
}
&.#{$prefix}--btn--sm {
$danger,
$text-04,
$hover-danger,
- $icon-03,
+ currentColor,
$active-danger
);

original_message: fix(button): use currentColor as icon fill for all states (#5270)