Skip to content

Commit

Permalink
Merge branch 'master' into 1801-component-design-audit-v1.1-link
Browse files Browse the repository at this point in the history
  • Loading branch information
@tw15egan
tw15egan authored Feb 19, 2019
2 parents 1b389ef + b7af828 commit befa907
Show file tree
Hide file tree
Showing 15 changed files with 243 additions and 105 deletions.
12 changes: 6 additions & 6 deletions .github/CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ Defining markup with conditionals or data interpolations requires creating `.con
Supported [properties in `.config.js`](https://fractal.build/guide/components/configuration-reference.html#component-properties) are the following:

- [`default`](https://fractal.build/guide/components/configuration#default): The default variant name
- [`variants`](https://fractal.build/guide/components/configuration#variant-properties) - An array of objects, supporitng the following properties:
- [`variants`](https://fractal.build/guide/components/configuration#variant-properties) - An array of objects, supporting the following properties:
- `name`: The variant name
- `label`: The variant name shown in dev env UI
- `notes`: A short explainer the variant shown in dev env UI
Expand Down Expand Up @@ -210,7 +210,7 @@ Then edits of `.scss` files in `/path/to/carbon-components/src` will be reflecte

### 1. Fork The Repo:

Go to [carbon-components](https://github.com/IBM/carbon-components) and click the "Fork" button in the top-right corner.
Go to [carbon-components](https://github.com/IBM/carbon-components) and click the `Fork` button in the top-right corner.

### 2. Clone Your Fork:

Expand Down Expand Up @@ -317,7 +317,7 @@ If you are very sure that your change affects a specific set of components, you
gulp test:a11y --name dropdown
```

The a11y test may report potential issues that should be handled in application-level, not in carbon-components code. In such case, you can ignore those issues by adding an item to `shouldIssueBeIgnoredForRule` table in [tests/a11y/global-ignore-aat-issues.js](https://github.com/IBM/carbon-components/blob/master/tests/a11y/global-ignore-aat-issues.js). The table is keyed by something like `wcag20.tech.h59.linkValid` which helps indentifying what RPT rule to ignore. You can specify `true` to the value which ignores all violations of the rule, or a function which takes the DOM element violating the rule and returns `true` if such violation should be ignored.
The a11y test may report potential issues that should be handled in application-level, not in carbon-components code. In such case, you can ignore those issues by adding an item to `shouldIssueBeIgnoredForRule` table in [tests/a11y/global-ignore-aat-issues.js](https://github.com/IBM/carbon-components/blob/master/tests/a11y/global-ignore-aat-issues.js). The table is keyed by something like `wcag20.tech.h59.linkValid` which helps identifying what RPT rule to ignore. You can specify `true` to the value which ignores all violations of the rule, or a function which takes the DOM element violating the rule and returns `true` if such violation should be ignored.

### 8. Make a Pull Request

Expand Down Expand Up @@ -356,15 +356,15 @@ git commit -m "fix(table): IE11 positioning error" -m "Fixes #34"
git push origin { YOUR_BRANCH_NAME }
```

In your browser, navigate to [IBM/carbon-components](https://github.com/IBM/carbon-components) and click the button that reads "Compare & pull request"
In your browser, navigate to [IBM/carbon-components](https://github.com/IBM/carbon-components) and click the button that reads `Compare & pull request`

> **Is it a Breaking Change?**
> We want to respect semver.
> It's important to discern whether your pull request contains breaking changes or not.
> Sometimes, renaming or removing things in the code can result in breaking changes.
> Here are some examples of breaking changes...changing, renaming or removing any of the following:
> Here are some examples of breaking changes... changing, renaming or removing any of the following:
>
> - HTML attributes
> - Folders or Files
Expand All @@ -378,7 +378,7 @@ Before you create a pull request, change the base branch depending on what kind
- Pull requests with **non-breaking changes** like patches and minor updates use the `master` as the base branch.
- Pull requests with **breaking changes** use the latest `major version number` branch as the base branch (i.e. `7.0.0` or whatever the next major version is).

Write a title and description then click "Create pull request"
Write a title and description then click `Create pull request`

- [How to write the perfect pull request](https://github.com/blog/1943-how-to-write-the-perfect-pull-request)

Expand Down
18 changes: 9 additions & 9 deletions src/components/code-snippet/_code-snippet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,14 +321,14 @@
background-color: $ui-03;
}

&:active {
background-color: $copy-active;
}

&:focus {
outline: none;
border: 2px solid $interactive-01;
}

&:active {
background: $copy-active;
}
}

.#{$prefix}--snippet--inline code {
Expand Down Expand Up @@ -430,7 +430,7 @@
}

.#{$prefix}--snippet-button:active {
background: $copy-active;
background-color: $copy-active;
}

.#{$prefix}--btn--copy__feedback {
Expand Down Expand Up @@ -480,12 +480,12 @@
color: $text-01;
}

.#{$prefix}--snippet-btn--expand:focus {
@include focus-outline('outline');
.#{$prefix}--snippet-btn--expand:active {
background-color: $copy-active;
}

.#{$prefix}--snippet-btn--expand:active {
background: $copy-active;
.#{$prefix}--snippet-btn--expand:focus {
@include focus-outline('outline');
}

.#{$prefix}--snippet--expand .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
Expand Down
68 changes: 25 additions & 43 deletions src/components/dropdown/dropdown.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,15 @@
<li class="{{@root.prefix}}--dropdown-text">
{{#unless inline}} Dropdown label {{else}}
<span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
{{/unless}}
{{#if featureFlags.componentsX}}
{{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--dropdown__arrow') }}
{{else}}
<svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
<path d="M10 0L5 5 0 0z"></path>
</svg>
{{/if}}
{{/unless}}
</li>
{{#unless inline}}
{{#if featureFlags.componentsX}}
{{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--dropdown__arrow') }}
{{else}}
<svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
<path d="M10 0L5 5 0 0z"></path>
</svg>
{{/if}}
{{/unless}}
<li>
<ul class="{{@root.prefix}}--dropdown-list">
{{#each items}}
Expand All @@ -41,44 +32,35 @@
</ul>
<br>
{{#if featureFlags.componentsX}}
<div class="{{@root.prefix}}--form-item">
<ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
class="{{@root.prefix}}--dropdown {{@root.prefix}}--dropdown--invalid {{#if up}} {{@root.prefix}}--dropdown--up{{/if}}{{#if light}} {{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}}"
tabindex="0" data-invalid>
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--dropdown__invalid')}}
<li class="{{@root.prefix}}--dropdown-text">
{{#unless inline}} Dropdown label {{else}}
<span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
{{#if featureFlags.componentsX}}
{{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--dropdown__arrow') }}
{{else}}
<svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
<path d="M10 0L5 5 0 0z"></path>
</svg>
{{/if}}
{{/unless}}
</li>
{{#unless inline}}
<div class="{{@root.prefix}}--form-item">
<ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
class="{{@root.prefix}}--dropdown {{@root.prefix}}--dropdown--invalid {{#if up}} {{@root.prefix}}--dropdown--up{{/if}}{{#if light}} {{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}}"
tabindex="0" data-invalid>
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--dropdown__invalid')}}
<li class="{{@root.prefix}}--dropdown-text">
{{#unless inline}} Dropdown label {{else}}
<span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
{{/unless}}
{{#if featureFlags.componentsX}}
{{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--dropdown__arrow') }}
{{else}}
<svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
<path d="M10 0L5 5 0 0z"></path>
</svg>
{{/if}}
{{/unless}}
<li>
<ul class="{{@root.prefix}}--dropdown-list">
{{#each items}}
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
<a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
</li>
{{/each}}
</ul>
</li>
</ul>
<div class="{{@root.prefix}}--form-requirement">
This is not a validation message
</div>
</li>
<li>
<ul class="{{@root.prefix}}--dropdown-list">
{{#each items}}
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
<a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
</li>
{{/each}}
</ul>
</li>
</ul>
<div class="{{@root.prefix}}--form-requirement">
This is not a validation message
</div>
{{/if}}
</div>
{{/if}}
60 changes: 38 additions & 22 deletions src/components/file-uploader/_file-uploader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
@import '../button/button';
@import '../form/form';
@import '../loading/loading';
@import '../../globals/scss/vendor/@carbon/elements/scss/type/styles';

@mixin file-uploader {
.#{$prefix}--file {
Expand Down Expand Up @@ -112,6 +113,11 @@
width: 100%;
}

.#{$prefix}--file--invalid {
margin-right: $spacing-xs;
fill: $support-01;
}

// TODO: sync with type
.#{$prefix}--file--label {
@include reset;
Expand All @@ -127,9 +133,8 @@

.#{$prefix}--file-btn {
display: inline-flex;
width: rem(95px);
margin: 0;
padding-right: 1rem;
padding-right: rem(64px);
}

.#{$prefix}--label-description {
Expand All @@ -143,32 +148,53 @@
.#{$prefix}--file-container {
display: block;
width: 100%;
margin-top: $spacing-md;
margin-top: $spacing-lg;
}

.#{$prefix}--file__selected-file {
@include text-overflow(300px);
display: flex;
align-items: center;
justify-content: space-between;
min-height: rem(30px);
background-color: $inverse-01;
min-height: rem(32px);
max-width: rem(300px);
margin-bottom: $spacing-xs;
padding: 0 $spacing-xs 0 $spacing-md;
margin-bottom: $spacing-sm;
background-color: $field-01;
overflow: hidden;

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

.#{$prefix}--inline-loading__animation,
.#{$prefix}--loading {
right: -0.25rem; // offset for loading svg container
width: 1.5rem;
height: 1.5rem;
}
}

.#{$prefix}--file__selected-file--invalid {
@include focus-outline('invalid');
margin-bottom: $spacing-2xs;
}

.#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
display: block;
max-height: rem(200px);
color: $support-01;
font-weight: 400;
margin: 0 0 $spacing-xs 0;
overflow: visible;
}

.#{$prefix}--file-filename {
@include typescale('omega');
@include text-overflow(100%);
display: inline-flex;
@include carbon--type-style('body-short-01');
@include text-overflow(300px);
display: inline-block;
align-items: center;
color: $text-01;
margin-right: $spacing-md;
height: 1.875rem;
/*rtl:ignore*/
direction: ltr;
justify-content: flex-start; /*rtl:{flex-end}*/
Expand All @@ -178,21 +204,13 @@
display: flex;
align-items: center;

.#{$prefix}--loading {
width: 1rem;
height: 1rem;
margin-right: $spacing-xs;
}

.#{$prefix}--loading__svg {
stroke: $ui-05;
}
}

.#{$prefix}--file__state-container .#{$prefix}--file-complete {
width: 1rem;
height: 1rem;
fill: $text-01;
fill: $support-02;
cursor: pointer;

&:focus {
Expand All @@ -205,8 +223,6 @@
border: none;
cursor: pointer;
padding: 0;
width: 1rem;
height: 1rem;
}
}

Expand Down
13 changes: 13 additions & 0 deletions src/components/file-uploader/file-uploader.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,17 @@ module.exports = {
prefix,
componentsX,
},
variants: [
{
name: 'default',
label: 'File uploader',
},
{
name: 'example upload states',
label: 'File uploader with example upload states',
context: {
exampleUploadStates: true,
},
},
],
};
Loading

0 comments on commit befa907

Please sign in to comment.