feat(logo-grid): web component created #4287

raphaelamadeu-zz · 2020-10-22T15:47:05Z

Related Ticket(s)

Description

Web component version created after the react component.

ibmdotcom-bot · 2020-10-22T16:02:25Z

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/4287/index.html

Built with commit: 3ccb565b0c73da1070afc1accd846ae06db6ef92

ibmdotcom-bot · 2020-10-22T16:07:47Z

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/4287/index.html

Built with commit: 3ccb565b0c73da1070afc1accd846ae06db6ef92

asudoh

Good to see you keep creating new components @raphaelamadeu!

asudoh · 2020-10-22T16:12:23Z

packages/styles/scss/components/logo-grid/_logo-grid.scss

@@ -83,7 +84,9 @@
    }
  }

-  .#{$prefix}--logo-grid__container {
+  .#{$prefix}--logo-grid__container,
+  :host(#{$dds-prefix}-logo-grid):not(.#{$prefix}--logo-grid__no-border)


We don't use CSS classes on our own Web Components, given it tends to clash with CSS classes application code sets:

Suggested change

:host(#{$dds-prefix}-logo-grid):not(.#{$prefix}--logo-grid__no-border)

:host(#{$dds-prefix}-logo-grid):not([hide-border])

asudoh · 2020-10-22T16:12:46Z

packages/web-components/examples/codesandbox/components/logo-grid/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "ibmdotcom-web-components-quote-example",


Suggested change

"name": "ibmdotcom-web-components-quote-example",

"name": "ibmdotcom-web-components-logo-grid-example",

asudoh · 2020-10-22T16:18:24Z

packages/web-components/src/components/logo-grid/logo-grid.ts

+  protected updated() {
+    this.classList.toggle((this.constructor as typeof DDSLogoGrid).hideBorderClass, this.hideBorder);
+  }


We don't use CSS classes on our own Web Components, given it tends to clash with CSS classes application code sets. We use attribute selectors instead:

Suggested change

protected updated() {

this.classList.toggle((this.constructor as typeof DDSLogoGrid).hideBorderClass, this.hideBorder);

}

asudoh · 2020-10-22T16:18:53Z

packages/web-components/src/components/logo-grid/logo-grid.ts

+  static get hideBorderClass() {
+    return `${prefix}--logo-grid__no-border`;
+  }


We don't use CSS classes on our own Web Components, given it tends to clash with CSS classes application code sets. We use attribute selectors instead:

Suggested change

static get hideBorderClass() {

return `${prefix}--logo-grid__no-border`;

}

asudoh · 2020-10-22T16:22:14Z

packages/web-components/src/components/logo-grid/logo-grid.ts

+class DDSLogoGrid extends StableSelectorMixin(DDSContentBlock) {
+  static get stableSelector() {
+    return `${ddsPrefix}--logo-grid`;
+  }
+
+  static get hideBorderClass() {
+    return `${prefix}--logo-grid__no-border`;
+  }
+
+  @property({ attribute: 'hide-border', reflect: true, type: Boolean })
+  hideBorder = false;
+
+  protected updated() {
+    this.classList.toggle((this.constructor as typeof DDSLogoGrid).hideBorderClass, this.hideBorder);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  protected _renderContent() {
+    return html`
+      <div class="bx--content-block__children">
+        <div class="bx--logo-grid__row">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  protected _renderCopy() {
+    return '';
+  }
+
+  // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static get styles() {
+    return css`${super.styles}${styles}`;
+  }
+}


Nitpick for aligning with other classes in the codebase: Could you please re-group properties/methods, in the following order?

Protected methods

Public properties

Static properties

…madeu/carbon-for-ibm-dotcom into web-component/logo-grid

asudoh

Thank you for the update @raphaelamadeu!

asudoh · 2020-10-26T22:57:45Z

packages/web-components/src/components/logo-grid/logo-grid.ts

  protected updated() {
-    this.classList.toggle((this.constructor as typeof DDSLogoGrid).hideBorderClass, this.hideBorder);
+    this.toggleAttribute('hide-border', this.hideBorder);
  }


@property({ attribute: 'hide-border', reflect: true, type: Boolean }) takes care of this automatically.

Suggested change

protected updated() {

this.classList.toggle((this.constructor as typeof DDSLogoGrid).hideBorderClass, this.hideBorder);

this.toggleAttribute('hide-border', this.hideBorder);

}

asudoh

Thanks @raphaelamadeu for the updates!

asudoh · 2020-10-27T14:11:42Z

packages/web-components/src/components/logo-grid/logo-grid-item.ts

+ * LICENSE file in the root directory of this source tree.
+ */
+import { customElement, html, property } from 'lit-element';
+// import settings from 'carbon-components/es/globals/js/settings';


Did you mean to remove this line?

asudoh · 2020-10-27T14:11:47Z

packages/web-components/src/components/logo-grid/logo-grid-item.ts

+import DDSImage from '../image/image';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+
+// const { prefix } = settings;


Did you mean to remove this line?

asudoh · 2020-10-27T14:14:06Z

packages/web-components/src/components/logo-grid/logo-grid.ts

+  protected updated() {
+    this.toggleAttribute('hide-border', this.hideBorder);
+  }


@property({ attribute: 'hide-border', reflect: true, type: Boolean }) takes care of this automatically.

Suggested change

protected updated() {

this.toggleAttribute('hide-border', this.hideBorder);

}

@raphaelamadeu Have you tried to removing this method? Thanks!

…madeu/carbon-for-ibm-dotcom into web-component/logo-grid

asudoh

LGTM 👍 - Thanks @raphaelamadeu for all the updates!

jeffchew · 2020-10-29T17:54:38Z

@raphaelamadeu for the documentation, can you provide some more details of what the complementaryStyleScheme is, and what other options there are other than regular?

…madeu/carbon-for-ibm-dotcom into web-component/logo-grid

jeffchew · 2020-10-30T12:55:07Z

@raphaelamadeu can you add stable selectors?

…madeu/carbon-for-ibm-dotcom into web-component/logo-grid

This reverts commit 4620b58.

Reverts #4287

raphaelamadeu and others added 5 commits October 20, 2020 14:04

progress

1ab281b

progress

1af3ee4

progress

89da840

feat(logo-grid): web-component created

1abb787

feat(logo-grid): test added

09325d2

raphaelamadeu-zz added the package: web components Work necessary for the IBM.com Library web components package label Oct 22, 2020

raphaelamadeu-zz requested review from kennylam, asudoh, jeffchew and annawen1 October 22, 2020 15:47

Merge branch 'master' into web-component/logo-grid

531f575

asudoh reviewed Oct 22, 2020

View reviewed changes

raphaelamadeu-zz added 3 commits October 26, 2020 18:36

chore(logo-grid): changed order

6a9dad5

chore(logo-grid): changed order

807e47b

Merge branch 'web-component/logo-grid' of https://github.com/RaphaelA…

0e52a83

…madeu/carbon-for-ibm-dotcom into web-component/logo-grid

asudoh reviewed Oct 26, 2020

View reviewed changes

chore(test): updated snapshot

efce5c0

asudoh reviewed Oct 27, 2020

View reviewed changes

raphaelamadeu-zz added 3 commits October 27, 2020 15:28

Merge branch 'master' into web-component/logo-grid

1ec4b33

chore(logo-grid): removed commented lines

5fc4f73

Merge branch 'web-component/logo-grid' of https://github.com/RaphaelA…

3decb38

…madeu/carbon-for-ibm-dotcom into web-component/logo-grid

asudoh mentioned this pull request Oct 28, 2020

Web Component: Create Web Components versions of all of the ibm.com Library React components #3460

Closed

raphaelamadeu-zz added 2 commits October 28, 2020 11:41

chore(test): updated snapshot

0bfb2ab

Merge branch 'master' into web-component/logo-grid

0213e3c

asudoh approved these changes Oct 28, 2020

View reviewed changes

Merge branch 'master' into web-component/logo-grid

e193906

Merge branch 'master' into web-component/logo-grid

b2740e4

raphaelamadeu-zz added 3 commits October 29, 2020 19:08

feat(dds-logo-grid): updated render method

5f201f2

chore(test): updated snapshot

178d1cd

Merge branch 'web-component/logo-grid' of https://github.com/RaphaelA…

6d096c5

…madeu/carbon-for-ibm-dotcom into web-component/logo-grid

raphaelamadeu-zz added 4 commits October 30, 2020 10:36

feat(dds-logo-grid): added stable selectors

4b7d88c

Merge branch 'master' into web-component/logo-grid

2384dea

chore(test): updated snapshot

e34c0d1

Merge branch 'web-component/logo-grid' of https://github.com/RaphaelA…

3ccb565

…madeu/carbon-for-ibm-dotcom into web-component/logo-grid

raphaelamadeu-zz merged commit 4620b58 into carbon-design-system:master Oct 30, 2020

raphaelamadeu-zz added a commit that referenced this pull request Oct 30, 2020

Revert "feat(logo-grid): web component created (#4287)"

bdbc637

This reverts commit 4620b58.

raphaelamadeu-zz mentioned this pull request Oct 30, 2020

Revert "feat(logo-grid): web component created" #4370

Merged

raphaelamadeu-zz deleted the web-component/logo-grid branch October 30, 2020 17:11

raphaelamadeu-zz restored the web-component/logo-grid branch October 30, 2020 17:11

kodiakhq bot pushed a commit that referenced this pull request Oct 30, 2020

Revert "feat(logo-grid): web component created" (#4370)

8d7f67f

Reverts #4287

jeffchew mentioned this pull request Nov 10, 2020

November 2020 Release Plan (v1.13.0) #3598

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(logo-grid): web component created #4287

feat(logo-grid): web component created #4287

raphaelamadeu-zz commented Oct 22, 2020

ibmdotcom-bot commented Oct 22, 2020 •

edited

Loading

ibmdotcom-bot commented Oct 22, 2020 •

edited

Loading

asudoh left a comment

asudoh Oct 22, 2020

asudoh Oct 22, 2020

asudoh Oct 22, 2020

asudoh Oct 22, 2020

asudoh Oct 22, 2020

asudoh left a comment

asudoh Oct 26, 2020

asudoh left a comment

asudoh Oct 27, 2020

asudoh Oct 27, 2020

asudoh Oct 27, 2020

asudoh Oct 27, 2020

asudoh left a comment

jeffchew commented Oct 29, 2020

jeffchew commented Oct 30, 2020

	:host(#{$dds-prefix}-logo-grid):not(.#{$prefix}--logo-grid__no-border)
	:host(#{$dds-prefix}-logo-grid):not([hide-border])

		@@ -0,0 +1,22 @@
		{
		"name": "ibmdotcom-web-components-quote-example",

	"name": "ibmdotcom-web-components-quote-example",
	"name": "ibmdotcom-web-components-logo-grid-example",

	protected updated() {
	this.classList.toggle((this.constructor as typeof DDSLogoGrid).hideBorderClass, this.hideBorder);
	}

	static get hideBorderClass() {
	return `${prefix}--logo-grid__no-border`;
	}

	protected updated() {
	this.toggleAttribute('hide-border', this.hideBorder);
	}

feat(logo-grid): web component created #4287

feat(logo-grid): web component created #4287

Conversation

raphaelamadeu-zz commented Oct 22, 2020

Related Ticket(s)

Description

ibmdotcom-bot commented Oct 22, 2020 • edited Loading

ibmdotcom-bot commented Oct 22, 2020 • edited Loading

asudoh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

jeffchew commented Oct 29, 2020

jeffchew commented Oct 30, 2020

ibmdotcom-bot commented Oct 22, 2020 •

edited

Loading

ibmdotcom-bot commented Oct 22, 2020 •

edited

Loading