Skip to content

Commit

Permalink
Merge branch 'master' into duytran/fix-import-order-tag
Browse files Browse the repository at this point in the history
  • Loading branch information
asudoh authored Jan 28, 2020
2 parents 7abd7ad + 76f8009 commit 95d6105
Show file tree
Hide file tree
Showing 13 changed files with 344 additions and 27 deletions.
19 changes: 16 additions & 3 deletions packages/components/docs/sass.md
Original file line number Diff line number Diff line change
Expand Up @@ -7108,6 +7108,7 @@ $focus: if(
- [checkbox [mixin]](#checkbox-mixin)
- [snippet [mixin]](#snippet-mixin)
- [content-switcher [mixin]](#content-switcher-mixin)
- [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
- [data-table-expandable [mixin]](#data-table-expandable-mixin)
- [modal [mixin]](#modal-mixin)
- [radio-button [mixin]](#radio-button-mixin)
Expand Down Expand Up @@ -14268,6 +14269,12 @@ Data table action styles
}
}

.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search
.#{$prefix}--search-close:focus::before {
background-color: $focus;
}

//-------------------------------------------------
//ACTIVE SEARCH - DEFAULT TOOLBAR
//-------------------------------------------------
Expand All @@ -14286,7 +14293,7 @@ Data table action styles
.#{$prefix}--toolbar-search-container-active
.#{$prefix}--search
.#{$prefix}--search-input {
padding-left: $spacing-09;
padding: 0 $spacing-09;
visibility: inherit;
}

Expand Down Expand Up @@ -14342,6 +14349,11 @@ Data table action styles
background-color: transparent;
}

.#{$prefix}--toolbar-search-container-persistent
.#{$prefix}--search-close::before {
display: none;
}

//-------------------------------------------------
//TOOLBAR BUTTONS
//-------------------------------------------------
Expand Down Expand Up @@ -14441,7 +14453,7 @@ Data table action styles
.#{$prefix}--search
.#{$prefix}--search-input {
height: $layout-04;
padding-left: $spacing-09;
padding: 0 $spacing-09;
border: none;
}

Expand Down Expand Up @@ -14658,7 +14670,7 @@ Data table action styles
.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search
.#{$prefix}--search-input {
padding-left: $spacing-xl;
padding: 0 $spacing-09;
}

//active
Expand Down Expand Up @@ -14748,6 +14760,7 @@ Data table action styles
- [spacing-05 [variable]](#spacing-05-variable)
- [hover-field [variable]](#hover-field-variable)
- [hover-ui [variable]](#hover-ui-variable)
- [focus [variable]](#focus-variable)
- [spacing-09 [variable]](#spacing-09-variable)
- [layout-01 [variable]](#layout-01-variable)
- [icon-01 [variable]](#icon-01-variable)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,12 @@
}
}

.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search
.#{$prefix}--search-close:focus::before {
background-color: $focus;
}

//-------------------------------------------------
//ACTIVE SEARCH - DEFAULT TOOLBAR
//-------------------------------------------------
Expand All @@ -141,7 +147,7 @@
.#{$prefix}--toolbar-search-container-active
.#{$prefix}--search
.#{$prefix}--search-input {
padding-left: $spacing-09;
padding: 0 $spacing-09;
visibility: inherit;
}

Expand Down Expand Up @@ -197,6 +203,11 @@
background-color: transparent;
}

.#{$prefix}--toolbar-search-container-persistent
.#{$prefix}--search-close::before {
display: none;
}

//-------------------------------------------------
//TOOLBAR BUTTONS
//-------------------------------------------------
Expand Down Expand Up @@ -296,7 +307,7 @@
.#{$prefix}--search
.#{$prefix}--search-input {
height: $layout-04;
padding-left: $spacing-09;
padding: 0 $spacing-09;
border: none;
}

Expand Down Expand Up @@ -513,7 +524,7 @@
.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search
.#{$prefix}--search-input {
padding-left: $spacing-xl;
padding: 0 $spacing-09;
}

//active
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/select/_select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
background-color: $field-02;

&:hover {
background-color: $ui-01;
background-color: $hover-ui;
}

&:disabled,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
LICENSE file in the root directory of this source tree.
-->
{{!-- @todo remove duplicate class on next major release when selectors can be cleaned up --}}
<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y" data-tooltip-definition>
<button aria-describedby="example-start"
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start">
Definition Tooltip (start aligned)
Expand All @@ -14,7 +14,7 @@
above.</div>
</div>
<br>
<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y" data-tooltip-definition>
<button aria-describedby="example-center"
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-center">
Definition Tooltip (center aligned)
Expand All @@ -23,7 +23,7 @@
above.</div>
</div>
<br>
<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y" data-tooltip-definition>
<button aria-describedby="example-end"
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end">
Definition Tooltip (end aligned)
Expand Down
36 changes: 24 additions & 12 deletions packages/components/src/components/tooltip/tooltip--icon.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -8,42 +8,50 @@
<br>
{{!-- @todo Had to add a modifier to the parent to correct the animation but in the next major release it could be removed in favor of the new HTML format --}}
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-start">
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-start"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-start">
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-start"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start">
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-start">
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-start"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<br>
<br>
<p>center</p>
<br>
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left">
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top">
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom">
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right">
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
Expand All @@ -52,22 +60,26 @@
<p>end</p>
<br>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-end">
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-end"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-end">
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-end"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end">
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-end">
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-end"
data-tooltip-icon>
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
94 changes: 94 additions & 0 deletions packages/components/src/components/tooltip/tooltip--simple.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/**
* Copyright IBM Corp. 2016, 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.
*/

import settings from '../../globals/js/settings';
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 handles from '../../globals/js/mixins/handles';
import eventMatches from '../../globals/js/misc/event-matches';
import on from '../../globals/js/misc/on';

export default class TooltipSimple extends mixin(
createComponent,
initComponentBySearch,
handles
) {
/**
* Simple Tooltip.
* @extends CreateComponent
* @extends InitComponentBySearch
* @extends Handles
* @param {HTMLElement} element - The element functioning as a text field.
*/
constructor(element, options) {
super(element, options);
this.manage(
on(this.element.ownerDocument, 'keydown', event => {
// ESC
if (event.which === 27) {
this.allowTooltipVisibility({ visible: false });
}
})
);
this.manage(
on(this.element, 'mouseenter', () =>
this.allowTooltipVisibility({ visible: true })
)
);
this.manage(
on(this.element, 'focus', event => {
if (eventMatches(event, this.options.selectorTriggerButton)) {
this.allowTooltipVisibility({ visible: true });
}
})
);
}

allowTooltipVisibility = ({ visible }) => {
const tooltipTriggerButton = this.element.matches(
this.options.selectorTriggerButton
)
? this.element
: this.element.querySelector(this.options.selectorTriggerButton);

if (!tooltipTriggerButton) {
return;
}

if (visible) {
tooltipTriggerButton.classList.remove(this.options.classTooltipHidden);
} else {
tooltipTriggerButton.classList.add(this.options.classTooltipHidden);
}
};

/**
* The component options.
*
* If `options` is specified in the constructor,
* {@linkcode TooltipSimple.create .create()},
* or {@linkcode TooltipSimple.init .init()},
* properties in this object are overriden for the instance being
* created and how {@linkcode TooltipSimple.init .init()} works.
* @property {string} selectorInit The CSS selector to find simple tooltip UIs.
*/
static get options() {
const { prefix } = settings;
return {
selectorInit: '[data-tooltip-definition],[data-tooltip-icon]',
selectorTriggerButton: `.${prefix}--tooltip__trigger.${prefix}--tooltip--a11y`,
classTooltipHidden: `${prefix}--tooltip--hidden`,
};
}

/**
* The map associating DOM element and simple tooltip UI instance.
* @type {WeakMap}
*/
static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
}
1 change: 1 addition & 0 deletions packages/components/src/globals/js/components.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export { default as CopyButton } from '../../components/copy-button/copy-button'
export { default as Notification } from '../../components/notification/notification';
export { default as Toolbar } from '../../components/toolbar/toolbar';
export { default as Tooltip } from '../../components/tooltip/tooltip';
export { default as TooltipSimple } from '../../components/tooltip/tooltip--simple';
export { default as ProgressIndicator } from '../../components/progress-indicator/progress-indicator';
export { default as FloatingMenu } from '../../components/floating-menu/floating-menu';
export { default as StructuredList } from '../../components/structured-list/structured-list';
Expand Down
12 changes: 12 additions & 0 deletions packages/components/src/globals/scss/_tooltip.scss
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,18 @@
animation: tooltip-fade $duration--fast-01 motion(standard, productive);
}
}

&.#{$prefix}--tooltip--hidden .#{$prefix}--assistive-text,
&.#{$prefix}--tooltip--hidden + .#{$prefix}--assistive-text {
clip: rect(0, 0, 0, 0);
margin: -1px;
overflow: hidden;
}

&.#{$prefix}--tooltip--hidden.#{$prefix}--tooltip--a11y::before {
animation: none;
opacity: 0;
}
}

// Tooltip
Expand Down
Loading

0 comments on commit 95d6105

Please sign in to comment.