Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon links and buttons need to have a title to show a tooltip | Fixes #972 #973

Merged
merged 8 commits into from
Jun 8, 2018
Merged

Icon links and buttons need to have a title to show a tooltip | Fixes #972 #973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d09a59e
Add support for svg title tag in tooltips | Fixes #972
Jun 7, 2018
bcf5d6a
Add title to button, links and dropdowns to make tooltips work | Fixe…
Jun 7, 2018
ba8a052
Regen snapshots | Fixes #972
Jun 7, 2018
62397b0
Regent testSoy snapshots | Fixes #972
Jun 7, 2018
5945a0f
SF | Fixes #972
Jun 7, 2018
86139ad
Replace sort key with order key | Fixes #972
Jun 7, 2018
96ca2af
Regen snapshots | Fixes #972
Jun 7, 2018
6f11b17
Regen testSoy snapshots | Fixes #972
Jun 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/clay-button/src/ClayButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,15 @@ ClayButton.STATE = {
'primary'
),

/**
* The title attribute of the element.
* @default undefined
* @instance
* @memberof ClayButton
* @type {?(string|undefined)}
*/
title: Config.string(),

/**
* The type attribute value of the element.
* @default button
Expand Down
5 changes: 5 additions & 0 deletions packages/clay-button/src/ClayButton.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
{@param? size: string}
{@param? spritemap: string}
{@param? style: string}
{@param? title: string}
{@param? type: string}
{@param? value: string}

Expand Down Expand Up @@ -65,6 +66,10 @@
name="{$name}"
{/if}

{if $title}
title="{$title}"
{/if}

{if $value}
value="{$value}"
{/if}
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`ClayFileCard should render a ClayFileCard with actionItems 1`] = `
</div>
<div class="autofit-col">
<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with actionItems
</div>
<div class="autofit-col">
<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-card/src/__tests__/__snapshots__/ClayImageCard.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`ClayImageCard should render a ClayImageCard with actionItems 1`] = `
</div>
<div class="autofit-col">
<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`ClayUserCard should render a ClayUserCard with actionItems 1`] = `
</div>
<div class="autofit-col">
<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down
166 changes: 83 additions & 83 deletions packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions packages/clay-dropdown/src/ClayActionsDropdown.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,10 @@
{param ref: 'dropdown' /}
{param spritemap: $spritemap /}
{param triggerClasses: $triggerClasses /}
{param triggerTitle kind="text"}
{msg desc=""}
actions
{/msg}
{/param}
{/call}
{/template}
9 changes: 9 additions & 0 deletions packages/clay-dropdown/src/ClayCreationMenuDropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,15 @@ ClayCreationMenuDropdown.STATE = {
*/
triggerClasses: Config.string(),

/**
* The title attribute of the trigger element.
* @default undefined
* @instance
* @memberof ClayCreationMenuDropdown
* @type {?(string|undefined)}
*/
triggerTitle: Config.string(),

/**
* The url for the view more button in case is rendered.
* @instance
Expand Down
22 changes: 16 additions & 6 deletions packages/clay-dropdown/src/ClayCreationMenuDropdown.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
{@param? maxTotalItems: int}
{@param? secondaryItems: list<?>}
{@param? triggerClasses: string}
{@param? triggerTitle: string}
{@param? viewMoreURL: string}

{let $secondaryItemsFirstGroup:
Expand Down Expand Up @@ -180,12 +181,12 @@
null
/}

{let $trigger kind="html"}
{call ClayIcon.render}
{param spritemap: $spritemap /}
{param symbol: 'plus' /}
{/call}
{/let}
{let $trigger kind="html"}
{call ClayIcon.render}
{param spritemap: $spritemap /}
{param symbol: 'plus' /}
{/call}
{/let}

{call ClayDropdownBase.render}
{param button: $showMoreButton /}
Expand Down Expand Up @@ -213,5 +214,14 @@
{param spritemap: $spritemap /}
{param style: 'primary' /}
{param triggerClasses: $triggerClasses /}
{param triggerTitle kind="text"}
{if $triggerTitle}
{$triggerTitle}
{else}
{msg desc=""}
new
{/msg}
{/if}
{/param}
{/call}
{/template}
9 changes: 9 additions & 0 deletions packages/clay-dropdown/src/ClayDropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,15 @@ ClayDropdown.STATE = {
*/
triggerClasses: Config.string(),

/**
* The title attribute of the trigger element.
* @default undefined
* @instance
* @memberof ClayDropdown
* @type {?(string|undefined)}
*/
triggerTitle: Config.string(),

/**
* Size of the trigger button.
* @default undefined
Expand Down
2 changes: 2 additions & 0 deletions packages/clay-dropdown/src/ClayDropdown.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
{@param? style: string}
{@param? triggerClasses: string}
{@param? triggerSize: string}
{@param? triggerTitle: string}

{let $trigger kind="html"}
{if $icon}
Expand Down Expand Up @@ -62,5 +63,6 @@
{param style: $style /}
{param triggerClasses: $triggerClasses /}
{param triggerSize: $triggerSize /}
{param triggerTitle: $triggerTitle /}
{/call}
{/template}
9 changes: 9 additions & 0 deletions packages/clay-dropdown/src/ClayDropdownBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,15 @@ ClayDropdownBase.STATE = {
* @type {?(string|undefined)}
*/
triggerSize: Config.oneOf(['sm']),

/**
* The title attribute of the trigger element.
* @default undefined
* @instance
* @memberof ClayDropdownBase
* @type {?(string|undefined)}
*/
triggerTitle: Config.string(),
};

Soy.register(ClayDropdownBase, templates);
Expand Down
7 changes: 7 additions & 0 deletions packages/clay-dropdown/src/ClayDropdownBase.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
{@param? style: string}
{@param? triggerClasses: string}
{@param? triggerSize: string}
{@param? triggerTitle: string}

{let $attributes kind="attributes"}
class="dropdown
Expand All @@ -49,6 +50,7 @@
{param label: $label /}
{param size: $triggerSize /}
{param style: $style /}
{param title: $triggerTitle /}
{/call}

{call .sections}
Expand Down Expand Up @@ -260,6 +262,7 @@
{@param? expanded: bool}
{@param? size: string}
{@param? style: string}
{@param? title: string}

{let $buttonAttributes kind="attributes"}
{if $expanded}
Expand Down Expand Up @@ -292,6 +295,10 @@
data-onclick="toggle"
{/if}

{if $title}
title="{$title}"
{/if}

type="button"
{/let}

Expand Down
12 changes: 6 additions & 6 deletions packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`ClayActionsDropdown should render a disabled dropdown 1`] = `
<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" disabled="" type="button">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" disabled="" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down Expand Up @@ -45,7 +45,7 @@ exports[`ClayActionsDropdown should render a disabled dropdown 1`] = `

exports[`ClayActionsDropdown should render an actions dropdown with classes 1`] = `
<div class="dropdown dropdown-action my-custom-class">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down Expand Up @@ -88,7 +88,7 @@ exports[`ClayActionsDropdown should render an actions dropdown with classes 1`]

exports[`ClayActionsDropdown should render an actions dropdown with id 1`] = `
<div class="dropdown dropdown-action" id="myId">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down Expand Up @@ -131,7 +131,7 @@ exports[`ClayActionsDropdown should render an actions dropdown with id 1`] = `

exports[`ClayActionsDropdown should render an actions dropdown with triggerClasses 1`] = `
<div class="dropdown dropdown-action" id="myId">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down Expand Up @@ -174,7 +174,7 @@ exports[`ClayActionsDropdown should render an actions dropdown with triggerClass

exports[`ClayActionsDropdown should render an expanded action dropdown 1`] = `
<div class="dropdown dropdown-action show">
<button aria-expanded="true" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
<button aria-expanded="true" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down Expand Up @@ -217,7 +217,7 @@ exports[`ClayActionsDropdown should render an expanded action dropdown 1`] = `

exports[`ClayActionsDropdown should render default markdown 1`] = `
<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" title="actions" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
<title>ellipsis-v</title>
<use xlink:href="icons.svg#ellipsis-v"></use>
Expand Down
Loading