Skip to content

Commit

Permalink
#1970 Replace light prop with Layer component in Carbon components (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
nmgokhale authored May 21, 2024
1 parent 6396271 commit 62323fa
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 43 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,6 @@ class EditorForm extends React.Component {
return (
<Tabs key={"tab." + key}
selectedIndex={modalSelected}
light={this.props.controller.getLight()}
>
<TabList className="properties-primaryTabs" aria-label={tabListAriaLabel}>
{tabLists}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { connect } from "react-redux";
import { setTitle } from "./../../actions";
import Isvg from "react-inlinesvg";
import { get } from "lodash";
import { TextInput, Button } from "@carbon/react";
import { TextInput, Button, Layer } from "@carbon/react";
import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE } from "./../../constants/constants";
import * as PropertyUtils from "./../../util/property-utils";
import classNames from "classnames";
Expand Down Expand Up @@ -181,25 +181,26 @@ class TitleEditor extends Component {
}
)}
>
<TextInput
id={this.id}
ref={this.textInputRef}
value={this.props.title}
onChange={this.handleTitleChange}
onKeyDown={(e) => this._handleKeyPress(e)}
readOnly={this.props.labelEditable === false} // shows a non editable icon
labelText={this.labelText}
hideLabel
size="sm"
onFocus={this.textInputOnFocus}
onBlur={this.textInputOnBlur}
light={this.props.controller.getLight()}
invalid={titleWithErrror}
invalidText={get(this.state.titleValidation, "message")}
warn={titleWithWarning}
warnText={get(this.state.titleValidation, "message")}
{... this.state.focused && { className: "properties-title-editor-focused" }}
/>
<Layer level={this.props.controller.getLight() ? 1 : 0} className="properties-title-editor-layer">
<TextInput
id={this.id}
ref={this.textInputRef}
value={this.props.title}
onChange={this.handleTitleChange}
onKeyDown={(e) => this._handleKeyPress(e)}
readOnly={this.props.labelEditable === false} // shows a non editable icon
labelText={this.labelText}
hideLabel
size="sm"
onFocus={this.textInputOnFocus}
onBlur={this.textInputOnBlur}
invalid={titleWithErrror}
invalidText={get(this.state.titleValidation, "message")}
warn={titleWithWarning}
warnText={get(this.state.titleValidation, "message")}
{... this.state.focused && { className: "properties-title-editor-focused" }}
/>
</Layer>
{titleValidationTypes.includes(get(this.state.titleValidation, "type")) ? null : propertiesTitleEdit}
</div>
{!this.headingEnabled && !titleValidationTypes.includes(get(this.state.titleValidation, "type")) ? helpButton : null}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,11 @@
&.properties-title-editor-with-help {
width: calc(100% - #{$spacing-07} - #{$spacing-03}); // subtract the size of the help button and 8px to align with Close icon when applyOnBlur is set
}
.cds--form-item.cds--text-input-wrapper {
.properties-title-editor-layer {
// allow edit icon to be at the end of text input
width: 100%;

}
.cds--form-item.cds--text-input-wrapper {
input { //override styling from carbon
@include type-style("productive-heading-02");
color: $text-primary;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import React from "react";
import PropTypes from "prop-types";
import { Add } from "@carbon/react/icons";
import { Button } from "@carbon/react";
import { Switch, ContentSwitcher, Dropdown } from "@carbon/react";
import { Switch, ContentSwitcher, Dropdown, Layer } from "@carbon/react";
import FlexibleTable from "./../../../components/flexible-table/flexible-table";
import TruncatedContentTooltip from "./../../../components/truncated-content-tooltip";
import { MESSAGE_KEYS, EXPRESSION_TABLE_ROWS, SORT_DIRECTION, ROW_SELECTION } from "./../../../constants/constants";
Expand Down Expand Up @@ -605,15 +605,16 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
};
return (
<div className="properties-expression-function-select">
<Dropdown
id={"properties-expression-function-select-dropdown-" + this.uuid}
light={this.props.controller.getLight()}
label={label}
items={items}
onChange={this.onFunctionCatChange}
translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
titleText={header}
/>
<Layer level={this.props.controller.getLight() ? 1 : 0}>
<Dropdown
id={"properties-expression-function-select-dropdown-" + this.uuid}
label={label}
items={items}
onChange={this.onFunctionCatChange}
translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
titleText={header}
/>
</Layer>
</div>);
}

Expand All @@ -634,15 +635,16 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
};
return (
<div className="properties-expression-field-select">
<Dropdown
id={"properties-expression-field-select-dropdown-" + this.uuid}
light={this.props.controller.getLight()}
label={label}
items={newItems}
onChange={this.onFieldCatChange}
translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
titleText={header}
/>
<Layer level={this.props.controller.getLight() ? 1 : 0}>
<Dropdown
id={"properties-expression-field-select-dropdown-" + this.uuid}
label={label}
items={newItems}
onChange={this.onFieldCatChange}
translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
titleText={header}
/>
</Layer>
</div>);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ class Subtabs extends React.Component {
>
<Tabs
selectedIndex={activeTab}
light={this.props.controller.getLight()}
>
<TabList className={classNames("properties-subtabs", { "properties-leftnav-subtabs": this.props.leftnav })} aria-label={tabListAriaLabel}>
{subTabLists}
Expand Down

0 comments on commit 62323fa

Please sign in to comment.