Skip to content

Commit

Permalink
Merge pull request #1 from IBM/master
Browse files Browse the repository at this point in the history 
Fork Sync
  • Loading branch information
@dakahn
dakahn authored Oct 1, 2018
2 parents c7bdb31 + 7fd0895 commit 5006dfd
Show file tree
Hide file tree
Showing 25 changed files with 844 additions and 159 deletions.
11 changes: 9 additions & 2 deletions demo/js/components/RootPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,11 +237,18 @@ class RootPage extends Component {
clearTimeout(this.hTimeoutDetectExperimental);
this.hTimeoutDetectExperimental = null;
}
// For IE11
if (link.sheet.cssRules.length === 0) {
let rulesLength = 0;
try {
// https://bugzilla.mozilla.org/show_bug.cgi?id=761236#c1 suggests that `NS_ERROR_DOM_INVALID_ACCESS_ERR` is thrown
// if we try to read `.cssRules` on a stylesheet that's not done being parsed yet
rulesLength = link.sheet.cssRules.length;
} catch (err) {} // eslint-disable-line no-empty
// For IE11/FF
if (rulesLength === 0) {
this.hTimeoutDetectExperimental = setTimeout(() => {
this._detectComponentsX(link);
}, 100);
return;
}
const isComponentsX = Array.prototype.some.call(
link.sheet.cssRules,
Expand Down
148 changes: 147 additions & 1 deletion src/components/accordion/_accordion.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
@import '../../globals/scss/typography';
@import '../../globals/scss/spacing';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/functions';
@import '../../globals/scss/import-once';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/css--typography';

@include exports('accordion') {
@mixin accordion {
.#{$prefix}--accordion {
@include reset;
@include font-family;
Expand Down Expand Up @@ -137,3 +138,148 @@
margin-bottom: 0;
}
}

@mixin accordion--x {
.#{$prefix}--accordion {
@include reset;
@include font-family;
list-style: none;
width: 100%;
}

.#{$prefix}--accordion__item {
transition: all $transition--base $carbon--standard-easing;
border-top: 1px solid $ui-03;
overflow: hidden;

&:focus {
outline: none;

.#{$prefix}--accordion__arrow {
@include focus-outline('border');
overflow: visible; // safari fix
outline-offset: -0.5px; // safari fix
}
}

&:last-child {
border-bottom: 1px solid $ui-03;
}
}

.#{$prefix}--accordion__heading {
@include button-reset;
color: $text-01;
display: flex;
align-items: center;
justify-content: $accordion-justify-content;
cursor: pointer;
padding: rem(7px) 0;
flex-direction: $accordion-flex-direction;
width: 100%;
margin: 0; // safari fix

&:focus {
outline: none;

.#{$prefix}--accordion__arrow {
@include focus-outline('border');
overflow: visible; // safari fix
outline-offset: -0.5px; // safari fix
}
}
&:hover {
background-color: $field-01;
}
}

.#{$prefix}--accordion__arrow {
transition: all $transition--base $carbon--standard-easing;
height: 1.25rem;
width: 1.25rem;
padding: $spacing-2xs $spacing-3xs $spacing-2xs $spacing-2xs;
margin: $accordion-arrow-margin;
fill: $ui-05;
transform: rotate(90deg) /*rtl:rotate(180deg)*/;
}

.#{$prefix}--accordion__title {
@include typescale('zeta');
@include line-height('body');
margin: $accordion-title-margin;
width: 100%;
text-align: left;
font-weight: 400;
}

.#{$prefix}--accordion__content {
transition: all $transition--expansion $carbon--ease-out;
padding-left: $spacing-md;
height: 0;
visibility: hidden;
opacity: 0;

p {
@include typescale('zeta');
padding-right: 20%;
}
}

.#{$prefix}--accordion__item--active {
overflow: visible;
border-top: 1px solid transparent;

.#{$prefix}--accordion__content {
padding-bottom: $spacing-lg;
padding-top: $spacing-xs;
height: auto;
visibility: visible;
opacity: 1;
transition: all $transition--expansion $carbon--ease-in;
}

.#{$prefix}--accordion__arrow {
/*rtl:ignore*/
transform: rotate(-90deg);
fill: $ui-05;
}
}

// Skeleton state
.#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading,
.#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button {
cursor: default;
}

.#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow {
pointer-events: none;
fill: $ui-05;
cursor: default;

&:hover,
&:focus,
&:active {
border: none;
outline: none;
cursor: default;
}
}

.#{$prefix}--skeleton .#{$prefix}--accordion__heading:focus .#{$prefix}--accordion__arrow {
border: none;
outline: none;
cursor: default;
}

.#{$prefix}--accordion__title.#{$prefix}--skeleton__text {
margin-bottom: 0;
}
}

@include exports('accordion') {
@if feature-flag-enabled('components-x') {
@include accordion--x;
} @else {
@include accordion;
}
}
59 changes: 58 additions & 1 deletion src/components/breadcrumb/_breadcrumb.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@import '../../globals/scss/css--typography';
@import '../link/link';

@include exports('breadcrumb') {
@mixin breadcrumb {
.#{$prefix}--breadcrumb {
@include typescale('zeta');
@include font-family;
Expand Down Expand Up @@ -66,3 +66,60 @@
height: 1rem;
}
}

@mixin breadcrumb-experimental {
.#{$prefix}--breadcrumb {
@include typescale('zeta');
@include font-family;
display: inline;

@include breakpoint(bp--xs--major) {
display: flex;
flex-wrap: wrap;
}
}

.#{$prefix}--breadcrumb-item {
margin-right: $spacing-xs;
display: flex;
align-items: center;
line-height: 1.25; //needed for correct spacing for underline hover
}

.#{$prefix}--breadcrumb-item::after {
content: '/';
margin-left: $spacing-xs;
color: $text-02;
}

.#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
content: '';
}

.#{$prefix}--breadcrumb-item:last-child {
margin-right: 0;

&::after {
margin-right: 0;
}
}

.#{$prefix}--breadcrumb .#{$prefix}--link {
white-space: nowrap;
}

// Skeleton State
.#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
@include skeleton;
width: rem(100px);
height: 1rem;
}
}

@include exports('breadcrumb') {
@if feature-flag-enabled('components-x') {
@include breadcrumb-experimental;
} @else {
@include breadcrumb;
}
}
26 changes: 15 additions & 11 deletions src/components/checkbox/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,22 @@

#### Public Methods

| Name | Params | Description |
|-----------|-------------------------------|-----------------------------------------------------------------------------------------------------------------------|
| setState | state: `String` ['true', 'false', 'mixed'] | Can be used to set the checkbox to `true`(checked), `false`(unchecked) or `mixed` (indeterminate) |
| setDisabled | state: `Boolean` | Can be used to set the checkbox to disabled, needed for the `label > input` |
| Name | Params | Description |
| ----------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| setState | state: `String` ['true', 'false', 'mixed'] | Can be used to set the checkbox to `true`(checked), `false`(unchecked) or `mixed` (indeterminate) |
| setDisabled | state: `Boolean` | Can be used to set the checkbox to disabled, needed for the `label > input` |

#### Options

| Option | Default Selector | Description |
|---------------------|------------------------------------------------|--|
| selectorInit | .bx--checkbox | The CSS selector to find checkbox |
| Option | Default Selector | Description |
| --------------------------------- | ---------------------------------- | -------------------------------------------------------------------------- |
| selectorInit | .bx--checkbox | The CSS selector to find checkbox |
| selectorContainedCheckboxState | [data-contained-checkbox-state] | The CSS selector to find a container of checkbox preserving checked state |
| selectorContainedCheckboxDisabled | [data-contained-checkbox-disabled] | The CSS selector to find a container of checkbox preserving disabled state |
| classLabel | .bx--checkbox-label | The CSS class for the label |
| classLabelFocused | .bx--checkbox-label\_\_focus | The CSS class for the focused label |
| attribContainedCheckboxState | data-contained-checkbox-state | The attribute name for the checked state of contained checkbox |
| attribContainedCheckboxDisabled | data-contained-checkbox-disabled | The attribute name for the disabled state of contained checkbox |

### FAQ

Expand Down Expand Up @@ -41,14 +47,12 @@ With `label` wrapping `input`
</div>
```

Note: You no longer need to include a SVG for the checkmark to render.
Note: You no longer need to include a SVG for the checkmark to render.

#### Fieldset and Legend

As a best practice, groups of checkboxes should make use of `<fieldset>` and `<legend>` (see Form for details).
This is especially true for forms submitting data.

But, there are exceptions to the rule. For example, Data Tables make use of checkboxes as a way to select rows of data.
But, there are exceptions to the rule. For example, Data Tables make use of checkboxes as a way to select rows of data.
Checkboxes in this context would represent an entire row of data in its associated table row.


Loading

0 comments on commit 5006dfd

Please sign in to comment.